Les Listes

Voir au format PDF
Vous êtes ici : >> HTML-CSS / Les Listes
Temps d'étude : 45 min. Niveau : Facile.
Tags : Les Listes
Fichier(s) utile(s) pour ce cours : /

Les listes

Les listes en html peuvent être pratiques pour présenter des données. et en plus, c'est un chapitre facile ! :-).
Voici un premier exemple d'une liste :

liste1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
				<link rel="stylesheet" href="liste4.css">
			</head>
			<body>
			
			<ul> <!-- debut de la liste -->
				<li>France</li> <!-- élément de la liste -->
				<li>Italie</li> <!-- élément de la liste -->
				<li>Espagne</li> <!-- élément de la liste -->
			</ul> <!-- fin de la liste -->
			
			<hr>
			<!-- Il est possible d'imbriquer une liste dans une autre -->
			<ul>
				<li>Pays
					<ul>
						<li>France</li>
						<li>Italie</li>
						<li>Espagne</li>
					</ul>
				</li>
			</ul>
				
			</body>
		</html>
Le Résultat
  • France
  • Italie
  • Espagne
  • Pays
    • France
    • Italie
    • Espagne

<ul> permet de déclarer une nouvelle liste non ordonnée.
<li> représente les éléments à l'intérieur de la liste.
Comme vous pouvez le constater, il est possible d'imbriquer une liste dans une autre.

Exemple avec une liste ordonnée :

liste2.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
				<link rel="stylesheet" href="liste4.css">
			</head>
			<body>
			
			<ol><!-- liste ordonnée -->
				<li>Html/Css</li>
				<li>Sql/Php</li>
				<li>Java/J2ee</li>
			</ol>
				
			</body>
		</html>
Le Résultat
  1. Html/Css
  2. Sql/Php
  3. Java/J2ee

La balise <ol> permet d'obtenir une liste numérotée.

Exemple avec une liste de termes :

liste3.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
				<link rel="stylesheet" href="liste4.css">
			</head>
			<body>
			
				<dl><!-- Definition List -->
					<dt>F</dt> <!-- Definition Term -->
					<dd>France</dd> <!-- Definition Description -->
					<dd>Finland</dd> <!-- Definition Description -->
				</dl>
				
			</body>
		</html>
Le Résultat
F
France
Finland

La balise <dl> permet de déclarer une liste de définitions.
La balise <dt> permet de déclarer un terme à expliquer.
La balise <dd> permet de fournir la description d'un terme.

Exemple d'une liste avec CSS

liste4.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
				<link rel="stylesheet" href="liste4.css">
			</head>
			<body>
			
				<ul class="fruit"> <!-- debut de la liste -->
					<li>Orange</li> <!-- élément de la liste -->
					<li>Fraise</li> <!-- élément de la liste -->
					<li>Poire</li> <!-- élément de la liste -->
				</ul> <!-- fin de la liste -->
				
			</body>
		</html>
Décryptons le code Html :
<ul> permet de déclarer une nouvelle liste non ordonnée.
<li> représente les éléments à l'intérieur de la liste.


Le Résultat (sans css)
  • Orange
  • Fraise
  • Poire

Ajoutons un peu de CSS ensemble (pour remplacer la puce d'origine) :

liste4.css
		ul.fruit{
		list-style-type: none; /* none, circle, square, disc (par défaut) */
		}
		ul.fruit  li{
		float: left;
		margin: 15px;
		background: url(img/fleche.gif) left center no-repeat;
		padding: 0 0 0 17px;
		}

Pour que cet exemple fonctionne, il vous faudra une image nommée fleche.gif.

Décryptons les selecteurs du code Css :

		.fruit{
		propriete : valeur;
		}
		/*	traduction : "va me chercher la classe fruit". */
		ul.fruit{
		propriete : valeur;
		}
		/* traduction : "va me chercher le ul qui possède la classe fruit". */
		
		/* Dans le cas où il y est une autre zone qui utilise la classe fruit, exemple : 
 a b c 
 
		La 2e version ul.fruit ira chercher uniquement la classe fruit sur les ul tandis que la 1ère version ira chercher toutes les classes fruits (ul et div confondue). */
		
		/* - Ce n'est pas pareil que : */
		ul .fruit{
		propriete : valeur;
		}	
		/* traduction : "va me chercher la classe fruit qui se trouve dans le ul". (il n'y en as pas). */
Décryptons les propriétés du code Css :

list-style-type permet de changer la puce des éléments de la liste.
float permet d'ajouter un effet flottant aux éléments (côte à côte).
margin permet d'ajouter de la marges (pour écarter les éléments entre eux).
background permet de spécifier un fond. cela permet de remplacer la puce d'origine par une image (dans notre cas il s'agit d'une fléche). Procurez vous une image et ajuster le nom si nécessaire.
padding permet d'ajouter de la marge intérieure (dans notre cas : à gauche pour écarter l'image de la fléche avec le texte).

