28173 sujets

CSS et mise en forme, CSS3

Bonsoir,

Suite à un précédent sujet partiellement résolu, je me suis attaqué à une variante du menu proposé par Raphaël dans les tutoriaux.

Sous FF, IE 7, IE6, Netscape et Safari beta PC, ça se passe bien (du moins sur les tests depuis mon poste de travail).

Sous Opéra (version 9, la seule utilisée pour ce test) le menu de premier niveau se barre à droite (pas toujours immédiatement, parfois ça demande 1 seconde) et tous les onglets s'entassent les uns sur les autres. Le menu de niveau 2, lui, se positionne correctement lors du survol du niveau 1.

Un exemple en ligne : à voir ici.

Je précise que ce menu fait appel à deux niveaux d'UL, un peu de javascript (visible ici), une css () et un csshover.htc (ici) pour obtenir une interprétation des hover en dehors des "a" sous IE.

Si vous trouvez que c'est beaucoup pour un menu... je ne suis qu'éxécuteur des choix de mon client.

J'ai démonté, remonté ma css deux fois, pour isoler l'élément fautif. Et je ne trouve pas comment corriger ce comportement.

Merci de toute information pouvant m'orienter dans mes corrections.

Bonne fin de journée,
Philos
Modifié par Philos (22 Nov 2007 - 18:44)
Je relance mon sujet car je suis toujours bloqué.

J'ai isolé la source du problème, à savoir du float sur ces deux éléments :
div#menu_dyn ul#niveau1 li.onglet a {
display:block;
font-size:.7em;
font-family:verdana;
font-weight:bold;
text-decoration:none;
color:white;
}
div#menu_dyn ul#niveau1 li.onglet a span {
display:block;
height:24px;
padding:6px 10px 0;
}
Comme je les display block pour pouvoir fixer une hauteur (car image en background) sous IE6 ça passe en affichage vertical. Du coup, je pose un float sur ces deux éléments et sous IE6 ça baigne mais sous Opéra (et uniquement sous Opéra) tous les li semblent s'entasser à droite (et sortent même du global...).

. Auriez-vous déjà rencontré cette situation ?
. A part un display block que pourrais-je employer pour obtenir une hauteur précise sur mes "a" et "span" ?

J'ai testé le display:table-cell mais pas glop sous IE6...

Merci et bon wee end Smiley smile