Soulignement de <li> avec <ul> imbriqué (CSS)

Soulignement de <li> avec <ul> imbriqué (CSS) - HTML/CSS - Programmation

Marsh Posté le 23-11-2010 à 19:36:27    

Bonjour,
 
j'ai une liste composée de <li> avec texte que j'aimerais souligner.
J'emploie pour cela "border-bottom: 1px solid #555555;" (par exemple). Je précise que je n'emploie pas le "text-decoration: underline" parce que je veux que mon soulignement prenne toute la ligne et pas seulement la longueur du texte. Tout va pour le mieux.
 
Maintenant, dans une de ces <li>, j'imbrique une <ul>, cela donne une forme comme cela :

Code :
  1. <ul>
  2.     <li>blabla</li>
  3.     <li>blablabla</li>
  4.     <li>et pourtant
  5.        <ul>
  6.           <li>ouiouioui</li>
  7.           <li>nononon</li>
  8.        </ul>
  9.     </li>
  10. </ul>

En voulant souligné mes <li> de premier niveau, problème avec celle de "et pourtant" qui sera soulignée une fois sa balise fermée "</li>" ... et donc APRÈS les <li> "ouiouioui" et "nonnonnon". Suis-je clair ?
 
Une idée pour que "et pourtant" soit souligné de la même manière que "blabla" et "blablabla" ?
 
Merci.


---------------
Portfolio
Reply

Marsh Posté le 23-11-2010 à 19:36:27   

Reply

Marsh Posté le 23-11-2010 à 20:11:06    

Ben oui, employer text-decoration et non border-bottom.
Mets tes li en display:block avec un width de 100% et tout l'espace est souligné, pas seulement le mot non ?

Reply

Marsh Posté le 23-11-2010 à 20:24:37    

Ça, ça ne marche pas chez moi :

Code :
  1. {
  2. text-decoration: underline;
  3. display: block;
  4. width: 100%;
  5. }

Pas de soulignement sur toute la ligne.


---------------
Portfolio
Reply

Marsh Posté le 23-11-2010 à 20:50:27    

Peux tu faire un montage avec ce que tu attends comme résultat et celui que tu as pour le moment ?


---------------
DTC la 3ème étoile !
Reply

Marsh Posté le 23-11-2010 à 21:00:48    

Salut,
 
très simple en fait, il n'y a pas de souligné sous "et pourtant" (alors qu'il y en a évidemment sous "blabla" et "blablabla" ), il se trouve à la fermeture de la balise, cad sous "nonnonnon".
Pas ce que je veux bien sûr.


---------------
Portfolio
Reply

Marsh Posté le 23-11-2010 à 22:01:44    

C'est un fait, cela ne fonctionne pas. Garde ta border-bottom et rajoutes un span
http://jsfiddle.net/umE7w/

Reply

Marsh Posté le 23-11-2010 à 22:14:50    

Merci David,
 
mais, j'ai oublié de le préciser avant, le but est de ne pas changer le code HTML, simplement la CSS.
Je ne veux pas quelque chose de seulement VISUELLEMENT correct mais quelque chose qui reste SÉMANTIQUEMENT correct. Or, il n'y a aucune raison de rajouter un <span> pour cette </li> là, et non pour les autres.
Pour l'instant, j'utilisais une bidouille bâtarde, à savoire :  
mettre le border 1 px en border-TOP sur la <ul> qui suit la <li> concernée (la <li> "et pourtant" ). Et pour que cela marche pour les autres <li> ("blabla" et "blablabla" ), leur ajouter également des <ul> ... vides. C'est nul mais "visuellement" ça marche. Je voulais savoir s'il était possible de résoudre "joliment/sémantiquement" mon problème. Pas sûr en fait.


---------------
Portfolio
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed