CSS Débutant .com

Ordre & Listes désordonnéess

Vous pouvez définir une apparence pour vos liste (balise HTML <li> et </li>

• list-style-image: Liste avec une image
• list_style_position: Position de votre liste
• list_style_type: Apparence de la liste

A savoir

Dans ce chapitre, la notion d'héritage est appliquée. (voir notion d'héritage sur ce lien)

Vous pouvez utiliser une image devant une liste ordonnées ou non grâce à la propriété : list-style
list-style-image: url(path_to_image.gif, jpg or png);

A savoir

Si vous utiliser une image, vous pouvez utiliser la propriété "list-style-type" aussi car cela permet de déactiver l\image en cas de besoin

Voir un exemple

Voir le code CSS

ul {
padding: 10px 0 15px 20px;
margin:0;
}

li {
margin-bottom:5px;
list-style-image: URL(themes/default/images/star.png);
color: #3B6EBF;
}

Voir le code dans l'élément

<ul>
 <li>liste 1</li>
 <li>liste 2</li>
 <li>list 3</li>
</ul>

Vous pouvez aussi controller la position d'un liste grâce à la propriété : list-style-position
list-style-position: valeur;

Valeurs possibles :

• inside
• outside
• inherit

Voir un exemple

Vous pouvez mettre des effets grace au CSS avec la propriété : list-style-type
list-style-type: valeur;

Valeurs possibles :

• disc
• circle
• square
• decimal
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• none

Voir un exemple