28172 sujets

CSS et mise en forme, CSS3

Héritage problèmatique sous IE (ok sous FF)

Bonjour,

Sur une maquette en cours d'élaboration pour un site à objectif "haute accessibilité", j'ai ce phénomène (que je pense avoir déjà croisé) :

Lors la création d'un menu horizontal à 2 niveau, par "simple" imbrications de ul / li - ul / li classiques,

Les caractèristiques des sous menus et donc des "sous ul" (notamment couleur des liens et bordures du ul )
ne sont pas celles demandées sous IE. (ok sous FF).

L'héritage semble additionner diverses prporiétés des ul en héritage malgré des indications supposées les interdire. (toolbar dev IE l'affichant clairement).

Les onglets de niveau 2 : 
#menuh ul li ul

ont une bordure qui ne devrait pas y être et les couleurs liens y sont prévues en bleu clair

J'ai tenté de désigner explicitement chaque niveau, rendant le css un peu + complexe, sans plus de résultat. (menus.css) y compris avec une avalanche de !important normalement inutiles..

la page est toujours valid transitionnal.

une page de test (statique issue du code générée) est là :
http://www.neo-tekk.com/bac-a-sable/IH/templates/testih.html

J'avoue que ne pas avoir encore capté d'où ca vient et surtout comment corriger çà et pourtant j'ai passé pas mal de temps dans les forums Smiley biggol .

Merci pour toute aide.
Modifié par elz64 (10 Apr 2008 - 11:52)
Hello Smiley smile

Pour ce menu, pourquoi passer par une imbrication d'une liste dans une liste ? Ce n'est pas plus simple de mettre en place 2 menus différents comme ci-dessous ?

XHTML

<ul id="menu_principal">
     <li class="item1menu">Item 1 menu</li>
     <li class="item2menu">Item 2 menu</li>    
     [...]
</ul>

<ul id="menu_secondaire">
     <li class="item1ssmenu">Item 1 sous-menu</li>
     <li class="item2ssmenu">Item 2 sous-menu</li>    
     [...]
</ul>

CSS

/* Et pour cibler, simplement : */

ul#menu_secondaire li.item1ssmenu {
... }


Sinon une idée en vitesse pour ton problème d'héritage, peut-être qu'en identifiant plus précisément tes éléments...

XHTML

<ul id="menu_principal">
     <li class="item1menu">Item 1 menu</li>
     <li class="item2menu">
          Item 2 menu

          <ul id="menu_secondaire">
               <li class="item1ssmenu">Item 1 sous-menu</li>
               <li class="item2ssmenu">Item 2 sous-menu</li>    
               [...]
          </ul>
     </li>    
</ul>

CSS

/* Cibler un item du menu secondaire : */
ul#menu_secondaire li.item1ssmenu {
... }

/* Voir même : */
ul#menu_principal li.item2menu ul#menu_secondaire li.item1ssmenu {
... }

Modifié par BeliG (10 Apr 2008 - 14:21)
oui merci


Mais allant jusqu'à ce niveau, on est vraiment à contre courant des principes d'héritage.

Quant à faire deux menus, ce n'est pas l'idéal sémantiquement parlant, mais c'est peut-être une solution de contournement.

Le pb c'est de trouver pourquoi Ie se comporte ainsi. soit il ya un vrai pb de code que FF laisse passer (déjà rencontré) soit plus probablement c'est super connu (enfin pas par moi) et ca peut se régler avec la bonne méthodo.
Modifié par elz64 (10 Apr 2008 - 12:15)
..Ce niveau de designation et de détails avec pleind e class ou d'id en rab

tout nommer n'est pas qq chose de 'naturel' Smiley cligne
elz64 a écrit :
Quant à faire deux menus, ce n'est pas l'idéal sémantiquement parlant, mais c'est peut-être une solution de contournement.


Version 1:
«Bonjour, voici un menu de navigation donnant accès aux principales rubriques du site, et... ah oui, j'oubliais, au milieu de ce menu il y a un sous-menu qui donne accès aux pages de la rubrique que vous visitez actuellement.»

Version 2:
«Bonjour, voici un menu de navigation donnant accès aux principales rubriques du site, et voici un deuxième menu donnant accès aux pages de la rubrique que vous visitez actuellement.»

«Sémantiquement», aucune version ne me semble plus logique que l'autre. J'ai une préférence pour la deuxième, qui sépare mieux ces deux éléments qui n'ont pas de raison particulière d'être intimement liés.

La structure en listes imbriquées (ou alors avec hN pour les rubriques et listes simples pour les pages) est plus indiquée pour une page de plan du site.
bien bien bien.

a écrit :
...ces deux éléments qui n'ont pas de raison particulière d'être intimement liés.

ah ?
curieux que les menus sous menus imbriqués soient déconsidérés.


Bref je sais que je peux tenter de faire autrement sans révolter les pointilleux de la sémantique.

[Edit:] Si j'ai fais des imbrications ul/li/ul c'est pour obtenir sur TOUTES les pages la totalité des liens vers pages + sous pages, qqsoit la pages en cours. seules les sous menus du menus.active sont affichés (uniquement du visibility hidden/visible).
L'idée étant de conserver toutes les info pour des lecteurs vocaux et pas laisser tous les choix accessibles sans avoir à cliquer et sans JS [/edit]

Mais le pb d'héritage ..heu sinon .. y'a personne qui l'aurais déjà traité ?
Bien surprenant.

Je vais essayer de nommer les li aussi sans trop y croire.
Sinon faut refaire le mécanisme de gestion des menus, ca ne m'enchante pas plus qua cà.. Smiley decu
Modifié par elz64 (10 Apr 2008 - 19:22)
Sujet clos
Aller à