Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Officiels > Site Web > Apprenez à créer votre site web ! > XHTML & CSS, toujours plus forts ! > Les listes à puces > Lecture du tutoriel

Les listes à puces

Avatar
 Auteur : M@teo21
Note : 18 / 20 (17 votes)
Visualisations : 403 996

Plus d'informations Plus d'informations
Alors comme ça, vous voilà dans la partie III de ce tutoriel ? Bravo, on avance bien à ce que je vois :)
Vous avez encore pas mal de choses à apprendre sur le XHTML et le CSS. Notamment, et c'est important, vous découvrirez dans cette partie comment réaliser le design de votre site web.

La particularité de cette partie III, c'est que désormais nous allons apprendre de nouvelles choses en XHTML et en CSS. Le plan de notre cours pourrait donc se résumer à ceci :

  1. XHTML
  2. CSS
  3. XHTML & CSS, la puissance combinée de ces deux langages

Ah, et tenez justement : vous voyez ce que je viens de faire ci-dessus ? Ca s'appelle une liste à puce, et c'est justement ce que nous allons apprendre à faire dans ce chapitre ! (ouah c'te transition de fou :p )

Ce n'est pas bien compliqué à comprendre, et ça fait un bon petit chapitre pour démarrer doucement la partie III qui va se compliquer un peu par la suite.
Car oui, pour ceux qui se poseraient des questions, la partie III est bien la partie la plus "difficile". Mais il n'y a pas de quoi s'en faire, du temps que vous restez attentifs ça ne peut que bien se passer ;)
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant

Différents types de listes (XHTML)

Ce chapitre a le mérite d'être très clair dans sa construction : dans un premier temps nous apprendrons à créer des listes à puces d'un point de vue XHTML, et dans un second temps nous apprendrons à décorer ces listes via de nouvelles propriétés CSS. Tout d'abord, il faut savoir qu'il existe 3 types de listes à puces :

Nous allons voir comment on crée chacune de ces listes à puces. C'est facile, mais soyez attentifs quand même car vous allez avoir besoin des listes à puces dans les chapitres suivants. En effet, contrairement à ce qu'on pourrait croire les listes à puces sont très utilisées : elles servent notamment à créer le menu de votre site web !

Liste non ordonnée



Une liste non ordonnée ressemble à ceci :
C'est un système qui nous permet de faire une liste d'éléments, sans notion d'ordre (il n'y a pas de "premier" ni de "dernier"). Créer une liste à puce non ordonnée est très simple. Il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin avec un </ul>.
Commencez donc à taper ceci :

Code : HTML
1
<ul></ul>


Et maintenant, voilà ce qu'on va faire : on va écrire chacun des éléments de la liste entre 2 balises <li></li>. Toutes ces balises doivent se trouver entre <ul> et </ul>. Vous allez comprendre de suite avec cet exemple :

Code : HTML
1
2
3
4
5
<ul>
   <li>Fraises</li>
   <li>Framboises</li>
   <li>Cerises</li>
</ul>

Essayer !


<ul></ul> indique le début d'une liste à puce
<li></li> indique un nouvel élément de la liste à puce.

Vous pouvez mettre autant d'éléments que vous voulez dans la liste à puces, vous n'êtes pas limité à 3 éléments bien entendu ;)

Et voilà, vous savez créer une liste à puce non ordonnée !
C'était dur hein ? :p

Pour ceux qui ont besoin de faire des listes complexes, sachez que vous pouvez imbriquer des listes à puces (créer une liste à puce DANS une liste à puces). Si vous voulez faire ça, ouvrez une seconde balise <ul> à l'intérieur d'un élément <li></li>
Si vous fermez les balises dans le bon ordre, il ne devrait pas y avoir de problème ;)


Liste ordonnée



Déjà que la liste à puces non ordonnée c'était de la rigolade... Eh bien là vous allez vous rendre compte que, décidemment, faire un site web c'est suuuuuper dur :lol:

Pour faire une liste ordonnée, on va pas se fouler. On ne change que la balise <ul></ul> qui devient cette fois <ol></ol>
A l'intérieur, on ne change rien : on utilise toujours des balises <li></li>.

L'ordre dans lequel vous mettez les éléments de la liste est important. Le premier <li></li> sera l'élément n°1, le second sera le n°2 etc...


Comme c'est particulièrement intuitif, je vous laisse admirer la simplicité de cet exemple :

Code : HTML
1
2
3
4
5
<ol>
   <li>Je me lève</li>
   <li>Je mange et je bois</li>
   <li>Je retourne me coucher</li>
</ol>

Essayer !


Par rapport à l'exemple précédent, tout ce qu'on a eu à changer donc c'est la balise <ol>

Liste de définitions



Là par contre, c'est différent des exemples précédents. C'est "un peu" plus difficile (mais alors franchement juste un peu ;)).
Le principe de base est le même. On indique le début et la fin de la liste à l'aide d'une balise. Ici il ne s'agit pas de <ul>, ni de <ol> mais de... <dl> (c'est l'abréviation de "Definition List")

Commençons donc par taper ceci :

Code : HTML
1
2
3
4
<dl>
 
 
</dl>

Bien, maintenant la petite différence c'est qu'on n'utilise plus la balise <li> pour indiquer les différents éléments de la liste.
En effet, dans le cas d'une liste de définitions, il y a 2 types d'éléments différents :



Les mots se trouvent entre <dt></dt>, et les définitions entre <dd></dd>.
Ce qu'il faut bien comprendre, c'est qu'on doit mettre d'abord le mot (<dt>), ensuite sa définition (<dd>). Si vous voulez mettre une seconde définition, il faut recommencer : un dt et ensuite un dd.

Regardez bien cet exemple :

Code : HTML
1
2
3
4
5
6
7
8
<dl>
   <dt>Chat</dt>
   <dd>Animal à 4 pattes qui fait "Miaou !"</dd>
   <dt>Chien</dt>
   <dd>Animal à 4 pattes qui fait "Ouaf Ouaf !"</dd>
   <dt>Prof de maths</dt>
   <dd>Extraterrestre venu d'une autre planète qui enseigne des choses que personne ne comprend</dd>
</dl>

Essayer !


Comme vous pouvez le voir, les définitions sont mises légèrement en retrait par rapport aux mots. C'est pas très joli pour le moment, mais tout le monde sait qu'avec un petit coup de CSS on peut faire en sorte que les mots soient écrit en gras et en bleu et que les définitions soient clignotantes sur fond rouge. Si vous ne trouvez pas tout seul comment faire ça en CSS, c'est que vous êtes passés trop vite sur la partie II du tutoriel ;)

Les éléments de la liste à puce fonctionnent donc ici par paire. Une fois qu'on a compris qu'il faut taper d'abord le mot, puis sa définition, bah on sait se servir des listes de définitions :)

Tenez, si c'est pas beau ça, on a déjà fini de voir la partie "XHTML" des listes à puces ! :D
Que diriez-vous de pimenter tout ça avec un peu de CSS, mmh ? Ca devrait avoir encore meilleur goût ensuite ^^

Décorez vos listes (CSS)

Non non, je ne vais pas vous apprendre à faire en sorte que vos définitions soient clignotantes sur fond rouge :p Ca, vous savez déjà le faire :

Code : CSS
1
2
3
4
5
dd
{
background-color:red;
/* ... */
}


Bref ça c'est du vu et revu, en plus je viens de vous mettre sur la piste ;)
Ce que nous allons voir maintenant ce sont des propriétés CSS spécialisées dans la présentation des listes à puces. Il en existe 3. Nous allons étudier le fonctionnement de chacune d'elles.


Retrait des listes



La première des propriétés que je veux vous montrer est très facile à utiliser. Elle permet d'indiquer si on veut que la liste soit mise en retrait ou non.
Cette propriété s'appelle list-style-position, et peut prendre 2 valeurs :


Ce schéma qui vous explique la différence entre inside et outside :

Image utilisateur


Voici le CSS qui nous permettra de tester le retrait :

Code : CSS
1
2
3
4
5
6
7
8
9
.pas_de_retrait
{
   list-style-position: inside;
}

.retrait
{
   list-style-position: outside;
}


Et un code XHTML banal de liste à puces :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<p>Voici une liste avec retrait (par défaut) :</p>

<ul class="retrait">
   <li>Liste<br />à puces</li>
   <li>Ligne 1<br />Ligne 2</li>
   <li>Vous pouvez voir<br />que le texte est décalé sur la droite</li>
</ul>
                
<p>Voici une liste sans retrait :</p>

<ul class="pas_de_retrait">
   <li>Liste<br />à puces</li>
   <li>Ligne 1<br />Ligne 2</li>
   <li>Vous pouvez voir<br />que le texte n'est pas décalé sur la droite</li>
</ul>


Essayer !


Pour bien voir la différence au niveau du retrait, il faut que les éléments de la listes comportent au moins 2 lignes (c'est pour ça que j'ai mis un <br />). En pratique, on ne désactive pas le retrait des listes à puces, sauf quand on se sert des listes pour créer le menu de son site comme on le verra plus tard.

Représentation de la puce



Nettement plus intéressante, la propriété list-style-type vous permet de changer l'apparence de la puce. En effet, vous n'êtes pas obligés d'avoir une puce sous forme de rond noir, pas plus que vous n'êtes obligés d'avoir des chiffres pour les listes numérotées (on peut utiliser des lettres : a, b, c, d...)

La propriété list-style-type peut prendre de nombreuses valeurs. Certaines d'entre elles concernent uniquement les listes non ordonnées, d'autre concernent uniquement les listes ordonnées :



Il existe en réalité d'autres valeurs possibles pour les listes ordonnées, comme la numérotation arménienne, géorgienne, hébraïque, japonaise etc... Mais je vous en fais grâce (et je ne pense pas que vous m'en voudrez !), ce que je vous propose là devrait amplement vous suffire ;)

Et si on testait quelques-unes de ces listes à puces modifiées ? Voici le code XHTML qui va nous servir de test (un peu gros, mais ne prenez pas peur c'est un peu répétitif c'est tout ^^ )

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<h2>Quelques listes non ordonnées</h2>

