Différents niveaux de listes à puces sans ligne de blanc entre chaque
Sacha
-
Sacha -
Sacha -
Bonjour,
J’ai besoin de vos lumières pour réaliser des listes à puces sans aucune ligne de blanc (retour chariot) entre les différents niveaux de puces.
J’ai ceci en HTML :
<div>
<ul>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
<ul class="listligne">
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.4em;padding-left: 0.2em;list-style-type: none">
Blablabla correspondant à une note complémentaire avec un aster à la suite du texte à puce de second niveau
</li>
</ul>
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.4em;padding-left: 0.2em;list-style-type: none">
Blablabla correspondant à une note complémentaire avec un aster à la suite du texte à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
<ul class="listligne">
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
</ul>
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
<ul class="listligne">
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
</ul>
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
</ul>
</div>
<div>
<p class="custom-indent">Note : « Attention » (sans puce)
</p>
<ul>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
<ul class="listligne">
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
</ul>
</li>
</div>
J’ai, ceci en CSS :
.listligne {
display: inline;
}
.listligne>li {
display: inline;
}
Cela fonctionne sur Safari, Chrome et Firefox sur Macintosh (MacBook et Ipad) mais pas sur Android (notamment Samsung Internet, Firefox, Chrome et sûrement d’autres…). Sans pouvoir tester, j’imagine que ça ne marche pas non plus sur PC avec par exemple Internet Explorer etc.
Auriez-vous des solutions ?
Sachant que je suis une quiche en HTML, merci pour vos explications des plus simples et complètes (pour que je puisse comprendre le pourquoi du comment !)…
J’ai besoin de vos lumières pour réaliser des listes à puces sans aucune ligne de blanc (retour chariot) entre les différents niveaux de puces.
J’ai ceci en HTML :
<div>
<ul>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
<ul class="listligne">
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.4em;padding-left: 0.2em;list-style-type: none">
Blablabla correspondant à une note complémentaire avec un aster à la suite du texte à puce de second niveau
</li>
</ul>
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.4em;padding-left: 0.2em;list-style-type: none">
Blablabla correspondant à une note complémentaire avec un aster à la suite du texte à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
<ul class="listligne">
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
</ul>
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
<ul class="listligne">
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
</ul>
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
</ul>
</div>
<div>
<p class="custom-indent">Note : « Attention » (sans puce)
</p>
<ul>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc">
Blablabla correspondant à puce de premier niveau
<ul class="listligne">
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
<li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: circle">
Blablabla correspondant à puce de second niveau
</li>
</ul>
</li>
</div>
J’ai, ceci en CSS :
.listligne {
display: inline;
}
.listligne>li {
display: inline;
}
Cela fonctionne sur Safari, Chrome et Firefox sur Macintosh (MacBook et Ipad) mais pas sur Android (notamment Samsung Internet, Firefox, Chrome et sûrement d’autres…). Sans pouvoir tester, j’imagine que ça ne marche pas non plus sur PC avec par exemple Internet Explorer etc.
Auriez-vous des solutions ?
Sachant que je suis une quiche en HTML, merci pour vos explications des plus simples et complètes (pour que je puisse comprendre le pourquoi du comment !)…
Configuration: Macintosh / Safari 12.0.2
A voir également:
- Différents niveaux de listes à puces sans ligne de blanc entre chaque
- Partage de photos en ligne - Guide
- Aller à la ligne excel - Guide
- Formulaire en ligne de meta - Guide
- Site de vente en ligne gratuit entre particulier - Guide
- Mètre en ligne - Guide
2 réponses
Salut,
Pour commencer, corrige les erreurs, tu as des lignes mal ordonnées :
que viennent faire les lignes ?
Pour la suite, utilise la coloration syntaxique avec le bouton Code + HTML qui est en tête de message.
Pour commencer, corrige les erreurs, tu as des lignes mal ordonnées :
</li> <li style="margin-left: 1.4em;padding-left: 0.2em;list-style-type: none"> Blablabla correspondant à une note complémentaire avec un aster à la suite du texte à puce de second niveau </li> </ul> </li> <li style="margin-left: 1.3em;padding-left: 0.2em;list-style-type: disc"> Blablabla correspondant à puce de premier niveau </li>
que viennent faire les lignes ?
</ul> </li>
Pour la suite, utilise la coloration syntaxique avec le bouton Code + HTML qui est en tête de message.
Re,
Je ne sais pas ce que tu veux faire, mais ton code est écrit n’importe comment : tu fermes les balises au hasard.
On devrait avoir des séquences de la forme :
Si tu débutes, je te conseille de suivre un cours d'intitiaton, ici par exemple.
Je ne sais pas ce que tu veux faire, mais ton code est écrit n’importe comment : tu fermes les balises au hasard.
On devrait avoir des séquences de la forme :
<ul> <li>...</li> <li>...</li> </ul>
Si tu débutes, je te conseille de suivre un cours d'intitiaton, ici par exemple.
Ce que je veux faire est de ne pas avoir de ligne blanche quand je repasse d'une liste de niveau 2 à une liste de niveau 1 (ligne blanche que je n'ai pas quand je passe d'une liste de niveau 1 à une liste de niveau 2).
Heureusement que des personnes m'aident sur d'autres forums en ayant l'air de trouver étrange cette erreur de ligne blanche alors qu'ils testent le code par ailleurs. Ils ont bien compris le souci entre les passages des différents niveaux de listes à puces.
Merci de cette remarque très constructive et encourageante en s'arrêtant au fait que je suis débutante. J'ai passée des nuits blanches sur pas mal de pages d'initiation. Notamment pour résoudre des soucis liés à des réglages par défaut qui ne me conviennent pas en termes de mise en page. Ma mise en page apparait d'ailleurs comme je le souhaite sur les navigateurs Mac, mon souci est posé par rapport aux navigateurs Android. Un patch peut-être ? Me dire exactement sur quelles lignes se situaient mes soucis de balises m'auraient davantage aidée... Mais bon, bref !...
Heureusement que des personnes m'aident sur d'autres forums en ayant l'air de trouver étrange cette erreur de ligne blanche alors qu'ils testent le code par ailleurs. Ils ont bien compris le souci entre les passages des différents niveaux de listes à puces.
Merci de cette remarque très constructive et encourageante en s'arrêtant au fait que je suis débutante. J'ai passée des nuits blanches sur pas mal de pages d'initiation. Notamment pour résoudre des soucis liés à des réglages par défaut qui ne me conviennent pas en termes de mise en page. Ma mise en page apparait d'ailleurs comme je le souhaite sur les navigateurs Mac, mon souci est posé par rapport aux navigateurs Android. Un patch peut-être ? Me dire exactement sur quelles lignes se situaient mes soucis de balises m'auraient davantage aidée... Mais bon, bref !...
Oui j'ai essayé de les enlever et j'ai déjà répondu plus haut : "En l'occurrence, si je supprime ces deux lignes </ul> et </li>, la liste des puces de niveau 1 qui doit ré-enchaîner après cet ensemble s'aligne verticalement sur celles de niveau 2 qui précèdent, ce qui n'est pas souhaité."
Je n'ai pas ces alignements avec Chrome sur Mac, ni avec Chrome sur Android qui me rajoute juste les lignes de blanc non souhaitées.
Je n'ai pas ces alignements avec Chrome sur Mac, ni avec Chrome sur Android qui me rajoute juste les lignes de blanc non souhaitées.
Le code devrait suivre ce schéma :
ce qui donnerait
ce n'est pas le cas de ce que tu montres.
Si cela fonctionne sur un navigateur, c'est un coup de chance dû aux lacunes du dit navigateur...
Sans la correction des erreurs de code, je ne peux pas t'aider plus.
<div>
<ul>
<li>niveau 1</li>
<li>niveau 1</li>
<ul>
<li>niveau 2</li>
<li>niveau 2</li>
</ul>
<li>niveau 1</li>
<li>niveau 1</li>
<ul>
<li>niveau 2</li>
<li>niveau 2</li>
<li>niveau 2</li>
</ul>
<li>niveau 1</li>
</ul>
</div>
ce qui donnerait
niveau 1
niveau 1
niveau 2
niveau 2
niveau 1
niveau 1
niveau 2
niveau 2
niveau 2
niveau 1
ce n'est pas le cas de ce que tu montres.
Si cela fonctionne sur un navigateur, c'est un coup de chance dû aux lacunes du dit navigateur...
Sans la correction des erreurs de code, je ne peux pas t'aider plus.
Merci beaucoup ! C'est plus clair avec ton exemple d'enchaînement.
J'ai refait mon code et j'ai aussi modifié les valeurs des "margin-left" qui généraient des erreurs de mise en page (en ajoutant aussi "margin: 0" et "padding: 0" sur les conseils d'autres personnes). À présent, ça me semble plus propre, mais "margin: 0" et "padding: 0" ne changent rien à ma problématique car j'ai toujours ces lignes de blanc non souhaitées, à présent visibles sur TOUS les navigateurs (Mac et Android). Voici le nouveau code (j'ai signalé les lignes non souhaitées par du texte en capitales) :
J'ai refait mon code et j'ai aussi modifié les valeurs des "margin-left" qui généraient des erreurs de mise en page (en ajoutant aussi "margin: 0" et "padding: 0" sur les conseils d'autres personnes). À présent, ça me semble plus propre, mais "margin: 0" et "padding: 0" ne changent rien à ma problématique car j'ai toujours ces lignes de blanc non souhaitées, à présent visibles sur TOUS les navigateurs (Mac et Android). Voici le nouveau code (j'ai signalé les lignes non souhaitées par du texte en capitales) :
<div> <ul> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> <ul> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 </li> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 </li> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: none;"> Note complémentaire à puce niveau 2 précédente (LIGNE DE BLANC NON SOUHAITÉE JUSTE APRÈS) </li> </ul> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding: 0;padding-left: 0.2em;list-style-type: disc;"> Puce niveau 1 </li> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: none"> Note complémentaire à puce niveau 1 précédente (sans puce) </li> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> <ul> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 </li> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 (LIGNE DE BLANC NON SOUHAITÉE JUSTE APRÈS) </li> </ul> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> <ul> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 </li> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 </li> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 </li> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 </li> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 (LIGNE DE BLANC NON SOUHAITÉE JUSTE APRÈS) </li> </ul> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> </ul> </div> <div> <p class="custom-indent">Attention : </p> <ul> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> <li style="margin: 0;margin-left: 1.2em;padding: 0;padding-left: 0.2em;list-style-type: disc"> Puce niveau 1 </li> <ul> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 </li> <li style="margin: 0;margin-left: 1.6em;padding: 0;padding-left: 0.2em;list-style-type: circle"> Puce niveau 2 </li> </ul> </div> (LIGNE DE BLANC NON SOUHAITÉE JUSTE APRÈS qui précède un nouveau H2)
Je pensais que ces deux lignes </ul> et </li> permettaient de clôturer l'ensemble contenant la liste des premières puces de niveau 1 et la liste à puces de niveau 2 qui doivent s'enchaîner avant de ré-enchaîner avec une liste à puces de niveau 1 (toujours sans ligne de blanc entre chaque). En l'occurrence, si je supprime ces deux lignes </ul> et </li>, la liste des puces de niveau 1 qui doit ré-enchaîner après cet ensemble s'aligne verticalement sur celles de niveau 2 qui précèdent, ce qui n'est pas souhaité.
Donc voici à nouveau le code avec coloration syntaxique :