Menu CSS horizontal

Bonjour,

Je voudrais faire un menu CSS horizontal tout simple alors, voila mon code :

<ul id="ul_onglets"><li><a href="index.php">Accueil</a></li><li><a href="forum/">Le forum</a></li></ul></div>

et le CSS :

#ul_onglets {
margin-top: 27px;
}
#ul_onglets li {
list-style-type: none;
list-style-image: none;
list-style-position: outside;
display: inline;
padding: 2px;
}
#ul_onglets li a {
text-decoration: none;
color: #000000;
width: 141px;
padding-top: 11px;
padding-bottom: 11px;
background: url(images/onglet.gif) repeat-y;
}

et voila ce qui arrive... ( cf: pièce jointe )

Bonsoir,

Essayes avec ça et lis les commentaires

#ul_onglets li {
list-style: none; /*propriété raccourcis - le style position na aucun utilité
etant donné que tu n'as pas de puce*/
display: inline;
padding: 2px;
}
#ul_onglets li a {
display:block /*ou float:left si affichage vertical*/
text-decoration: none;
color: #000; /*code hexadécimal raccourcis*/
width: 141px;
padding: 11px 0; /*propriété raccourcis*/
background: url(images/onglet.gif) repeat-y;

}

Le problème vient du fait que les propriétés de taille(height et width)
comme les marge veticales ne s'appliquent pas aux élément inline de type
non remplacé (<a>,<span>...) mais au éléments de type bloc; d'ou l'ajout
du display:block. Les flottant (propriété float) font automatiquement
passer la valeur du display à block.

Autre chose: la liste <ul> dans ton cas n'est pas forcémment très utile
et bénéfique d'un point de vue sémantique (voir cet article traitant de la sémantique).
Une suite de lien imbriqués dans un div suffirait et cela permet de
différencier le menu des autres listes s'il y a.
Modifié par Hermann (05 Jan 2007 - 20:03)

Ton code ne marche pas mieux donc je vais essayer un suite de liens...

EDIT

Le mien non plus ^^

le HTML :

<div id="onglets"><a href="index.php">Accueil</a><a href="forum/">Le forum</a></div></div>

et le CSS :

#onglets {
margin-top: 27px;
}
#onglets a {
display: block;
text-decoration: none;
color: #000000;
height: 36px;
text-align: center;
width: 141px;
padding-top: 11px;
padding-bottom: 11px;
background: url(images/onglet.gif) repeat-y;
}

Voila ce que àa fait :

EDIT

Plus grande copie d'écran :
Modifié par samuel2202 (05 Jan 2007 - 19:53)

Oups J'ai oublié de mettre un ";" aprés le display:block.
ça vient peut-être de là.

Remplace le display:block par un float:left

Modifié par Hermann (05 Jan 2007 - 19:51)

Non non, ça j'ai modifier )

Message éditer ( en haut )

Le mieux serait de préciser exactement ce qui ne convient pas.
Tu n'as pas prévu d'arrondi droit sur les background de lien?
Modifié par Hermann (05 Jan 2007 - 20:02)

Hein ??!? Je n'est pas bien compris...