LES LISTES : SUITES

Préambule

Ainsi que cela a été dit lors de l'atelier précédent, les listes ainsi que leurs list-items sont des éléments de type block, ils peuvent donc recevoir des propriétés de mise en forme normales des éléments block : hauteur, largeur, Arrière-plan, couleur et fonte de texte, marge, padding et bordure.

Comme tout élément de type block, les éléments des listes se positionnent par défaut verticalement. Pour répondre aux impératifs de mise en page, par exemple pour réaliser des menus horizontaux, il peuvent cependant être alignés horizontalement grâce à deux propriétés :

1. La propriété display : inline
2. La propriété float : left ( ou float : right )

Nous allons donc mettre en forme trois exemples de listes :

1. Une liste verticale
2. Une liste horizontale avec display : inline
3. Une liste horizontale avec float : left

Pour finir nous convertirons ces listes en un menu vertical et un menu horizontal.

Mise en place des styles communs

Nous allons travailler sur trois types de listes pour lesquels nous allons créer les trois class :

1. .ListeVertic
2. .ListeHorizIL, (IL pour display : inline)
3. .ListeHorizFL, ( FL pour float : left)

Dans la feuille de style externe StyleMagellan.css , nous allons d'abord placer :

1. La class .MenForme que nous utiliserons pour la mise en page.
2. Puis les propriétés communes aux trois class .ListeVertic, .ListeHorizIL et .ListeHorizFL
3. Enfin les propriétés communes leur class-enfants .ListeVertic li, .ListeHorizIL li et .ListeHorizFL li.

Mise en forme d'une liste verticale

Résultat attendu ci-dessous :

Constats :

• La liste est centrée par la propriété Marges extérieures : auto
• Les list-items n'ont pas de puce grâce à la propriété : Pas de style de liste
• Les list-items n'ont pas de décalage à gauche grâce à la propriété : Marge extérieure gauche : 0
• Les list-items sont décalés verticalement grâce à la propriété : Marge extérieure basse : 2px

La propriété display

La propriété display : Valeur permet de changer le comportement par défaut d'un élément.

La propriété display admet 18 valeurs : inline, block, inline-block, list-item, run-in, compact, marker, table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none et inherit.

Tous les navigateurs ne reconnaissent pas ces 18 valeurs et en particulier, Internet Explorer ne reconnaît pour display, que 7 valeurs : block, none, inline, inline-block, list-item, table-header-group et table-footer-group.

Dans la pratique deux valeurs sont utilisées très couramment :

1. display : inline qui confère à un élément block le comportement d'un élément inline.
2. display : block qui confère à un élément inline le comportement d'un élément block.

Nous allons utiliser ces propriétés pour la mise en forme des listes horizontales puis des menus.

Mise en forme d'une liste horizontale avec display : inline

L'application de la propriété display : inline aux éléments <li> d'une liste, permet d'aligner ceux-ci horizontalement.

Dans l'attribut class de <ul> il suffit de substituer la valeur "ListeHorizIL" à la valeur "ListeVertic".

Le sélecteur .ListeHorizIL li attribue à cet élément la propriété display:inline.

Condition à respecter, il faut que la largeur du conteneur <ul> soit suffisante pour contenir les éléments de la liste déployés horizontalement, plus leurs bordures, leurs padding et leurs marges. Sinon les derniers éléments s'alignent sous les autres.

C'est pour cela que dans la feuille de style, nous avons attribuée à .ListeHorizIL la propriété Largeur : 662px. Avec cette méthode, la largeur de <ul> ne peut être obtenue que par tatonnements.

Constat : Les largeurs et hauteurs des list-items sont maintenant strictement dimensionnées sur les textes contenus.

En effet, les éléments <li> étant dotés d'un comportement inline perdent leurs propriétés de dimensions et adaptent celles-ci à leurs contenus. L'aspect n'est pas très heureux, on peut le corriger partiellement en débloquant dans la feuille de style la propriété /*Marges intérieures : 2px 6px*/.

Après cette correction , les textes sont dégagés des bordures mais les éléments de la liste gardent des largeurs variables, ce qui constitue un des inconvénients de cette méthode.

Mise en forme d'une liste horizontale avec float : left

Préambule

En sortant les éléments <li> du flux courant, la propriété float : left permet comme display : inline d'aligner horizontalement les éléments de la liste.

Comme précédemment, il faut que la largeur de <ul> soit suffisante pour contenir les éléments de la liste déployés horizontalement.

Avec cette méthode, les éléments <li> ont tous la même largeur, la largeur de <ul> peut donc être obtenue par la multiplication de la largeur totale de chaque élément (Marge gauche :1px + bordure:3px + Largeur : 112px + bordure:3px = 119px) par le nombre d'éléments : 119px*7= 833px.

C'est pour cela que dans la feuille de style, nous avons attribuée à la class .ListeHorizFL la propriété Largeur : 833px.

Par ailleurs, les éléments flottants étant sortis du flux et ne repoussant pas la bordure basse de la div class="MenForme" , nous ajouterons sous la balise fermante </ul> de la liste <ul class="ListeHorizFL">, un élément vide <p style="clear:left"></p>.

Résultat attendu ci-dessous :

Constats :Par rapport à la méthode d'alignement avec display : inline , la méthode d'alignement avec float : left présente quelques avantages :

• Les éléments de la liste conservent leur comportement de block et leurs dimensions.
• Les éléments <li> peuvent donc avoir tous la même largeur.
• La largeur totale de <ul> se calcule aisément.