[Résolu] Menu bouton css en float qui dépasse... à l'horizontale

(testé sous Firefox 1.07 et Konqueror 3.4, aucune garantie pour les autres navigateurs)
Bonjour,

Je pensais que mon problème aurait été traité au moins 15000 fois dans ce forum, mais je n'ai trouvé aucune trace d'un malheur jumeau au mien.

Je suis en train de mettre en place une mise en page fluide en trois colonnes. Les menus sont flottants, leur largeur fixe, et le centre extensible. Jusqu'ici rien d'inhabituel.

Le problème est que le menu de gauche est une liste constituée de boutons flottants numérotés mis en forme grâce aux styles CSS (display : block et taille fixe). Je voudrais dans l'espace horizontal du menu placer trois boutons par ligne.
Là où ça coince c'est lorsque je tente de faire des liens les éléments de bloc (plus facile et logique pour cliquer), au lieu des <li> : les boutons ne s'affichent pas correctement, dépassent sur le centre de la page, affichent des erreurs lors du survol (sous Firefox) ou se positionnent en liste verticale, comme s'ils n'étaient pas flottants (sous Konqueror)... Et je n'arrive pas à voir d'où ça vient.

Exemple 1 :

/* Menu de gauche flottant*/
#telecommande {
width : 130px;
float : left;
border : 2px green solid;
}
#telecommande ol {
margin : auto;
margin-top : 2em;
list-style : none;
}
#telecommande ol li { /* style appliqué à l'élément de liste */
display : block;  /* affiché comme bloc */
float : left;
width : 37px;
height : 30px;
text-align : center;
font-size : 20px;
color : white;
background-color : #333;
margin : 2px;
padding-top : 7px;
border-right : 1px gray solid;
border-bottom : 2px gray solid;
border-radius : 15px;
-moz-border-radius : 15px;
}

#telecommande ol li a:link {
color : #FEA900;
text-decoration : none;
}

#telecommande ol li a:visited {
color : #FEA900;
text-decoration : none;
}

#telecommande ol li a:hover {
color : white;
}

/* pseudo-classe appliqué à l'élément de liste */
#telecommande ol li:hover {
border-left : 1px #000 solid;
border-top : 2px #000 solid;
border-bottom : none;
border-right : none;
}

Dans cet exemple les boutons se comportent parfaitement bien, comme vous pouvez le constater à l'adresse suivante : http://www.konstelacioj.info/devel/test2.html

Exemple 2 :

/* Menu de gauche */
#telecommande {
width : 130px;
float : left;
border : 2px green solid;
}
#telecommande ol {
margin : auto;
margin-top : 2em;
list-style : none;
}
#telecommande ol li a { /* style appliqué au lien */
display : block; /* affichage comme bloc */
float : left;
width : 37px;
height : 30px;
text-align : center;
font-size : 20px;
color : white;
background-color : #333;
margin : 2px;
padding-top : 7px;
border-right : 1px gray solid;
border-bottom : 2px gray solid;
border-radius : 15px;
-moz-border-radius : 15px;
}

#telecommande ol li a:link {
color : #FEA900;
text-decoration : none;
}

#telecommande ol li a:visited {
color : #FEA900;
text-decoration : none;
}

/* pseudo-classe appliquée au lien */
#telecommande ol li a:hover {
color : white;
border-left : 1px #000 solid;
border-top : 2px #000 solid;
border-bottom : none;
border-right : none;
}

Une seule chose change : on applique le traitement de bloc au lien <a> plutôt qu'à l'élément de liste <li>, mais le comportement des boutons change du tout au tout, comme vous pouvez le voir à l'adresse http://www.konstelacioj.info/devel/test.html

Si vous avez une idée, ça me serait bien utile. En attendant je fais avec la solution d'un bloc <li> et d'un li:hover qui ne fonctionnera pas sous IE, mais c'est dommage...
Modifié par 1000k (10 Feb 2006 - 13:45)

Bonjour,

Ajouter simplement au premier code ci-dessus un

#telecommande ol li a {
display : block;
width: 100%;
height: 100%;
}

Remarque: le display:block appliqué aux éléments flottants est inutile. Ceux-ci adoptent automatiquement cette valeur de display.

Sinon, attention : ce type de boutons de hauteur figée en pixel supporte mal l'agrandissement des caractères (débordement du texte vers le "bas" des boutons). Gérer plutôt la hauteur sans propriété "height", en jouant uniquement sur les padding et le line-height, pour les rendre "élastiques".
Modifié par Laurent Denis (10 Feb 2006 - 06:27)

Merci beaucoup, c'était simple mais je n'y aurais jamais pensé

Je n'aime pas beaucoup non plus les valeurs absolues en pixels, mais dans l'urgence du moment, pour faire des boutons carrés c'est ce qui m'était le plus simple, j'essaierai de rendre tout cela élastique, la mise en page est encore loin d'être terminée