Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2151 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2037911
Beral2
Posté le 23-11-2010 à 19:36:27  profilanswer
 

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
mood
Publicité
Posté le 23-11-2010 à 19:36:27  profilanswer
 

n°2037923
David Bori​ng
Posté le 23-11-2010 à 20:11:06  profilanswer
 

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 ?

n°2037928
Beral2
Posté le 23-11-2010 à 20:24:37  profilanswer
 

Ç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
n°2037931
J_D_
Posté le 23-11-2010 à 20:50:27  profilanswer
 

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 !
n°2037934
Beral2
Posté le 23-11-2010 à 21:00:48  profilanswer
 

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
n°2037945
David Bori​ng
Posté le 23-11-2010 à 22:01:44  profilanswer
 

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

n°2037947
Beral2
Posté le 23-11-2010 à 22:14:50  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
CSS / Compatibilité IE - Firefox[CSS-positionning] "Caler" un footer en bas de page
Flash et CSS, template en ligne qui ne marche pascomment faire un lien interne en CSS?
HTML/CSS: Problème - menu avec des imagesRendre visible/invisible un sous menu en CSS ?
Modifier feuille de style CSSTemplate CSS , Pages associés
Modifier un template CSS[HTML/CSS/Javascript] Formulaire à remplir
Plus de sujets relatifs à : Soulignement de <li> avec <ul> imbriqué (CSS)


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR