Style de listes numérotées

Sergio schrieb:

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 ?

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)

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>
<li>...</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

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>
<li>...</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

SAM schrieb:

<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>...</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)