28172 sujets

CSS et mise en forme, CSS3

Mise en forme liste ol

Bonjour

voila je voudrais changer
par exemple la couleur des nums d'une liste ol
car j'aimerais que seulement mes num soient gris et le texte de la liste reste noir
ou encore pouvoir mettre en fond de couleur seulement aux num

mais ca m'a l'air impossible?

qu'en pensez vous?

merci
Un peu moche, mais je vois pas trop comment faire autrement...

<ol>
    <li><span class="listElement">Elément</span></li>
    <li><span class="listElement">Elément</span></li>
    <li><span class="listElement">Elément</span></li>
</ol>


li {
    /* Ton code pour les puces */
    background-color : ...;
    color : ...;
}

li {
    /* Ton code pour le texte */
    background-color : ...;
    color : ...;
}

Modifié par Gothor (18 Jan 2012 - 15:23)
tres bien vraiment
oui c'est pas mal
le petit ennui que j'ai c'est que je ne veux pas toucher au html
vu que se sont des listes entrées avec tiny mce
donc ca dois se passer que dans le css

zut

mais merci ca me servira dans d'autre circonstances
Bonjour,

avec ton tiny_mce tu peux certainement appliquer un autre élément, genre strong ou em, pour obtenir la même possibilité de style.

Qu'en penses-tu ?
a écrit :
voila je voudrais changer
par exemple la couleur des nums d'une liste ol
car j'aimerais que seulement mes num soient gris et le texte de la liste reste noir
ou encore pouvoir mettre en fond de couleur seulement aux num

mais ca m'a l'air impossible?


Au contraire, c'est tout à fait possible. En fait, tu dois supprimer les numéros de la liste ol et les remplacer par des compteurs CSS que tu styleras ensuite.

Voilà le code que j'ai utilisé. Je crois avoir supprimé le code non nécessaire, mais je ne peux pas en être sûr sans tout revoir, et le code est éclaté entre plusieurs fichiers CSS. Enfin, le principe est là.

ol {
	padding-left: 20px;
	counter-reset: section;
}

ol li:before {
	content: counter(section) ""; /* éventuellement rajouter un point après les numéros entre les "" */
	counter-increment: section;
	margin-right: 15px;
	margin-left: -36px;
	color: red;
}

ol li:nth-child(-n+9):before { /* pour l'alignement des 9 premiers items de liste */
	margin-left:-28px;
}

ol li {
	font-family: "Courier New", monospace;
	font-size: 13px;
	text-align: left;
	list-style-type: none;
	margin-left: 15px;
}


Bon travail Smiley smile
Sujet clos
Aller à