Le Résultat (avec css)
  • Orange
  • Fraise
  • Poire

Nous retrouvons notre fléche sur le résultat !

Les listes avec des effets de transitions

A présent, vous connaissez les listes classiques, mais savez-vous que l'on peut modifier leur affichage en profondeur ? En effet avec l'arrivée des dernières propriétés CSS3, nous allons pouvoir générer des affichages totalement différents !

Pour cet exemple, nous allons déclarer une liste permettant de présenter plusieurs offres pour un abonnement d'un service/outil sur le web.

Nous allons prendre une structure type de page web et y déclarer des listes :

liste5.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Liste avec Css3</title>
				<link rel="stylesheet" href="liste5.css">
			</head>
			<body>
							
				<ul>
					<li>Projets</li>
					<li>Utilisateurs</li>
					<li>Stockage</li>
					<li>Base de données</li>
					<li>Gestion des droits</li>
				</ul>
			
				<ul>
					<li>Pack 1</li>
					<li>199 € / mois</li>
					<li>illimité</li>
					<li>125</li>
					<li>illimité</li>
					<li>oui</li>
					<li>oui</li>
				</ul>
				
				<ul>
					<li>Pack 2</li>
					<li>139 € / mois</li>
					<li>50</li>
					<li>90</li>
					<li>illimité</li>
					<li>oui</li>
					<li>non</li>
				</ul>
				
				<ul>
					<li>Pack 3</li>
					<li>59 € / mois</li>
					<li>10</li>
					<li>20</li>
					<li>2 GO</li>
					<li>oui</li>
					<li>non</li>
				</ul>
				
			</body>
		</html>

Le Résultat (provisoire)
  • Projets
  • Utilisateurs
  • Stockage
  • Base de données
  • Gestion des droits
  • Pack 1
  • 199 € / mois
  • illimité
  • 125
  • illimité
  • oui
  • oui
  • Pack 2
  • 139 € / mois
  • 50
  • 90
  • illimité
  • oui
  • non
  • Pack 3
  • 59 € / mois
  • 10
  • 20
  • 2 GO
  • oui
  • non


Nous allons disposer la première liste dans une zone à gauche et le reste dans une zone sur la droite.

				<div class="cote-gauche">
					<!-- le 1er ul -->
				</div>
							
				<div class="cote-droit">
					<!-- les 3 derniers ul -->
				</div>
Ce qui nous donne :

liste5.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Liste avec Css3</title>
				<link rel="stylesheet" href="liste5.css">
			</head>
			<body>
				<div class="cote-gauche">
					<ul>
						<li>Projets</li>
						<li>Utilisateurs</li>
						<li>Stockage</li>
						<li>Base de données</li>
						<li>Gestion des droits</li>
					</ul>
				</div>
				
				<div class="cote-droit">
					<ul>
						<li>Pack 1</li>
						<li>199 € / mois</li>
						<li>illimité</li>
						<li>125</li>
						<li>illimité</li>
						<li>oui</li>
						<li>oui</li>
					</ul>
					
					<ul>
						<li>Pack 2</li>
						<li>139 € / mois</li>
						<li>50</li>
						<li>90</li>
						<li>illimité</li>
						<li>oui</li>
						<li>non</li>
					</ul>
					
					<ul>
						<li>Pack 3</li>
						<li>59 € / mois</li>
						<li>10</li>
						<li>20</li>
						<li>2 GO</li>
						<li>oui</li>
						<li>non</li>
					</ul>
				</div>
				
			</body>
		</html>

Ensuite pour la partie CSS, nous allons redéfinir les styles des listes :
liste5.css
	body{
	font-family: verdana;
	font-size: 13px;
	}
	ul{
	list-style: none;
	float: left;
	margin: 0;
	padding: 0;
	}

Décryptons les propriétés du code Css :

body permet de selectionner toute la page.
font-family permet de modifier la police d'écriture.
font-size permet de modifier la taille d'écriture du texte.

ul permet de selectionner toutes les listes.
list-style permet de redéfinir les puces des listes.
float permet de donner un effet flottant (côte à côté).
margin permet de modifier les marges extérieures. Nous les remettons à zéro pour éviter et ainsi casser l'héritage.
padding permet de modifier les marges intérieures. Nous les remettons à zéro pour éviter et ainsi casser l'héritage.

Le Résultat (provisoire)
  • Projets
  • Utilisateurs
  • Stockage
  • Base de données
  • Gestion des droits
  • Pack 1
  • 199 € / mois
  • illimité
  • 125
  • illimité
  • oui
  • oui
  • Pack 2
  • 139 € / mois
  • 50
  • 90
  • illimité
  • oui
  • non
  • Pack 3
  • 59 € / mois
  • 10
  • 20
  • 2 GO
  • oui
  • non

Ajoutons quelques classes CSS dans notre fichier html afin de pouvoir mieux les selectionner côté CSS et ainsi appliquer des effets de transformation :
Ci dessous, nous ajouterons les classes CSS "transformation" et "liste1".

liste5.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Liste avec Css3</title>
				<link rel="stylesheet" href="liste5.css">
			</head>
			<body>
			
			<div class="cote-gauche">
				<ul>
					<li>Projets</li>
					<li>Utilisateurs</li>
					<li>Stockage</li>
					<li>Base de données</li>
					<li>Gestion des droits</li>
				</ul>
			</div>
			<div class="cote-droit">
				<div class="transformation">
					<ul class="liste1">
						<li>Pack 1</li>
						<li>199 € / mois</li>
						<li>illimité</li>
						<li>125</li>
						<li>illimité</li>
						<li>oui</li>
						<li>oui</li>
					</ul>
				</div>
				<div class="transformation">
					<ul>
						<li>Pack 2</li>
						<li>139 € / mois</li>
						<li>50</li>
						<li>90</li>
						<li>illimité</li>
						<li>oui</li>
						<li>non</li>
					</ul>
				</div>
				<div class="transformation">
					<ul>
						<li>Pack 3</li>
						<li>59 € / mois</li>
						<li>10</li>
						<li>20</li>
						<li>2 GO</li>
						<li>oui</li>
						<li>non</li>
					</ul>
				</div>
			</div>
				
			</body>
		</html>


Et voici le code CSS associé :

liste5.css
		body{
		font-family: verdana;
		font-size: 13px;
		}
		ul{
		list-style: none;
		float: left;
		margin: 0;
		padding: 0;
		}
		.cote-gauche  ul  li:first-child{
		border-top:  1px solid #c0c0c0;
		}
		.cote-gauche  ul  li{
		border-bottom: 1px solid #c0c0c0;
		border-left: 1px solid #c0c0c0;
		padding: 10px;
		width: 150px;
		}

		.cote-droit  .transformation  ul  li:last-child{
		border-bottom:  1px solid #c0c0c0;
		}

		.cote-droit  .transformation  ul  li{
		border-top: 1px solid #c0c0c0;
		border-right: 1px solid #c0c0c0;
		padding: 10px;
		width: 150px;
		text-align: center;
		}
		.cote-droit  .transformation  ul  li:first-child{
		border-left: 1px solid #c0c0c0;
		background: #5d5d5d;
		color: #fff;
		font-weight: bold;
		}
		.cote-droit  .transformation   ul:hover{
		background: linear-gradient(#d5d5d5, #8a8a8a);
		cursor: pointer;
		transform:scale(1.3);
		transition-duration: 1s;
		}
		.cote-droit  .transformation   ul:hover   li:first-child{
		background: #000;
		}
		.cote-gauche  ul{
		margin: 76px 0 0 0;
		}
		ul.liste1  li{
		border-left: 1px solid #c0c0c0;
		}
		#contenu{
		margin: 70px 0 0 50px;
		}


Décryptons les selecteurs du code Css :

body
permet de selectionner toute la page.

ul
permet de selectionner toutes les listes.

.cote-gauche ul li:first-child
permet de selectionner le premier (first-child) élément (li) de la liste (ul) de la div ayant pour classe (.cote-gauche).

.cote-gauche ul li
permet de selectionner tous les éléments (li) de la liste (ul) de la div ayant pour classe (.cote-gauche).

.cote-droit .transformation ul li:last-child
permet de selectionner le dernier (last-child) élément (li) de la liste (ul) de la div ayant pour classe (.transformation), elle même contenue dans la div ayant pour classe (.cote-droit).

.cote-droit .transformation ul li
permet de selectionner tous les éléments (li) de la liste (ul) de la div ayant pour classe (.cote-droit).

.cote-droit .transformation ul li:first-child
permet de selectionner le premier (first-child) élément (li) de la liste (ul) de la div ayant pour classe (.transformation), elle même contenue dans la div ayant pour classe (.cote-droit).

.cote-droit .transformation ul:hover
permet de selectionner les ul au moment où la souris de l'internaute les survole (hover) à l'intérieur de la div ayant pour classe (.transformation), elle même contenue dans la div ayant pour classe (.cote-droit).

.cote-droit .transformation ul:hover li:first-child
permet de selectionner le premier (first-child) élément (li) de la liste (ul) au moment où la souris de l'internaute les survole (hover) à l'intérieur de la div ayant pour classe (.transformation), elle même contenu dans la div ayant pour classe (.cote-droit).

.cote-gauche ul
permet de selectionner toutes les listes ul de la div ayant pour classe (.cote-gauche)

ul.liste1 li
permet de selectionner tous les éléments (li) de la liste (ul) ayant pour classe (liste1)


Décryptons les propriétés du code Css :

font-family permet de modifier la police d'écriture.
font-size permet de modifier la taille d'écriture du texte.

list-style permet de redéfinir les puces des listes.
float permet de donner un effet flottant (côte à côté).
margin permet de modifier les marges extérieures. Nous les remettons à zéro pour éviter et ainsi casser l'héritage.
padding permet de modifier les marges intérieures. Nous les remettons à zéro pour éviter et ainsi casser l'héritage.

border-top permet d'appliquer une bordure en haut.

border-bottom permet d'appliquer une bordure en bas.
border-left permet d'appliquer une bordure à gauche.
border-right permet d'appliquer une bordure à droite.
padding permet de créer de la marge intérieure.
width permet de définir une largeur.

text-align permet de gérer l'alignement du texte.

background permet de définir une couleur de fond.

color permet de définir une couleur de texte.

font-weight permet de définir la font du texte (gras).

background: linear-gradient permet de définir un fond dégradé entre deux couleurs.

cursor permet de définir un curseur de souris différent.

transform permet la transformation de la liste. scale(1.3); permet de l'augmenter de 30 %.

transition-duration permet de fixer la durée de transition.

Et voici le résultat

Le Résultat (final)
  • Projets
  • Utilisateurs
  • Stockage
  • Base de données
  • Gestion des droits
  • Pack 1
  • 199 € / mois
  • illimité
  • 125
  • illimité
  • oui
  • oui
  • Pack 2
  • 139 € / mois
  • 50
  • 90
  • illimité
  • oui
  • non
  • Pack 3
  • 59 € / mois
  • 10
  • 20
  • 2 GO
  • oui
  • non


Allez au chapitre suivant : 14. Les Liens Et Ancres

HTML CSS

1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web