Le Deal du moment : -40%
-40% sur Nike React Infinity Run Flyknit 2
Voir le deal
95.97 €

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

Les listes Empty Les listes

Lun 15 Avr 2019 - 19:48

Les listes
Bonjour à toi, qui veut en savoir plus sur les listes !

Eh non, il ne suffit pas de faire des "-" et des retours à la ligne pour qu'une liste soit une liste ! Allons-y !
Les différents types de listes

Il existe deux types de listes :
Les listes ordonnées

Pour lesquelles on va utiliser la balise "ol" :
rendu :
     
  1. Je suis le point 1
  2.  
  3. Je suis le point 2
  4.  
  5. Je suis le point 3

Code:
<ol>
  <li>Je suis le point 1</li>
  <li>Je suis le point 2</li>
  <li>Je suis le point 3</li>
</ol>

Les listes à puces

Pour lesquelles on va utiliser la balise "ul" :
rendu :
     
  • Je suis un point
  •  
  • Je suis un autre point
  •  
  • Je suis encore un point
Code:
<ul>
  <li>Je suis un point</li>
  <li>Je suis un autre point</li>
  <li>Je suis encore un point</li>
</ul>

Comme vous le voyez, chaque "point" ou chaque "numéro" sera dans la balise "li". En effet, les balises "ol" et "ul" sont là pour dire si la liste sera ordonnée ou non, alors que la balise "li" indique juste qu'il y a un élément.

Pour ces deux types de liste on a plusieurs "puces" disponibles :

  • Des chiffres dits "arabes", des chiffres "romains" ou encore "hébreux" !
  • Des carrés, des ronds pleins, des cercles
  • Mais également toutes les images de votre choix ! Nous verrons ça un peu plus loin


Les listes de description

Moins souvent utilisées et pourtant, utiles, il existe un 3e type de liste : les listes de description. Ici, chaque "item" sera constitué de 2 éléments : un titre & une description/définition.

Idea Ce type de liste est idéal pour un bestiaire, un dictionnaire ou un glossaire.

Les listes de descriptions s'écrivent de cette façon :
Code:

<dl>
    <!-- La liste sera ici -->
</dl>

Le "titre" s'écrira entre balise "dt" :
Code:
<dt>Titre</dt>

Et la "description/définition" sera mise entre balise "dd"
Code:
<dd>description/définition</dd>

Exclamation Il est à noter que :
• un "titre" peut avoir une seule définition
Code:
<dt>Titre</dt>
<dd>description/définition</dd>

• Une définition peut avoir plusieurs titre :
Code:
<dt>Titre 1</dt>
<dt>Titre 2</dt>
<dd>description/définition</dd>

• Un seul titre peut avoir plusieurs définitions :
Code:
<dt>Titre</dt>
<dd>description/définition 1</dd>
<dd>description/définition 2</dd>

Et voici un exemple complet :
Code:
<dl>
    <dt>Titre</dt>
    <dd>description/définition</dd>

    <dt>Titre 1</dt>
    <dt>Titre 2</dt>
    <dd>description/définition</dd>

    <dt>Titre</dt>
    <dd>description/définition 1</dd>
    <dd>description/définition 2</dd>
</dl>

Rendu:
Les listes Explic11

L'imbrication des listes

L'imbrication des listes est souvent le gros gros gros point noir, redouté par tout le monde ! Et pourtant ce n'est pas si compliqué : il suffit de retenir qu'une sous-liste doit être avant la fermeture de sa liste parente. Un exemple vaut mieux que 1 000 mots !

Si je veux coder ceci :
Les listes Imbric10
Je vais avoir une liste parente non ordonnée (ul) et sous le deuxième point j'aurai une sous-liste ordonnée. D'un coté on a notre liste à puce, et de l'autre notre liste ordonnée qu'on veut mettre en sous liste.
Liste à puce:

Code:
<ul>
 <li>Je suis un point</li>
 <li>Je suis un autre point</li>
 <li>Je suis encore un point</li>
</ul>

Liste ordonnée:

Code:
<ol>
 <li>Je suis le point 1</li>
 <li>Je suis le point 2</li>
 <li>Je suis le point 3</li>
</ol>

On va donc prendre le second point et revenir à la ligne avant le /li.
Code:
<ul>
 <li>Je suis un point</li>
 <li>Je suis un autre point

 </li>
 <li>Je suis encore un point</li>
