Sujet Précédent Sujet Suivant

Supprimer un espace entre en-tête et menu

Résolu/Fermé
alejandrom - Modifié par alejandrom le 15/08/2011 à 20:26
 alejandrom - 15 août 2011 à 22:29
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
15 août 2011 à 20:00
Bonsoir,

En utilisant les propriétés CSS margin et/ou padding, tu devrais pouvoir "ajuster tes conteneurs" au plus précis...
0
alejandrom
Modifié par alejandrom le 15/08/2011 à 20:18
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
15 août 2011 à 20:25
où est le conteneur de la bannière dans ton code CSS? Je ne vois que le paramétrage du menu...
0
alejandrom
Modifié par alejandrom le 15/08/2011 à 20:33
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
15 août 2011 à 20:36
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
Modifié par alejandrom le 15/08/2011 à 20:52
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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
15 août 2011 à 20:04
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
Modifié par alejandrom le 15/08/2011 à 20:34
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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
15 août 2011 à 20:14
Je veux bien une capture oui, pour voir le genre de soucis :-)
0
alejandrom
Modifié par alejandrom le 15/08/2011 à 20:30
Ç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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
15 août 2011 à 20:43
Sans conviction : essaye de passer le "margin-bottom" du body à 0px ?
0
alejandrom
15 août 2011 à 20:50
Non ça ne fait rien mais merci quand même d'essayer de m'aider :)
0
Réponse 4 / 6
Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
15 août 2011 à 21:21
Et en supprimant le padding du "#menu ul li" ?
0
alejandrom
15 août 2011 à 21:29
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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
15 août 2011 à 21:35
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
15 août 2011 à 21:43
Ça m'a déjà été conseillé de faire plus haut et ça n'a aucun effet :(
0
Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
15 août 2011 à 21:45
Vraiment ?!
Pourtant en testant en local chez moi, cela supprimer bien l'espace ! Tu es sous quel navigateur ?
0
alejandrom
15 août 2011 à 21:48
Firefox 5, tout marche avec Firefox pourtant..
Je comprends vraiment pas d'où vient le problème
0
Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
15 août 2011 à 21:49
Tu utilises Firebug ?
0
alejandrom
Modifié par alejandrom le 15/08/2011 à 22:01
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 jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
15 août 2011 à 22:23
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
Modifié par alejandrom le 15/08/2011 à 22:32
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

supprimer espace dans les nombres (Excel)
choise62 -
Sam -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse