Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Personnaliser ses listes (css inside)

Par celynette (celine moulard), le 30 mai 2011

Dans un précédent chapitre, nous avons appris à créer différentes listes. Tout ça c'est bien beau mais ça devient vite ennuyeux, des points, des chiffres, des points … Et si on changeait le style des puces?

Dans ce tutoriel, nous allons apprendre à personnaliser nos listes.

Prérequis

Avoir lu et maîtriser le chapitre précédent sur comment créer une liste en html.

Le retrait

On peut très bien changer la couleur, le type de police, la taille des caractères etc… mais ça , vous savez déjà le faire! Un color par ci, un font-size par là et le tour est joué passons tout ceci rapidement et intéressons-nous au retrait des listes.

Par défaut, une liste se présente comme ceci:

Le texte est automatiquement mis en retrait!

Parfois, on ne souhaite pas voir apparaître ce retrait, on va donc utiliser la propriété: list-style-position.

Voici les valeurs que peut prendre cette propriété:

  • inside : la liste n'est pas mise en retrait.
  • outside : la liste est mise en retrait (par défaut).

Parfois, lorsque l'on code une liste à l'intérieur d'un tableau, on a besoin de retirer le style de la puce. On est alors confronté à un vilain retrait que l'on aimerait bien pouvoir retirer. Un exemple en image:

On voit ici qu'il reste un retrait malgré le

list-style-type:none;

essayer de mettre

list-style-position:inside;

Ah malheur cela ne change rien?? Pour ce genre de cas, il est préférable de mettre un padding-left égal à 0 ;)

code css:

ul 
{
	margin-top:2px;
	margin-left:5px;
	padding-left:0;
}

Ce qui donne:

Le style de la puce

Je vous avais dit qu'on pouvait changer le style de la puce! « ah chouette! » me direz-vous! On commençait à s'ennuyer avec les points noirs affreux!

Pour changer le style de la puce, on utilise la propriété list-style-type.

Sachez que cette propriété peut prendre beaucoup de valeur différentes, certaines d'entre elles sont spécifiques aux listes ordonnées et d'autres aux non-ordonnées.

Voici la liste:

Pour les listes non ordonnées (<ul>) :

  • disc : un disque noir (il s'agit de la puce par défaut).
  • circle : un cercle.
  • square : un carré.
  • none : aucune puce ne sera utilisée.

Pour les listes ordonnées (<ol>) :

  • decimal : numérote la liste avec des nombres (1, 2, 3 .. )(notez qu'il s'agit de la puce par défaut)
  • decimal-leading-zero : il s'agit des nombres commençant par zéro (01, 02 ..).
  • upper-roman : numérotation romaine, en majuscules (I, II, III ..)
  • lower-roman : numérotation romaine, en minuscules (i, ii, ..)
  • upper-alpha : numérotation alphabétique, en majuscules (A, B, C, …)
  • lower-alpha : numérotation alphabétique, en minuscules (a, b, c, ..)
  • lower-greek : il s'agit de la numérotation alphabétique grecque.

Allez deux petits exemples pour la forme:

Ce qui donne:

Et, enfin:

Ce qui donne:

Bon je vous l'accorde, mettre des lettres grecques pour une liste de viennoiseries ça peut sembler étrange ^^ mais au moins ça a le mérite de sortir de l'ordinaire!

Image

Vous n'aimez pas les modèles que je vous ai présenté ci dessus? Qu'à cela ne tienne! Et si on mettait nos propres images? Cela vous tente déjà plus, avouez!

Pour mettre une image en guise de puce, on utilise la propriété: list-style-image. Chanceux comme vous êtes, cette propriété ne prend qu'une seule valeur et devinez quoi? C'est un lien!

On a donc dans notre code css:

Et cela pourrait donner quelque chose comme ceci: (J'ai fait deux exemples en un avec la transparence de l'image ;) )

Notez que l'image est au format .png, (ce format supporte bien la transparence, pratique quand la couleur de fond du site n'est pas blanche.) mais vous pouvez tout aussi bien utiliser les formats habituels (gif, png ou jpeg).

Attention néanmoins à la taille de vos images! Par soucis de clarté, il vaut mieux privilégier des images de petites dimensions (20*20px étant largement suffisant).

Merci CSS3

Prenons un exemple de liste, très simple. C'est une liste de films …

Liste de films

Et vous voulez mettre en gras une ligne sur deux. Comment feriez-vous cela?

… Hop hop hop, on arrête tout de suite! Je vous vois commencer à mettre des classes partout , CSS3 à penser à nous!

La pseudo-classe :nth-child()

C'est une pseudo-classe dite structurelle. Elle permet au développeur de pouvoir sélectionner certaines lignes sans avoir à parcourir toute la liste (ou tableau car oui!!! ça marche aussi pour les tableaux). Ici nous n'avons que 8 entrées mais si la liste en faisait 10 fois plus on se serait arraché les cheveux avec nos class ou nos id!

  • tr:nth-child(2n+1), représente toutes les lignes impaires d'une liste (ou tableau html)
  • tr:nth-child(odd), c'est la même chose que (2n+1), odd signifiant impair.
  • tr:nth-child(2n) représente toutes les lignes paires d'une liste (ou tableau html)
  • tr:nth-child(even), c'est la même chose que (2n), even signifiant pair.

Ce qui donne:

Je ne vous donne pas le code html, c'est une liste normale hein :) Et voilà le résultat grâce à UNE ligne de code:

De même (et là je ne parle pas que pour les listes) mais il est possible grâce à cette propriété d'alterner les couleurs de chaque ligne/paragraphe etc.

Un petit exemple vaut mieux qu'un long discours: Voici tout d'abord le code xhtml:

Une liste à 7 entrées.

Voici mon code css

Résultat en image:

Il existe beaucoup d'autres sélecteurs en css3, je vous recommande la lecture de ceci: http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#structural-pseudos pour plus d'infos.

Même si le css3 facilite bien des choses, il ne fonctionne pas encore sous tous les navigateurs. Si vous voulez jouer avec les sélecteurs que je viens de vous montrer, il vaudrait mieux utiliser Firefox.