[Résolu] Ajouter un <Span> dans les <LI> du menu accordéon

Bonjour,

je voudrais ajouter un style dans les <li> du menu "accordéon" (tutoriel), mais je n'y arrive pas ! Soit avec une classe soit directement avec <span style="color:yellow;">, je voudrais avoir dans les <span></span> du li la première lettre de chaque menu en jaune, comme ceci : <li class="toggleSubMenu"><span><span style="color:yellow;">T</span>est</span>. Test Dreamweaver me l'affiche, le T est bien en jaune et le reste du mot en noir, mais dans le navigateur ça ne marche pas. On dirait que la classe "toggleSubMenu" écrase tout autre formatage à l'intérieur des <span>. Vous avez une idée ? J'ai tout essayé mais je ne suis pas un top pro du CSS, bien que je l'utilise souvent.

le problème est le span dans le span je pense.
Ce que je ferais: j'appliquerais un style plus général sur toute la liste (couleur du texte, taille, police etc..) et ne mettrai un span que sur la première lettre de chaque mot.
Le span autour du mot entier est alors inutile.

Bonjour,

sans utiliser de span supplémentaire, as-tu essayé d'utiliser :first-letter ? C'est simple, ça ne crée aucun déchet sémantique dans ton html, et ça passe jusqu'à IE6

Les explications sur :first-letter

Les possibilités, par alsacréations

Bonne continuation!
Modifié par Ten (18 Feb 2011 - 10:51)

Je viens d'essayer le first-letter, mais ça ne marche pas non plus.

bayl0ck a écrit :
le problème est le span dans le span je pense.
Ce que je ferais: j'appliquerais un style plus général sur toute la liste (couleur du texte, taille, police etc..)

C'est déjà le cas il me semble dans le menu.
Tu as :

 #navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
	background-image: url(images/onglet.gif);
}

et dans le html :

<li class="toggleSubMenu"><span>Rubrique du menu</span></li>

J'ai pensé qu'en rajoutant un <span>

<li class="toggleSubMenu"><span><span class="lettrejaune">R</span>ubrique du menu</span></li>

avec une autre classe, selon la syntaxe normale, ça marcherait, eh bien non ! Sur Dream oui, mais pas sur Firefox ou Chrome !
Modifié par patrickd (18 Feb 2011 - 11:06)

Aurais-tu un lien pour qu'on regarde?
Ca m'intrigue, maintenant!

Je travaille en local pour l'instant. Mais c'est le même tutoriel d'Alsacréations que j'ai modifié graphiquement. C'est comme si là je voulais mettre la première lettre des Items en jaune (pas les sous-items, que les rubriques principales quand le menu est enroulé) :

http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu_demo.html

Ben je m'y casse les dents, impossible pour moi !
Modifié par patrickd (18 Feb 2011 - 16:15)

J'ai enfin réussi à trouver la solution avec first-letter, en la mettant directement sur le lien :

#navigation a:first-letter {
	color: #FFFF00;
}

Merci à Ten en particulier, et à bayl0ck pour s'être penché sur le problème.