Style de listes numérotées
Sergio
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
Thomas Mlynarczyk
> 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)
SAM
> 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
Sergio
> 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
>
>
> 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 !
Thomas Mlynarczyk
>>> <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;