La méthode pour personnaliser vos listes numérotées et imbriquées avec CSS3

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

CSS3 permet de complètement personnaliser l’affichage de vos listes. Vous allez avoir des listes vraiment sympas pour vos sites web!

Tout est dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

La méthode pour personnaliser vos listes numérotées et imbriquées avec CSS3

Bonjour à tous et bienvenu sur Développement Facile.

Ensemble on continue les cours dédiés à CSS 3, et là vous allez apprendre à utiliser les listes avec CSS 3.

Définir le type de puce de la liste

Comment les utiliser ? Rappelez-vous dans un cours précédent avec les balises ol, li, ul, je vous ai expliqué les listes numérotées, les listes imbriquées, et je vous ai dit qu’avec CSS il est possible de les personnaliser, donc il suffit d’utiliser la propriété CSS list-style-type : disc pour un cercle plein, circle pour un cercle vide, et square pour un carré. Vous pouvez afficher des décimales 1, 2, 3, 4, des décimales leading zéro : 01, 02, 03, 04, en chiffre romain donc en majuscules, upper-roman, lower-roman en majuscules, upper-alpha en majuscules, lower-alpha en lettres minuscules. Vous avez de multiples possibilités avec CSS, pour personnaliser la numérotation de vos listes, ou les puces correspondant à vos listes.

Je vous ai mis un exemple qui reprend un code source, une page HTML qui reprend les différents types de listes, donc avec le cercle, le cercle vide, le carré, les décimales, les lettres romaines, et les alphas en majuscules et en minuscules. Vous n’avez qu’à copier-coller ce code source dans votre fichier HTML pour voir le résultat graphique, tout simplement.

Choisir une image pour la puce

Vous pouvez également définir une image pour une puce, c’est là où ça devient intéressant, c’est-à-dire, vous pouvez mettre un petit logo qui représente votre puce, donc une image au format PNG, JPEG, GIF comme vous le souhaitez, vous utilisez la propriété list-style-image en renseignant l’URL, soit l’URL complète, avec le nom de domaine, soit directement le fichier image, ça dépend comment vous avez organisé votre site Internet.

Je vous ai mis un exemple de code source tout simple, pour utiliser des puces images avec vos listes, donc à vous de le tester, et surtout à vous de l’adapter dans vos sites Internet tout simplement.

L’option retrait

Vous pouvez également définir le retrait de la puce, le retrait dans votre liste, c’est list-style-position, outside c’est par défaut, inside. La valeur outside c’est la présentation classique des listes à puces, avec toutes les lignes de l’élément en retrait par rapport à votre liste, alors que la valeur inside ça met un retrait uniquement sur le premier élément et les autres éléments viennent s’aligner avec le marqueur, donc par défaut ça fait ça une liste, alors que avec inside ça fait TAC, TAC, tout simplement, une manière visuelle.

Je vous ai mis également un exemple avec deux listes différentes, une en list-style-outside, et une autre en list-style-inside, comme ça visuellement vous verrez très bien outside et inside ce que ça donne sur une liste à puce. Vous n’avez qu’à reprendre le code source et de tester directement dans votre page web.

Votre pan d’actions !

Maintenant c’est à votre tour de créer des listes, soit avec des cercles, des carrés, des numérotations romaines, numérotation alphabétiques, ou utilisez des images, c’est très intéressant d’utiliser des images pour vos listes, vous pouvez mettre des petits logos, ce que vous voulez. Retrouvez un exemple de code source en téléchargement sous ce cours vidéo, si vous avez des questions, posez-les également sous ce cours vidéo, et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source CSS3

Voici un exemple de code CSS3 avec des listes personnalisées.

Downloads

Montrez-moi vos listes personnalisées

Utilisez la zone commentaires, pour partager le code source de vos listes personnalisées.

Créez des Sites Web Magnifiques avec la Formation Gratuite CSS3 Facile !

Apprenez comment utiliser les nouveautés de CSS3, les balises supplémentaires, la gestion simplifiée des blocs div...