ul li et css ??

22 déc. 2008, 19:28

Bonjour,
Je souhaite faire un petit menu pour mon site et j'ai ceci :

div#menu_haut {
	width:850px;
	height:20px;
    background-color: #336699;
	margin-left:auto;
	margin-right:auto;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
}
div#menu_haut ul {
    padding: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 20px;
    white-space: nowrap;
	text-align: center;
	padding-bottom: 10px;
}
div#menu_haut li {
    list-style-type: none;
    display: inline;
	
}
div#menu_haut a {
	width:116px;
	height:20px;
	background-color:#3A3A3A;
	color:#FFF;
	text-decoration:none;
	display:block;
}

et

Code : Tout sélectionner

<div id="menu_haut">
	<ul>
			<li><a href="index.htm">Lien 1</a></li>
			<li><a href="index.htm">Lien 2</a></li>
			<li><a href="index.htm">Lien 3</a></li>
	</ul>
</div>

Quand je n'avais pas "div#menu_haut a", le menu était bien horizontal avec les liens cote a cote, sauf que dès qu'il y ai, il y en a un qui est au bon endroit et tout les autres, les uns en dessous des autres.

Comment ça se fait ??

Merci !

Edit: Si je met : float: left; dans "div#menu_haut li" tout est bien aligné mais ce qu'il y a dans li n'est pas centré !

23 déc. 2008, 11:23

J'ai un peu réussi en mettant la longueur total divisé par le nombre de lien.

J'ai ceci pour mon css:

Code : Tout sélectionner

div#menu_haut {
	width:848px;
	height:20px;
    background-color: #3A3A3A;
	margin-left:auto;
	margin-right:auto;
    border-left: solid #01A9C6 5px;
    border-right: solid #01A9C6 5px;
	border-bottom: solid #01A9C6 5px;
	border-top: solid #01A9C6 3px;
}
div#menu_haut ul {
    padding: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 20px;
    white-space: nowrap;
	text-align: center;
	padding-bottom: 10px;

}
div#menu_haut li {
    list-style-type: none;
    display: inline;
	float: left;	
}
div#menu_haut a {
	width:116px;
	height:20px;
	background-color:#3A3A3A;
	color:#FFF;
	text-decoration:none;
	display:block;
}
div#menu_haut a:hover {
	width:120px;
	height:20px;
	color:#000;
	text-decoration:underline;
	background-color: #01D7FB;
	display:block;
}

et ceci pour mon html :

Code : Tout sélectionner

<div id="menu_haut">
	<ul>
			<li><a href="index.htm">Accueil</a></li>
			<li><a href="index.htm">Downloads</a></li>
			<li><a href="index.htm">Nos serveurs</a></li>
			<li><a href="index.htm">Le&ccedil;ons</a></li>
			<li><a href="index.htm">La team</a></li>
			<li><a href="index.htm">Pub</a></li>
	</ul>
</div>

Mais voici ce que ça fait sur firefox et IE :
http://browsershots.org/png/original/8b ... efdf87.png
http://browsershots.org/png/original/3d ... e7da4a.png

Voir : ( série d'ecran 3 )
http://browsershots.org/http://www.seehy.fr/

Comment faire pour que ce soit bien vu sur IE ??

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

23 déc. 2008, 14:03

Aussi, tu peux essayer de refaire ton menu avec la structure suivante :

Code : Tout sélectionner

<ul id="menu_haut">
      <li><a href="index.htm">Lien 1</a></li>
      <li><a href="index.htm">Lien 2</a></li>
      <li><a href="index.htm">Lien 3</a></li>
</ul>

Ça sers à rien de créer des divs pour rien

Et peut-être que cela va te faciliter la tâche pour ton CSS

ul li et css ??

Qui est en ligne