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 :
- La propriété display : inline
- La propriété float : left ( ou float : right )
Nous allons donc mettre en forme trois exemples de listes :
- Une liste verticale
- Une liste horizontale avec display : inline
- Une liste horizontale avec float : left
Pour finir nous convertirons ces listes en un menu vertical et un menu horizontal.
Nous allons travailler sur trois types de listes pour lesquels nous allons créer les trois class :
- .ListeVertic
- .ListeHorizIL, (IL pour display : inline)
- .ListeHorizFL, ( FL pour float : left)
Dans la feuille de style externe : nous allons d'abord placer à la suite des propriétés propres aux listes, créées lors de l'atelier précédent, les propriétés communes aux trois class .ListeVertic, .ListeHorizIL
et .ListeHorizFL et à leur class-enfants .ListeVertic li, .ListeHorizIL li et .ListeHorizFL li, puis les propriétés propres
à la class .ListeVertic et à sa class-enfant .ListeVertic li.
.ListeVertic, .ListeHorizIL,.ListeHorizFL{
list-style-type:none;
margin:auto;
padding:0;
}
.ListeHorizIL li, .ListeHorizFL li,.ListeVertic li{
width:170px;
height:30px;
line-height:30px;
font-size:18px;
text-align:center;
background:#faf;
color:#290;
border:3px solid #D9B3FF;
border-left-color:#300;
border-bottom-color:#300;
}
.ListeVertic li{
margin-bottom:5px;
margin-left:0;
}
Dans le code html : créez une div class="Boites" dans laquelle vous placerez :
- Un titre <h3>"Liste Verticale"
- Une liste <ul class="ListeVertic">
- Cette liste contient cinq éléments <li> dans chacun desquels nous placerons le nom d'une des dynasties des rois de France : Les Mérovingiens, Les Carolingiens, Les Capétiens, Les Valois, Les Bourbons.
Constats :
- La liste est centrée par la propriété margin:auto
- Les list-items n'ont pas de puce grâce à la propriété : list-style-type:none
- Les list-items n'ont pas de décalage à gauche grâce à la propriété : margin-left:0
- Les list-items sont décalés verticalement grâce à la propriété : margin-bottom:5px
Préambule : La propriété display : Valeur permet de changer le comportement par défaut d'un élément, par exemple le comportement d'un élément block en celui d'un élément inline et vice-versa ou le comportement d'un élément block en celui d'une cellule de tableau.
L'application de la propriété display : inline aux éléments <li> d'une liste, permet d'aligner ceux-ci horizontalement.
.ListeHorizIL{
width:740px;
}
.ListeHorizIL li{
display:inline;
margin-left:3px;
/*padding:4px;*/
}
Dans la feuille de style externe : nous allons compléter les propriétés des class .ListeHorizIL et .ListeHorizIL li avec
le code ci-joint.
Dans un premier temps, dans .ListeHorizIL li, nous neutraliserons la propriété padding:4px; par deux balises de commentaires /* */.
Dans le code html : sous l'exercice précédent créez une nouvelle div class="Boites" dans laquelle vous placerez :
- Un titre <h3> "Liste Horizontale avec display : inline"
- L'ensemble de la liste précédente avec ses cinq list-items
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é width : 740px. Avec cette méthode, la largeur de <ul> doit être obtenue 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é /*padding:4px;*/.
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.
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.
.ListeHorizFL{
width:895px;
}
.ListeHorizFL li{
float:left;
margin-left:3px;
}
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.
C'est pour cela que dans la feuille de style, nous avons attribuée à la class .ListeHorizFL la propriété width : 895px.
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 (margin-left:3px + border:3px + width:170px + border:3px = 179px) par le nombre d'éléments : 179px*5= 895px.
Dans la feuille de style externe : nous allons compléter les propriétés des class .ListeHorizFL et .ListeHorizFL li avec
le code ci-joint.
Dans le code html : sous l'exercice précédent créez une nouvelle div class="Boites" dans laquelle vous placerez :
- Un titre <h3> "Liste Horizontale avec float : left"
- L'ensemble de la liste précédente avec ses cinq list-items
Dans l'attribut class de <ul> il suffit de substituer la valeur "ListeHorizFL" à la valeur "ListeHorizIL" .
Par ailleurs, les éléments flottants étant sortis du flux et ne repoussant pas la bordure basse de la div class="Boites" , nous ajouterons à <ul>, un attribut style="margin-bottom : 60px".
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.
Préambule : Un menu ce n'est rien d'autre qu'une liste dans les items de laquelle on a placé des liens.
Remarquons que, si pour réaliser des menus simples, on peut se passer du support d'une liste en alignant par exemple dans une div des liens auxquels on a attribué la propriété display : block, il est indispensble de recourir à des listes imbriquées pour réaliser des menus déroulants.
L'exercice : Dans le code html, sous l'exercice précédent créez une nouvelle div class="Boites" dans laquelle vous placerez :
- Un titre <h3> "Menu Vertical"
- L'ensemble de la liste <ul class="ListeVertic"> avec ses cinq list-items
Dans les list-items nous placerons les cinq liens qui figurent dans le fichier Adresses.txt, selon le modèle ci-dessous :
<li> <a href="http://fr.wikipedia.org/wiki/Bourbon"> Les Bourbons </a> </li>
a{
display : block;
width : 170px;
height : 30px;
color : #290;
text-decoration : none;
}
a:hover{
background : #aaa;
color : #80b;
}
Constats : Ce menu fonctionne certes, mais son aspect n'est guère satisfaisant :
- Les textes et les textes survolés ont les couleurs par défaut du navigateur.
- Par défaut, les textes sont soulignés.
- La couleur d'arrière-plan ne change pas au survol du list-item.
Pour corriger ces défauts, nous allons ajouter dans la feuille de style externe, les propriétés ci-jointes :
Quelques explications ::
- La propriété text-decoration : none supprime le soulignement.
- La propriété display : block confère à <a > et à <a : hover> un comportement de block et permet donc de leur donner des dimensions.
- La pseudo-class <a : hover> permet de changer l'aspect de <a > au survol par la souris.
- La propriété background : #aaa change la couleur d'arrière plan de <a : hover> au survol.
- La propriété color : #80b change la couleur du texte de <a : hover> au survol.
L'exercice : Dans le code html, sous l'exercice précédent, créez une nouvelle div class="Boites" dans laquelle vous placerez :
- Un titre <h3> "Menu horizontal avec float:left".
- L'ensemble de la liste précédentes avec ses cinq list-items et ses liens.
Dans l'attribut class de <ul> il suffit de substituer la valeur "ListeHorizFL" à la valeur "ListeVertic". Par ailleurs, nous ajouterons l' attribut style="margin-bottom : 60px".
Constats : Quand tous les éléments html et css sont en place, on passe très aisémment d'un menu vertical à un menu horizontal.