Supprimer un espace entre en-tête et menu

Résolu
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

A voir également:

6 réponses

Réponse 1 / 6
__construct
 
Bonsoir,

En utilisant les propriétés CSS margin et/ou padding, tu devrais pouvoir "ajuster tes conteneurs" au plus précis...
0
alejandrom
 
Je n'ai pas utilisé ces propriétés dans mon code CSS (sauf body{margin:auto;} ) donc c'est comme si j'avais margin:0; et padding:0;. J'ai rajouté mon codage si tu veux voir :)
0
__construct
 
où est le conteneur de la bannière dans ton code CSS? Je ne vois que le paramétrage du menu...
0
alejandrom
 
Je n'ai pas touché au CSS pour mon en-tête puisque c'est juste une image (le rectangle noir) que j'ai ajouté en xHTML. En gros, il n'y a pas de paramétrage CSS pour ma bannière.
0
__construct
 
Pourtant tu utilises bien un conteneur nommé "header" dans ta page HTML
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; }
0
alejandrom
 
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 :/
0
Réponse 2 / 6
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
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 !
0
alejandrom
 
Merci pour ta réponse. Non, mon site n'est pas en ligne mais je peux faire une capture d'écran si tu veux. J'ai ajouté mon code xHTML/CSS.
0
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
Je veux bien une capture oui, pour voir le genre de soucis :-)
0
alejandrom
 
Ça y est j'ai rajouté la capture tout en bas de ma question :)
Mon site est un test donc c'est normal que la bannière soit toute noire et qu'il manque un truc dans le menu entre "ACTUALITE" et "MULTIMEDIA".
0
Réponse 3 / 6
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
Sans conviction : essaye de passer le "margin-bottom" du body à 0px ?
0
alejandrom
 
Non ça ne fait rien mais merci quand même d'essayer de m'aider :)
0
Réponse 4 / 6
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
Et en supprimant le padding du "#menu ul li" ?
0
alejandrom
 
Non plus :/
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
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;
}
0
alejandrom
 
Ça m'a déjà été conseillé de faire plus haut et ça n'a aucun effet :(
0
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
Vraiment ?!
Pourtant en testant en local chez moi, cela supprimer bien l'espace ! Tu es sous quel navigateur ?
0
alejandrom
 
Firefox 5, tout marche avec Firefox pourtant..
Je comprends vraiment pas d'où vient le problème
0
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
Tu utilises Firebug ?
0
alejandrom
 
Non je n'utilise pas Firebug, tu veux que je l'installe ?
0
Réponse 6 / 6
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   132
 
Salut, tu peux aussi essayer avec une valeur négative par exemple pour le bloc menu: 
#menu{
	margin: -16px 0 0 0;
	padding: 0;
}
0
alejandrom
 
MERCIIIIIIIIIIII :D
J'ai enlevé tous les margin et padding et j'ai ajouté à -21px et ça marche à la perfection, merci beaucoup :)
Mais je trouve quand même bizarre qu'il faille faire ça.. tant pis :)
Merci encore :D
0

Discussions similaires

Word : comment justifier un texte sans trop d'espaces
ben -
m@rina -

138 réponses