18073 sujets

Questions générales et questions de débutants

[Résolu]Style d'un liste <ul>

Bonjour

Voila une bonne 1h que je cherche a mettre une puce différente pour le premier élément d'un liste <ul>...
En vérité une image pour illustrer le premier lien de mon menu

Mais comment faire sela en CSS "proprement"??

merci d'avance
Modifié par pere_c@stor (13 Apr 2005 - 10:39)
En mettant un id sur le 1er élément et en stylant cet id avec list-style-image .

HTML :
<ul>
<li id="premier_element">1er element</li>
<li>2e element</li>
<li>3e element</li>
<li>4e element</li>
</ul>


CSS :
#premier_element { 
list-style-image: url("http://url.de/ton/image.png");
}
Administrateur
Bonjour et bienvenue sur ce Forum,

pour distinguer un élément des autres sans changer sa nature (un item de liste), tu dois lui attribuer un petit nom (soit class soit id, selon que cet élément sera unique ou pas Tuto Alsa sur la différence entre class et id)
<ul class="special"> et ensuite y faire référence explicitement dans la déclaration CSS, c'est-à-dire qu'après avoir défini le design de tous les ul de ta page, tu dois rajouter/modifier celui ou ceux qui ont cette class/id:
.special {}
.special u {}
#special ul{}
Pas mal de possibilités, voir le tuto et la doc du W3C sur la manière d'y faire référence pour ça Smiley cligne
Modifié par Felipe (12 Apr 2005 - 15:37)
Il y a plus simple, en utilisant la pseudo-classe :first-child.

Il suffit d'écrire

li:first-child {list-style-type: square}


par exemple, pour que le code suivant

<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>

s'affiche avec un carré comme première puce, puis des puces normales ensuite.

Mais ôtez-moi d'un doute: cela marche-t-il sous IE? (ce n'est pas une question trollesque, je ne peux effectivement pas le tester, car je suis sous Linux: ça marche sous Firefox et Konqueror, en tous cas...)

Consulter la recommandation pour plus de détails sur les sélecteurs CSS et la pseudo-classe first-child...
Modifié par Gilles (12 Apr 2005 - 17:35)
Merci Gilles

Je viens jsute de tester ta solution que je préfère aux autres mais le hic c'est qu'elle ne marche pas sous IE tanpis je l'adopte quand même
puisque j'utilise un CMS et qu'il préférable de ne toucher qu'à la feuille de style!
J'aurais une bonne raison de faire apparaître sur mon site:
"Optimisé pour Firefox" Smiley lol

Smiley cligne
Modifié par pere_c@stor (12 Apr 2005 - 22:31)
Sujet clos
Aller à