</ul>
Et on va insérer la liste ordonnée :
Code:
<ul>
 <li>Je suis un point</li>
 <li>Je suis un autre point
 <ol>
   <li>Je suis le point 1</li>
   <li>Je suis le point 2</li>
   <li>Je suis le point 3</li>
 </ol>
 </li>
 <li>Je suis encore un point</li>
</ul>

Là, notre imbrication est bonne ! Et notre sous liste est bien l'enfant de notre second point de la liste principale.
Changer le type de puce

Il existe beaucoup, beaucoup, beaucoup de type de puces différentes. Je vais essayer de vous faire une petite liste Smile
Pour les listes ordonnées

Pour les listes ordonnées, on a un attribut qu'on appelle "type". Il permet de définir le style des listes. Voilà ceux de base :

type="1" :: le type par défaut, ce sont les chiffres comme au dessus.
type="A" :: les listes seront en grandes majuscule (A, B, C, etc...)
type="a" :: les listes seront en petites majuscule (a, b, c, etc...)
type="I" :: les listes seront en chiffre romain en majuscules (I, II, III, IV, etc...)
type="i" :: les listes seront en chiffre romain minuscule (i, ii, iii, iv, etc...)

Cependant, on peut aussi utiliser l'attribut "style" pour y mettre d'autres propriétés :
Code:
<ol style="mespropriétés;">
 <li>Je suis un point</li>
 <li>Je suis un autre point</li>
 <li>Je suis encore un point</li>
</ol>
Par exemple, on peut :
list-style-type:hebrew; :: nos "chiffres" seront en hébreux
list-style-type:armenian; :: nos "chiffres" seront arméniens ^^

Pour les listes non ordonnées

Pour les listes non ordonnées, on ne peut pas utiliser l'attribut "type". On va utiliser l'attribut "style" et y mettre des propriétés.
Comme ceci :
Code:
<ul style="mespropriétés;">
 <li>Je suis un point</li>
 <li>Je suis un autre point</li>
 <li>Je suis encore un point</li>
</ul>

Voilà une petite liste des types "de base" :
list-style-type:disc :: le type par défaut, il va simplement mettre des points noirs.
list-style-type:circle :: les points seront en fait des "cercles".
list-style-type:square :: les listes seront des carrés.
list-style-type:none :: Il n'y aura rien devant la liste.

Mais on peut également mettre une image ! Par exemple je veux que cette image soit ma puce :  alien
Je vais utiliser la propriété : list-style-image.
Le code est le suivant :
Code:
<ul style="list-style-image:url(https://2img.net/i/fa/i/smiles/alien.png);">
  <li>Je suis un point</li>
  <li>Je suis un autre point</li>
  <li>Je suis encore un point</li>
  </ul>
Ce qui donne :
Les listes Alien10

Et voilà ! Tu peux mettre ce que tu veux du coup Wink

Note importante

Il est important de noter que le style d'une liste parente sera transmis à la liste enfant ! Il faut donc ré-initialiser le style de la balise enfant Wink
Par exemple ce code :
Code:
<ul style="list-style-image:url(https://2img.net/i/fa/i/smiles/alien.png);">
 <li>Je suis un point
   <ul >
    <li>Je suis un point</li>
    <li>Je suis un autre point</li>
    <li>Je suis encore un point</li>
   </ul>
 </li>
 <li>Je suis un autre point</li>
 <li>Je suis encore un point</li>
</ul>
donne :
Les listes Reppor10
Il faut donc annuler l'image sur la sous liste :
Code:
<ul style="list-style-image:url(https://2img.net/i/fa/i/smiles/alien.png);">
 <li>Je suis un point

   <ul style="list-style-image:none;">
    <li>Je suis un point</li>
    <li>Je suis un autre point</li>
    <li>Je suis encore un point</li>
   </ul>

 </li>
 <li>Je suis un autre point</li>
 <li>Je suis encore un point</li>
</ul>
et voilà :
Les listes Reppor11




Tu en sais à présent pas mal sur les listes ! Tu vas déjà pouvoir t'amuser Smile


Pêpêche
Pêpêche
Mascotte
Messages : 4528

Les listes Empty Re: Les listes

Mar 31 Déc 2019 - 9:12
Coucou Smile

MàJ du tuto pour ajouter une note sur les listes de descriptions (dl, dd, dt)

_________________
Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses