Supprimer un espace entre en-tête et menu
Résolu
alejandrom
-
alejandrom -
alejandrom -
Bonjour,
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
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
A voir également:
- Supprimer un espace entre en-tête et menu
- Supprimer rond bleu whatsapp - Guide
- Espace insécable - Guide
- Espace de stockage gmail plein - Guide
- Supprimer page word - Guide
- Supprimer menu déroulant excel - Guide
6 réponses
Bonsoir,
En utilisant les propriétés CSS margin et/ou padding, tu devrais pouvoir "ajuster tes conteneurs" au plus précis...
En utilisant les propriétés CSS margin et/ou padding, tu devrais pouvoir "ajuster tes conteneurs" au plus précis...
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 !
Ton site est en ligne? Ca serait l'idéal pour aller voir le problème en réel !
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" :
Dans ton CSS rajoute une ligne à "#menu ul" :
#menu ul{
list-style-type:none;
background:#be1b18;
margin-top:0px;
}
Le code CSS serait donc celui-ci :
div#header {margin: 0 auto 0 auto; padding: 0;} #menu ul {list-style-type: none; margin-top: 0; background: #be1b18; }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 :/