Conflit Menu/Div

Fermé

AeseNot Messages postés 9 Date d'inscription jeudi 16 mai 2019 Statut Membre Dernière intervention 20 mai 2019 - Modifié le 18 mai 2019 à 22:51
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 - 20 mai 2019 à 11:29

Bonjour voila j'ai un soucis j'ai un espace entre mon menu <nav> et mon Div background ce qui est embêtant et je localise pas le problème...

Voici mon code:

<code html><!DOCTYPE>
<html lang="fr">
<head>
     <title> Contacte Mouse micro 65 </title>
           <meta charset='utf-8'>
     <link rel="stylesheet" type="text/css" href="stylesheet contact.css" />
</head>
<body>
       <nav>
         <ul id="menu">
                      <li class="menu-Accueil"><a href="Site Micro Mouse.html">Accueil   </a>
                      </li>
                      <li class="menu-Service"><a href="Service.html">Service informatique   </a>
                                           <ul class="submenu">
                                                              <li><a href="#"> Intervention à domicile </a></li>
                                                              <li><a href="#"> Intervention à distance </a></li>
                                           </ul>
                      </li>
                      <li class="menu-Shop"><a href="Shop.html"> Boutique   </a>
                                           <ul class="submenu">
                                                              <li><a href="#"> Ordinateur de bureau </a></li>
                                                              <li><a href="#"> Ordinateur portable </a></li>
                                                              <li><a href="#"> Accessoire </a></li>
                                                              <li><a href="#">  </a></li>
                                           </ul>
                      </li>
                      <li class="menu-Contact"><a href="Contact.html"> Contact   </a><!--Etc-->
                      </li>
                      <li class="menu-Maps"><a href="https://www.google.com/maps/dir//mouse+micro+65+google+maps/@43.2001773,0.0329217,17z/data=!4m8!4m7!1m0!1m5!1m1!1s0x12a9d51d91eeca49:0xc777d6f4e8f4e1fa!2m2!1d0.034559!2d43.1998626"> Google Maps   </a><!--Etc-->
                      </li>
         </ul>
     </nav>
     <div id="Horizon">
<h1>Contactez nous !</h1>

 <form action="/ma-page-de-traitement" method="post">
    <div>
        <label for="name">Nom :</label>
        <input type="text" id="name" name="user_name">
    </div>
    <div>
        <label for="mail">e-mail :</label>
        <input type="email" id="mail" name="user_mail">
    </div>
    <div>
        <label for="msg">Message :</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
    <div class="button">
        <button type="submit">Envoyer le message</button>
</div>
</form>
 
</div>

</body>


</html>

</code>
et mon code CSS:

h1{
 color: #FFF;
 font-size: 70px;
 text-align: center;
 
 
}
body{
 font-family: 'Source code pro', serif;
 margin:0px;
 padding: 0px;
 background-image: url('Hextech/One9353.jpeg')
}
nav > ul{
 margin: 0px;
 padding: 0px;
}
nav > ul > li{
 float: left;
 
}
nav li{
 list-style-type: none;
}
nav{
 font-family: sans-serif;
 width: 100%;
 background-color: #220954;
}
nav > ul > li{
 float: left;
 position: relative;
}
nav > ul::after{
 content:"";
 display: block;
 clear: both;
}
nav a{
 display: inline-block;
 text-decoration: none;
}
nav > ul > li > a{
 padding:25px 50px;
 color: #FFF;
}
.submenu{
 display: none;
}
nav li:hover .submenu{
 display: inline-block;
 position: absolute;
 top: 100%;
 right: 0%;
 padding: 0px;
 z-index: 100000;
} 
.submenu li{
 border-bottom: 1px solid #CCC;
}
.submenu li a{
 font-family: sans-serif;
 padding: 15px 30px;
 font-size: 16px;
 color: #FFF;
 width: 270px;
}
.menu-Accueil:hover{
 border-top: 5px solid #e44d26;
 background-color:RGBa(228, 77, 38, 0.15);
}
.menu-Service:hover{
 border-top: 5px solid #0070bb;
 background-color:RGBa(000, 112, 192, 0.15);
}
.menu-Shop:hover{
 border-top: 5px solid #f1dc4f;
 background-color:RGBa(9, 243, 196, 0.15);
}
.menu-Contact:hover{
 border-top: 5px solid #BBB;
 background-color:RGBa(220, 220, 220, 0.15);
}
.menu-Maps:hover{
 border-top: 5px solid #BBB;
 background-color:RGBa(220, 220, 220, 0.15);
}
.menu-Accueil .submenu{
 background-color: RGB(30, 48, 215);
}
.menu-Service .submenu{
 border-top: 5px solid #e44d26;
 background-color:RGBa(228, 77, 38, 0.15);
}
.menu-Shop .submenu{
border-top: 5px solid #e44d26;
 background-color:RGBa(228, 77, 38, 0.15);
}
.menu-Contact .submenu{
 background-color: RGB(30, 48, 215);
}
.menu-Maps .submenu{
 background-color: RGB(243, 126, 9);
}
.submenu li:hover a{
 color:#EEE;
 font-weight: bold;
}
.menu-Accueil .submenu li:hover{
 background-color: RGB(210, 77, 60)
}
.menu-Service .submenu li:hover{
 background-color: RGB(000, 112, 192)
}
.menu-Shop .submenu li:hover{
 background-color: RGB(9, 243, 196)
}
.menu-Contact .submenu li:hover{
 background-color: RGB(200, 165, 75)
}
.menu-Maps .submenu li:hover{
 background-color: RGB(200, 165, 75)
}
#Horizon{
  width: 80%;
  height:150%;
  margin: 0 auto;
  background-color: #FFF;
  background-repeat: no-repeat;
 
}

form {
  
  margin: 0 auto;
  width: 400px;

  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
  background: linear-gradient(#5A4A90, #5E48A5, #5332C0, #4A23CB, #410FE5, #3C00FF );
  box-shadow: 60px -16px #3C00FF ;
  font-family: sans-serif;
  color: #FFF;
}
form div + div {
  margin-top: 1em;
}
label {
 
  display: inline-block;
  width: 90px;
  text-align: right;
}
input, textarea {
  font: 1em sans-serif;
  width: 300px;
  box-sizing: border-box;
  border: 1px solid #999;
}
input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;
  height: 10em;
}

.button {
  padding-left: 90px; 
}

button {
  margin-left: .7em;
}

A voir également:

Conflit Menu/Div
Menu déroulant excel - Guide
Windows 11 menu démarrer classique - Guide
Réinitialiser menu démarrer windows 10 - Guide
Canon quick menu - Télécharger - Utilitaires
Windows 11 menu contextuel classique - Guide

1 réponse

Réponse 1 / 1

SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
Modifié le 20 mai 2019 à 11:30

Salut, je comprend pas trop ton problème.. Je pense aussi qu'il manque du CSS, tu a vraiment tout passer ?
Ci-joint aperçu de ce que ça donne :
https://img-19.ccm2.net/uEctCB-kbBuWiBrLGxTYM4T5tf4=/9f153746192b4fb6ad07b8f372be3ae9/tmp/Sans_titre.png

Discussions similaires

menu caché

Déblocage du mode hôtel Philips 20HF5234/10

Mon PC marque press the esc key for startup menu