Supprimer un espace entre en-tête et menu
Résolualejandrom -
Je vous expose mon problème. En haut de mon site il y a mon en-tête (une bannière), juste en dessous, mon menu horizontal. Le problème est qu'il y a un espace entre ma bannière et mon menu horizontal que je veux supprimer. Une idée ?
Mon site est en xHTML/CSS.
Voici mon code xHTML & CSS.
xHTML :
<body>
<div id="header">
<img src="images/header.jpg"/ alt="en-tête" title="Accueil">
</div>
<div id="menu">
<ul>
<li><a href="#">ACTUALITE</a></li>
<li><a href="#">/</a></li>
<li><a href="#">MULTIMEDIA</a></li>
<li><a href="#">TWITTER</a></li>
<li><a href="#">CONTACTER LE SITE</a></li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
CSS :
body{
width: 980px;
margin: auto;
margin-bottom: 20px;
background-image: url("images/background.jpg");
font-family:Arial;
}
#menu ul{
list-style-type:none;
background:#be1b18;
}
#menu ul li{
display : inline;
padding : 0 2.5em;
}
#menu ul li a{
text-decoration:none;
color:white;
}
Voici une capture d'écran de mon site qui n'est pas encore en ligne : http://img11.hostingpics.net/pics/837801Capture.png
6 réponses
L’espace entre la bannière en-tête et le menu horizontal provient généralement d’un paramétrage CSS manquant ou inadapté sur les conteneurs, notamment les marges et le positionnement. Pour y remédier, assurez-vous que le conteneur du header et celui du menu n’appliquent pas de marge supérieure inutile, et que le ul du menu n’a pas de marges ou de padding. Dans le CSS, ajoutez règles comme div#header { margin: 0; padding: 0; } et #menu { margin-top: 0; padding-top: 0; }, puis #menu ul { margin: 0; padding: 0; list-style: none; background: #be1b18; } pour éliminer décalages. En cas de doute, vérifier les marges par défaut des éléments et tester avec un navigateur différent, car des marges internes propres au rendu peuvent varier.
-
Bonsoir,
En utilisant les propriétés CSS margin et/ou padding, tu devrais pouvoir "ajuster tes conteneurs" au plus précis...-
-
-
-
-
Oui le id="header" était juste là au cas où je devais faire un quelconque ajout/modification avec du CSS mais était dans le cas présent inutile.
J'ai essayé le code que tu m'as fait et voilà le résultat : http://img11.hostingpics.net/pics/148720Capture.png
L'espace est plus petit mais il y a toujours un espace :/
-
-
Sans ton code HTML / CSS on ne peut pas savoir d'où vient le problème...
Ton site est en ligne? Ca serait l'idéal pour aller voir le problème en réel !
-
Sans conviction : essaye de passer le "margin-bottom" du body à 0px ?
-
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
Alors je pense que ça vient des caractéristiques intrinsèques à la balise <ul>.
Dans ton CSS rajoute une ligne à "#menu ul" :#menu ul{ list-style-type:none; background:#be1b18; margin-top:0px; }
-
Salut, tu peux aussi essayer avec une valeur négative par exemple pour le bloc menu:
#menu{ margin: -16px 0 0 0; padding: 0; }