<p>Voici une liste à puce non ordonnée sans modification (= <em>disc</em>) :</p>
<ul>
   <li>Liste</li>
   <li>à</li>
   <li>puces</li>
</ul>

<p>Avec <em>circle</em> :</p>
<ul class="cercle">
   <li>Liste</li>
   <li>à</li>
   <li>puces</li>
</ul>

<p>Avec <em>square</em> :</p>
<ul class="carre">
   <li>Liste</li>
   <li>à</li>
   <li>puces</li>
</ul>

<p>Avec <em>none</em> (sans puces) :</p>
<ul class="rien">
   <li>Liste</li>
   <li>à</li>
   <li>puces</li>
</ul>

<h2>Quelques listes ordonnées</h2>

<p>Liste à puces ordonnée sans modification (= <em>decimal</em>)</p>
<ol>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>

<p>Avec <em>decimal-leading-zero</em> (<strong>Ne fonctionne pas sous IE)</strong>) :</p>
<ol class="commence_a_zero">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>

<p>Avec <em>lower-alpha</em> :</p>
<ol class="lettres_minuscules">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>

<p>Avec <em>upper-roman</em> :</p>
<ol class="chiffres_romains">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>

<p>Avec <em>lower-greek</em> (<strong>Ne fonctionne pas sous IE</strong>) :</p>
<ol class="lettres_grecques">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ol>


... Et le CSS qui va avec :

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* Listes à puces non ordonnées */

.cercle
{
   list-style-type: circle;
}
.carre
{
   list-style-type: square;
}
.rien
{
   list-style-type: none;
}

/* Listes à puces ordonnées */

.commence_a_zero
{
   list-style-type: decimal-leading-zero;
}
.lettres_minuscules
{
   list-style-type: lower-alpha;
}
.chiffres_romains
{
   list-style-type: upper-roman;
}
.lettres_grecques
{
   list-style-type: lower-greek;
}

/* Quelques styles supplémentaires juste pour la présentation
En plus ça vous fait quelques rappels ;o) */

h2
{
   text-indent: 20px;
   font-family: Arial, Verdana, "Times New Roman", serif;
}
em
{
   background-color: yellow;
}
strong
{
   color: red;
}


Essayer !


Je n'ai pas mis tous les styles possibles pour ne pas trop alourdir le code source, mais je pense que vous êtes assez grands pour tester les autres styles tous seuls non ? :p


Changer l'image de la puce



Si aucune des représentations de puces ci-dessus ne vous convient, pourquoi ne pas créer la vôtre ? C'est justement ce que vous propose la propriété list-style-image, qui vous permet d'utiliser n'importe quelle image à la place d'une puce.

Vous devez lui indiquer comme valeur "url" suivi de l'adresse de l'image à utiliser. Ca fonctionne exactement comme la propriété background (qui permet d'indiquer une image de fond, si vous vous souvenez bien).

On va par exemple utiliser une petite image de dossier à la place de la puce, vous allez voir que ça fait beaucoup plus joli ! :)

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
ul /* Ma liste aura des puces en forme de dossiers */
{
   list-style-image: url("dossier.png");
}

/* Juste pour améliorer la présentation : */
a
{
   color: blue;
   text-decoration: none;
}

a:hover
{
   text-decoration: underline;
}


Essayer !


Sympatoche non ? :D

L'image de puce peut être de n'importe quel type (PNG, GIF ou JPEG).
Attention cependant, l'image ne doit pas être trop grande sinon elle sera coupée. Je vous conseille d'utiliser une taille d'environ 15x15 pixels.

Q.C.M.

Laquelle de ces balises permet de créer une liste à puces ordonnée ?
Pour laquelle de ces listes à puces n'utilise-t-on pas la balise <li> pour indiquer un nouvel élément ?
Laquelle de ces balises permet d'indiquer la définition d'un mot ? (je sais je suis sadique ^^)
Quelle propriété CSS ne permet pas de changer l'apparence des puces de la liste ?
Quelle valeur donner à list-style-type pour avoir une liste à puce ordonnée de la façon suivante : a, b, c, d, e...
Pour quelle balise est faite la valeur "square" de list-style-type ?
Laquelle de ces valeurs de list-style-type n'est pas reconnue par Internet Explorer ?

Statistiques de réponses au QCM

Avec ça, on vient de faire le tour de tout ce qu'on pouvait voir et savoir sur les listes à puces.
Certes les noms des balises ne sont pas très clairs (ul, ol, li, dl, dd, dt), mais au moins ils sont courts et il n'y en a pas des centaines non plus ! Vous verrez que vous les retiendrez rapidement avec l'habitude... :)

Eh, ce n'est pas le moment de vous endormir ! Les chapitres suivants sont super super importants. Si vous voulez réussir votre site et apprendre à en créer le design, soyez très attentifs à partir de maintenant !
En effet, vous allez découvrir pas mal de nouvelles choses, surtout sur le CSS ;)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut Retour en haut


Créé : le 20/07/2005 à 23:22:56
Modifié : le 08/09/2008 à 18:47:58
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 387 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0477s (0.0242s)