Conflit Menu/Div

Messages postés
9
Date d'inscription
jeudi 16 mai 2019
Statut
Membre
Dernière intervention
20 mai 2019
-
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;
}
Afficher la suite 

1 réponse

Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
54
0
Merci
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
Commenter la réponse de SioGabx