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