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:

Supprimer un espace entre en-tête et menu
Espace insécable - Guide
Supprimer une page word - Guide
Supprimer menu déroulant excel - Guide
Espace de stockage gmail plein - Guide
Supprimer compte instagram - Guide

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...

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 :)

__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...

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.

__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; }

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 :/

Réponse 2 / 6

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
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 !

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.

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
15 août 2011 à 20:14

Je veux bien une capture oui, pour voir le genre de soucis :-)

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".

Réponse 3 / 6

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
15 août 2011 à 20:43

Sans conviction : essaye de passer le "margin-bottom" du body à 0px ?

alejandrom
15 août 2011 à 20:50

Non ça ne fait rien mais merci quand même d'essayer de m'aider :)

Réponse 4 / 6

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
15 août 2011 à 21:21

Et en supprimant le padding du "#menu ul li" ?

alejandrom
15 août 2011 à 21:29

Non plus :/

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 mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
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;
}

alejandrom
15 août 2011 à 21:43

Ça m'a déjà été conseillé de faire plus haut et ça n'a aucun effet :(

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
15 août 2011 à 21:45

Vraiment ?!
Pourtant en testant en local chez moi, cela supprimer bien l'espace ! Tu es sous quel navigateur ?

alejandrom
15 août 2011 à 21:48

Firefox 5, tout marche avec Firefox pourtant..
Je comprends vraiment pas d'où vient le problème

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
15 août 2011 à 21:49

Tu utilises Firebug ?

alejandrom
Modifié par alejandrom le 15/08/2011 à 22:01

Non je n'utilise pas Firebug, tu veux que je l'installe ?

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;
}

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

Discussions similaires

Suppression listes déroulantes

Word : comment justifier un texte sans trop d'espaces