28172 sujets

CSS et mise en forme, CSS3

Problème menu Css de dingue ! RESOLU MERCI

Bonjour,
Je suis face à un problème que je n'arrive pas à résoudre. Je pense que cela dépasse réellement mes compétences !
J'ai créé un menu avec Wordpress que je souhaite styliser.
Voici le Html, plutôt classique pour le moment : 
<div id="menu">
<ul id="false" class="topnav">
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20">
<a href="#">Architecture</a>
<ul class="sub-menu">
<li id="menu-item-12" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-12">
<li id="menu-item-11" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11">
<li id="menu-item-10" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10">
<li id="menu-item-9" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9">
</ul>
</li>
<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21">
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22">
</ul>
</div>


Je souhaite mettre une image sur le lien de la catégorie parent, il y en a 3, dont architecture que vous voyez. Je souhaite mettre une image à la place du lien.
Donc voici le css qui l'accompagne. 

#menu ul.topnav li#menu-item-22 a { display:block; background: url(img/agence.jpg) no-repeat top left; height:70px; width:144px; position: absolute; top:213px; left: 35px; text-align: left; }
#menu ul.topnav li#menu-item-20 a { display:block; background: url(img/architecture.jpg) no-repeat top left; height:74px; width:256px; position: absolute; top:95px; left: 562px; text-align: right; }
#menu ul.topnav li#menu-item-21 a { display:block; background: url(img/design.jpg) no-repeat top left; height:70px; width:124px; position: absolute; top:350px; left: 210px; text-align: left;}

#menu ul.topnav ul.sub-menu li a { padding-top:75px; line-height:20px}


Le css marche très bien et affiche bien une image à la place du texte, mais impossible de styliser les sous menus, quand je vérifie avec firebug, le sub-menu récupére à chaque fois le style css de son parent.
J'ai essayé de forcer avec un !important, mais rien y fait quand je veux styliser le sous menu, il prend en compte le style du menu parent .
je comprends pas et surtout je n'arrive pas à trouver une solution. J'utilise wordpress.

Merci par avance pour votre aide
Modifié par dreadstock (17 Oct 2011 - 21:52)
Bonjour,

#menu ul.topnav li#menu-item-20 a
Cible tout tes liens contenus dans le #menu-item-20 (ce qui inclus aussi ceux du sous menu).

essaie avec le selecteur > afin de ne cibler que le lien enfant direct.

#menu ul.topnav li#menu-item-20 > a


Corfialement,
GC
Bonjour,

Tu as des sélecteurs CSS qui disent «tous les éléments A enfants ou descendants d'un LI qui a pour identifiant machin». Si tu regardes ton code HTML ou ton DOM, tu te rends bien compte que tu as plusieurs éléments A concernés par chaque sélecteur (ou du moins pour l'un d'entre eux). CQFD.

Je crois que c'est le moment idéal pour réviser les sélecteurs CSS 2.1. Un indice: tu utilises un sélecteur de descendant là où tu aurais plutôt besoin d'utiliser un sélecteur d'enfant.

Autre chose: je te conseille de travailler avec des sélecteurs plus concis. Ça donne un code CSS plus lisible et ça oblige à réfléchir précisément à ce qu'on met dans ces sélecteurs (au lieu de lister tous les éléments du DOM ou presque, séparés par des espaces). Donc par exemple je changerais le sélecteur suivant:
#menu ul.topnav li#menu-item-22 a {}

en:
#menu #menu-item-22 a {}

ou même simplement:
#menu-item-22 a {}

Les sélecteurs concis limitent aussi les problèmes de priorité des sélecteurs.
Sujet clos
Aller à