Style de listes numérotées

Le
Sergio
Un truc tout con :

dans une liste numérotée :
<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li></li>
</ol>

Comment contrôler le style des nombres générés ?

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Thomas Mlynarczyk
Le #23586671
Sergio schrieb:
dans une liste numérotée :
<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
</ol>

Comment contrôler le style des nombres générés ?



Avec CSS et list-style-type:

list-style-type: { circle | disc | square | armenian | decimal |
decimal-leading-zero | georgian | lower-alpha | lower-greek |
lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman |
none | inherit } ;

Thomas

--
Ce n'est pas parce qu'ils sont nombreux à avoir tort qu'ils ont raison!
(Coluche)
SAM
Le #23588061
Le 20/07/11 20:42, Thomas Mlynarczyk a écrit :
Sergio schrieb:
dans une liste numérotée :
<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
</ol>

Comment contrôler le style des nombres générés ?



Avec CSS et list-style-type:

list-style-type: { circle | disc | square | armenian | decimal |
decimal-leading-zero | georgian | lower-alpha | lower-greek |
lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman |
none | inherit } ;

Thomas



Je pense que Sergio voulait qque chose de plus sophistiqué ? !

comme les chiffres en
- upper-latin (fastoche)
- times
- rouge
- 2 fois + grands
(et les textes en arial black)

et je n'y suis pas parvenu :-(

la règle :

LI:before {
display: marker;
marker-offset: 8em;
counter-increment: compteur;
content: counter(compteur, upper-roman);
font-family: times;
font-size: 26px;
color: red;
width: 6em;
text-align: left;
}

n'ayant pas donné le résultat attendu, espéré.

--
Stéphane Moriaux avec/with iMac-intel
Sergio
Le #23588191
Le 21/07/2011 01:20, SAM a écrit :
Le 20/07/11 20:42, Thomas Mlynarczyk a écrit :
Sergio schrieb:
dans une liste numérotée :
<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
</ol>

Comment contrôler le style des nombres générés ?



Avec CSS et list-style-type:

list-style-type: { circle | disc | square | armenian | decimal |
decimal-leading-zero | georgian | lower-alpha | lower-greek |
lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman |
none | inherit } ;

Thomas



Je pense que Sergio voulait qque chose de plus sophistiqué ? !

comme les chiffres en
- upper-latin (fastoche)
- times
- rouge
- 2 fois + grands
(et les textes en arial black)

et je n'y suis pas parvenu :-(



C'est tout à fait ça !
On peut mettre des cercles des carrés, y'a même des astuces pour faire une numérotation avec des images, mais pas moyen d'avoir des
nombres en Arial 8pt vert à pois roses !

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Thomas Mlynarczyk
Le #23594391
SAM schrieb:
<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
</ol>





LI:before {
display: marker;
marker-offset: 8em;
counter-increment: compteur;
content: counter(compteur, upper-roman);
font-family: times;
font-size: 26px;
color: red;
width: 6em;
text-align: left;
}

n'ayant pas donné le résultat attendu, espéré.



Je crois avoir lu que tout les navigateurs ignorent "marker" et
"marker-offset". Alors, il faut s'en passer:

li:before {
display: inline-block;
counter-increment: compteur;
content: counter(compteur, upper-roman) ".";
font-family: times;
font-size: 26px;
color: red;
width: 3em;
text-align: right;
margin-left: -3.2em;
padding-right: .2em;
}

li {
list-style-type: none;
margin: 0;
padding: 0;
}

Ca marche avec Opera. Firefox 3 ignore le "counter-increment". Mais avec
quelques <span> rajoutées, on peut y arriver:

<ol>
<li><span>Premier<br>Thomas</span></li>
<li><span>Deuxième</span></li>
<li><span>Troisième</span></li>
</ol>

li {
list-style-type: upper-roman;
font-family: times;
font-size: 26px;
color: red;
width: 6em;
text-align: left;
}
li span {
font-size: 14px;
color: black;
}

Thomas

--
Ce n'est pas parce qu'ils sont nombreux à avoir tort qu'ils ont raison!
(Coluche)
Publicité
Poster une réponse
Anonyme