Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

10 octobre 2008 5 10 /10 /octobre /2008 06:32

Comme promis, voici un petit tutoriel CSS pour modifier l'aspect des puces d'un blog.
Tout d'abord il faut aller dans le CSS (si vous vous demandez ce qu'est le CSS, il faut aller faire un petit tour par là: Mais c'est quoi le CSS).


Pour changer la couleur d'une puce :
Remplacer #FFFFFF par la couleur hexadécimale de votre choix.
li {color:#FFFFFF; }


Pour avoir une forme particulière de puce :
Rond :
li { list-style-type: disc; }

Carré :
li { list-style-type: square; }

Cercle :
li { list-style-type: circle; }

 

Pour mettre un ordre :
Numéro :
li { list-style-type: decimal; }

Nombre romain en minuscule :
li { list-style-type: lower-roman; }

Nombre romain en majuscule :
li { list-style-type: upper-roman; }

Lettre majuscule :
li { list-style-type: upper-alpha; }

Lettre minuscule :
li { list-style-type: lower-alpha; }


Et le plus intéressant : avec une image de votre choix (jpg, gif, gif animé, png...)
li { list-style-image : url(http://www.urldelapuce.png) ; }


Pour changer l'affichage d'une puce au passage de la souris (roll-over) :
Il suffit de faire le même code que précédemment, mais en ajoutant la définition « hover »
li:hover { ... ; }

 


Quelques exemples :


Maintenant nous allons appliquer ces informations avec quelques exemples :



Je souhaite que mes puces soient blanches et carrées. Fixes au passage de la souris :


li { list-style-type: square; color:#FFFFFF; }

Exemple de ce blog : http://photo.graph.over-blog.com





Je souhaite faire un blog avec des puces représentées par l'image de mon choix et qu'elles restent fixes au passage de ma souris :

li {list-style-image: url(http://wwwwmonsite.com/puce.png);}

Exemple emprunté sur le site http://luluetberlu.over-blog.com







Je souhaite que mes puces soient une liste avec des chiffres romains en majuscules rouges et qu'au passage de la souris les puces se transforment en image de mon choix :

li { list-style-type: upper-roman; color :#FF0000 ;}
li:hover {list-style-image: url(http://wwwwmonsite.com/puce.png);}

 

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

BeyonceMB 28/12/2009 21:41


Interessant sa j'aime beaucoup ce genre d'organisation sa rend beau franchement merci


dinou 10/03/2009 23:19

bonjour,

savez vous comment on affiche les puces car moi elles ne s affichent pas du tout ?

merci d avance

Christelle Vinsonneau 11/03/2009 13:21


Tu devrais vérifier qu'il n'y ait pas une ligne (ou plusieurs) de code de ce genre :
list-style-type: none

et si elle est présente (ou plusieurs) modifie-la (les) comme expliqué dans l'article.
Ca devrait marcher !


kéline 11/12/2008 18:03

merci Christel pour cet article, au besoin je reviendrai sur ton blog si je veux changer quelque chose :)))
bonne soirée

Christelle Vinsonneau 14/12/2008 13:03


reviens quand tu veux...


Joëlle 10/12/2008 13:42

Bonjour, je suis en mode avancé, je travaille à mon design depuis mon changement de css en version 2.
l'exemple de luluberlu est joli ! mais je me demande : "c'est quoi une puce ? " Merci

Christelle Vinsonneau 14/12/2008 13:02


J'espère que mon article "c'est quoi une puce ? " http://photo.graph.over-blog.com/article-25659534.html aura répondu à tes
questions...


Tasnime 27/10/2008 12:20

Bonjour,
Je voudrais savoir comment faire pour que les puces soient affichés à droite, aussi comment faire pour ne pas les afficher?
Merci d'avance.

Christelle Vinsonneau 02/11/2008 14:47


Désolée de ne pas t'avoir répondue plus tôt, mais j'étais absente.
Je te remercie de ta question, car effectivement ce n'est "normalement" pas possible de mettre les puces à droite. Mais j'ai trouvé une solution que tu peux trouver ici http://photo.graph.over-blog.com/article-24339095.html