Des livres incontournables pour tout maîtriser

  • CSS2
  • Réussir son site web avec XHTML et CSS
  • PHP 5 avancé
  • Memento CSS
  • Memento XHTML
  • Ergonomie web
  • Bien rédiger pour le web
Rechercher dans le sujet :
Forum
» CSS et mise en forme
» Appliquer un style à une balise sous conditions
Auteur
spols
# 03 Jul 2009 - 23:03:08
Citer
3 Posts
 Bonjour à tous,

Je fait en ce moment un menu basé sur une liste multi dimension de ce type

<ul>

   <li>lien 1</li>

   <li>lien 2</li>

   <li>

      lien 3

      <ul>

         <li>souslien1</li>

         <li>souslien2</li>

         <li>souslien3</li>

   </li>

   <li>lien 4</li>

   <li>lien 5</li>

</ul>


La mise en page est entièrement css

Je voudrais que la/les balise(s) li qui contienne un sous menu, donc un ul comme enfant ait un style un peu différent. Je voudrais savoir s'il est possible d'avoir de telle instruction.

Pour le moment, j'affecte une classe à ces balises, mais j'aimersi que cela ce fasse automatiquement

un genre de 
if li.firstChild = ul {

   background:...;

}


mais en css.

Je pense que ce n'est peut être pas possible, mais je voudrais en être sur

Merci d'avance
^
Nigel
# 03 Jul 2009 - 23:22:45
Citer
Bourrin, moi ? Toujours !
146 Posts
 Un genre de :


li ul {background:... ;}

?

(Traduire : Les ul enfants d'un li)
http://www.nicolasbocquet.fr 
^
spols
# 03 Jul 2009 - 23:40:29
Citer
3 Posts
 non, c'est bien la balise li qui doit avoir un back ground différent mais que si elle possède une balise ul comme enfant

en gros c'est pour afficher une petite fleche qui montre qu'il y a un sous menu

PS les sous menu sont afficher aprés survol avec une instruction
li a:hover > ul {
display:block;
}

PPS j'obtient cette erreur quand j'affiche la page de mon post sur alsacreation
the recipe for 'html' was not found in 'http://www.alsacreations.com/js/chili/html.js'

Modifié par spols (03 Jul 2009 - 23:41)
^
Niaa
# 07 Jul 2009 - 17:50:46
Citer
18 Posts
 Tu pourrais le faire en CSS3 mais il est inégalement interprété par les navigateurs...

Je crois bien que je me suis trompé sur les possibilités du CSS3, je vais devoir réviser mes leçons...
la seule nouveauté css3 qui a l'air de coller est :empty qui sélectionne les balises n'ayant pas d'enfant. Mais il me semble que le texte est considéré comme un noeud enfant, non ?

li:not(:empty){

    blibli:blabla;

}


Serait-il susceptible de marcher ? (je n'ai pas les moyens de le tester au travail pour l'instant)

Sinon, javascript évidemment peut résoudre ce problème, mais j'imagine que ce n'est pas le but de la question.
Si cette liste est générée coté serveur, ton langage de génération (PHP, ASP.NET, etc.) pourra également t'aider.
Modifié par Niaa (07 Jul 2009 - 17:57)
^
spols
# 07 Jul 2009 - 18:21:32
Citer
3 Posts
 Merci je me doutais que si il existait une solution, elle n'était pas portable.

Je vais garder cela comme c'est pour le moment (classe particulière pour les li qui ont une ul).
^
Prévenir un modérateur
Répondre au sujet
Aller à
Powered by Phedio v3.8.6 beta in 5.9 ms © dew