18073 sujets

Questions générales et questions de débutants

A propos de positionnement d'un menu horizontal [resolu]

Bonjour a tous ,

Dans le code source de la page http://css.alsacreations.com/modelesmenus/hs1.htm, ou l'on presente un exemple de menu horizontal,

la partie css donne 
ul {
list-style-type: none;
width:100%; 
}
.

A ce sujet , il est ecrit que le 100 % est la pour opera....

si je fais copier-coller a la fois du CSS et du HTML dans mes docs, tout fonctionne a merveille sauf que l'alignement droit (dans mon cas , float est right...) de la liste est décalée par rapport a mon div du dessus(voir le code plus bas)

Par contre si j'enleve le 100 % de Width , le probleme disparait et l'alignement devient bon....

J'essaie de bien comprendre les choses une a une dans le CSS et je ne voudrais pas faire d'impair.

Soit le 100% n'est valable que pour opéra et il faut l'enlever pour les autres navigateurs soit il y a un souci dans mon code.

voila le CSS : 
BODY {
background-color:#CCCCCC;
margin:10px;
padding:0;
}

h1 {
font-family:"century gothic";
font-weight:bold;
font-size:x-large;
color:#196caa;
text-decoration:none;
}
h2 {
font-family:"century gothic";
font-weight:normal;
font-size:large;
color:#666666;
text-decoration:none;
margin-right:10px;
margin-bottom:10px;
}

ul {
list-style-type: none;
width:100%; 
}

.menu li {
float: right;
}

.menu a {
margin:10 px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: #ccc;
border: 1px solid gray; 
}

.menu a:active {
background: gray;
border: 1px solid gray; 
color: #fff;
}

#header {
background-color:white;
background-image:url(Images/HEADER.gif);
background-repeat:no-repeat;
background-position:left;
height:130px;
padding:0;
margin-top:0;
position:relative;
width:100%;
border-bottom-color:#999999;
border-bottom-style:solid;
border-bottom-width:1px;
text-align:right;
}
#menuhaut {
background-color:#196caa;
background-image:url(Images/sous-header2.gif);
background-repeat:no-repeat;
height:80px;
float:left;
width:100%;
text-align:right;
}


et la partie XHTML:
<body>
<div id="header">
<h1>M&eacute;tier Environnement.&nbsp;</h1>
<h2>Accueil du site</h2>
</div>
<div id="menuhaut">
	<ul class="menu">
		<li><a href="">Lien 4</a></li>
		<li><a href="">Lien 3</a></li>
		<li><a href="">Lien 2</a></li>
		<li><a href="">Lien 1</a></li>
	</ul>
</div>

</body>


est un amateur averti saurait m'eclairer un peu plus ?
Modifié par RoseGrenouille (01 Sep 2005 - 01:26)
Bonjour RoseGrenouille,

Non cela ne vient pas de ton code.
Si tu fais le même test avec le code du menu d'Alsa alors le résultat est le même :

.menu li {
float: right;
}

remplacé par :

.menu li {
float: left;
}

Je "m'amuse" a essayer de comprendre également.
Si j'ai plus d'info je posterais de nouveau

JP
Modifié par tibrus (31 Aug 2005 - 08:14)
L'implémentation des listes est variable selon les navigateurs ; il y a déjà des post à ce sujet ici : décalage de listes... Essaye de mettre :

padding: 0;
margin: 0;

dans ta css, pour "ul" ou "li" (je ne sais plus, car je le mets par défaut pour toute ma css), et tout devrait rentrer dans l'ordre.
Salut,

Comme cela m'intriguait, je viens de faire le test et c'est OK.
Bien joué Macpom

Et pour RoseGrenouille, j'ai vu cela dans ton code. Un espace de trop devant px
.menu a {
margin:10 px;


A+

JP
Merci Macpom pour l'idée de remise à zéro de margin et padding.

et Merci aussi a tibrus pour l'espace....

Ca fait deux choses de reglé , au suivant ! Smiley murf
Sujet clos
Aller à