Problème avec un menu horizontal

Bonjour à tous,

Je suis en train de faire un menu horizontal pour mon site sous forme de liste (car après moult recherches il semblerai que ce soit ce qu'il y a de mieux)
J'en ai déjà fait un précédement qui avait très bien marché, cependant cette fois-ci ma balise <ul> ne prend pas en compte le "display:inline-block;"

Je bloque depuis 20mn sur ce bête problème alors si quelqu'un dans l'assemblée avait la gentillesse de m'aider, je lui en serai très reconnaissant.

Par ailleurs, n'étant pas expert en HTML/CSS, n'héstiez pas à me dire si vous voyez des erreurs dans mon code

Merci d'avance !


PARTIE HTML

<div id="menu">
  <ul id="menu_ul">
    <li id="menu_home"><a href="#"></a></li>
    <li class="menu_tab">Menu 1</li>
    <li class="menu_tab">Menu 2</li>
  </ul>
</div>

PARTIE CSS

#menu {
	width: 100%;
	height: 30px;
	background:url("../img/menu_bg.png") top left repeat-x;
}
#menu_ul {
	margin: 0;
	padding: 0;
	border: 0;
	display:inline-block;
	list-style:none;
}
#menu_home {
	margin-left: 12px;
	width: 30px;
	height: 30px;
	background:url("../img/menu_home.png") top left no-repeat;
}
#menu_home a {
	display:block;
	width: 30px;
	height: 30px;
}
#menu_home a:hover {
	background:url("../img/menu_home.png") bottom left no-repeat;
}
.menu_tab {
	margin-left: 12px;
	width: 30px;
	height: 30px;
	background:url("../img/menu_tab.png") top left no-repeat;
}
.menu_tab a {
	display:block;
	width: 30px;
	height: 30px;
}
.menu_tab a:hover {
	background:url("../img/menu_tab.png") bottom left no-repeat;
}

Bonjour

Si c'est un menu avec des éléments en ligne que tu veux, je pense qu'il vaut mieux mettre le display: inline-block sur ton li et non ton ul :

#menu_ul li { 
    display:inline-block; 
} 

Si je peux me permettre, par rapport à ton code html, tu n'as rien dans ton lien home. Je pense que tu vas mettre une image en css si j'ai bien tout compris, cependant si l'image ne se charge pas ou pour des navigateurs textuels, l'utilisateur ne va rien avoir, du coup il ne saura pas vers quoi pointe le lien.
Il vaut peut-être mieux écrire le mot "home" en dure, et le "cacher" via une technique css de style text-indent: -999px . De cette façon ton menu reste accessible, même sans images. Un lien utile qui traite de remplacement de texte pour des titres, mais c'est adaptable pour des liens dans un menu
Modifié par InpIxelItrust (01 Sep 2010 - 13:46)

Merci beaucoup !!! Ca marche en effet beaucoup mieux !
Et merci aussi pour le text-indent, ca me semble en effet plus judicieux ^^

You're welcome