Conflit Menu/Div [Fermé]

Signaler
Messages postés
9
Date d'inscription
jeudi 16 mai 2019
Statut
Membre
Dernière intervention
20 mai 2019
-
Messages postés
245
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
16 avril 2020
-
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;
}

1 réponse

Messages postés
245
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
16 avril 2020
78
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