Mam następujący problem:
<OL>
<LI></LI>
<LI></LI>
</OL>
Standardowo bez ostylowania wyświetla:
1.
2.

a chciałbym aby ta lista wyglądała tak (zamiast kropki - nawias):
1)
2)

Czy da się to jakoś osiągnąć w samym CSS dla OL/LI czy muszę się pobawić i
ręcznie numerować elementy?

--
Pozdrawiam
Mariusz

do góry

On 2010-03-30 13:55, Mariusz wrote:
> Mam następujący problem:
> <OL>
> <LI></LI>
> <LI></LI>
> </OL>
> Standardowo bez ostylowania wyświetla:
> 1.
> 2.
>
> a chciałbym aby ta lista wyglądała tak (zamiast kropki - nawias):
> 1)
> 2)
>
> Czy da się to jakoś osiągnąć w samym CSS dla OL/LI czy muszę się pobawić
> i ręcznie numerować elementy?

ol { counter-reset:mojalista; }
ol li { list-style:none; counter-increment:mojalista; }
ol li:before { content:counter(mojalista) ") "; }


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

On 2010-03-30 13:55, Mariusz wrote:
> Mam następujący problem:
> <OL>
> <LI></LI>
> <LI></LI>
> </OL>
> Standardowo bez ostylowania wyświetla:
> 1.
> 2.
>
> a chciałbym aby ta lista wyglądała tak (zamiast kropki - nawias):
> 1)
> 2)
>
> Czy da się to jakoś osiągnąć w samym CSS dla OL/LI czy muszę się pobawić
> i ręcznie numerować elementy?

ol { counter-reset:mojalista; }
ol > li { list-style:none; counter-increment:mojalista; }
ol > li:before { content:counter(mojalista) ") "; }


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

Użytkownik "Paweł Piskorz" <n...@p...nie?> napisał w wiadomości
grup >
> ol { counter-reset:mojalista; }
> ol > li { list-style:none; counter-increment:mojalista; }
> ol > li:before { content:counter(mojalista) ") "; }

Wielkie dzięki - o to chodziło:)

--
Mariusz

do góry

Użytkownik "Paweł Piskorz" <n...@p...nie?> napisał w wiadomości
grup dyskusyjnych:hosq5q$kdj$...@i...gazeta.pl...
> ol { counter-reset:mojalista; }
> ol > li { list-style:none; counter-increment:mojalista; }
> ol > li:before { content:counter(mojalista) ") "; }

Jeszcze jedno: czy da się tak zrobić żeby dłuższy tekst wewnątrz po
zawinięciu do nowej linii w<LI> był wyrównany
do linii powyżej?
tzn. jest tak
1) bardzo dlugi tekst, bardzo dlugi tekst, bardzo dlugi
tekst, bardzo dlugi tekst, bardzo dlugi tekst,


a chciałbym aby było:
1) bardzo dlugi tekst, bardzo dlugi tekst, bardzo dlugi
tekst, bardzo dlugi tekst, bardzo dlugi tekst,
^^^

--
Mariusz

do góry

On 2010-03-30 15:24, Mariusz wrote:
> Użytkownik "Paweł Piskorz" <n...@p...nie?> napisał w
> wiadomości grup dyskusyjnych:hosq5q$kdj$...@i...gazeta.pl...
>> ol { counter-reset:mojalista; }
>> ol > li { list-style:none; counter-increment:mojalista; }
>> ol > li:before { content:counter(mojalista) ") "; }
>
> Jeszcze jedno: czy da się tak zrobić żeby dłuższy tekst wewnątrz po
> zawinięciu do nowej linii w<LI> był wyrównany
> do linii powyżej?

Wypozycjonuj ol > li:before, np. korzystając z position:absolute;


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

On 2010-03-30 15:24, Mariusz wrote:

> Jeszcze jedno: czy da się tak zrobić żeby dłuższy tekst wewnątrz po
> zawinięciu do nowej linii w<LI> był wyrównany
> do linii powyżej?
> tzn. jest tak

> a chciałbym aby było:
> 1) bardzo dlugi tekst, bardzo dlugi tekst, bardzo dlugi
> tekst, bardzo dlugi tekst, bardzo dlugi tekst,

ha

ol > li:before {content:counter(mojalista) ") "; text-indent: -1em;
display: inline-block; }

to naiwne - ale moze wystarczy

do góry

Użytkownik "satellite" <p...@g...pl> napisał w wiadomości grup
dyskusyjnych:hovndh$l9m$...@i...gazeta.pl...
> ol > li:before {content:counter(mojalista) ") "; text-indent: -1em;
> display: inline-block; }
>
> to naiwne - ale moze wystarczy

Rewelacja - ja dołożyłem jeszcze marginesy takie jakich potrzebowałem i
twardą spację(#160) i wyrównanie przy liczniku to wszystko jest tak jak
chciałem(dodatkowo licznik wyrównany do prawej) :
ol{
counter-reset:mojalista;
margin:30px;
}
ol > li {
list-style:none;
counter-increment:mojalista;
margin-left: 30px;
}
ol>li:before{
content:counter(mojalista) ") ";
text-indent: -30px;
display: inline-block;
text-align: right;
}

--
Mariusz

do góry

W dniu 2010-04-01 12:13, Mariusz pisze:
> Użytkownik "satellite" <p...@g...pl> napisał w wiadomości grup
> dyskusyjnych:hovndh$l9m$...@i...gazeta.pl...
>> ol > li:before {content:counter(mojalista) ") "; text-indent: -1em;
>> display: inline-block; }
>>
>> to naiwne - ale moze wystarczy
>
> Rewelacja - ja dołożyłem jeszcze marginesy takie jakich potrzebowałem i
> twardą spację(#160) i wyrównanie przy liczniku to wszystko jest tak jak
> chciałem(dodatkowo licznik wyrównany do prawej) :

A ta "twarda spacja" to w jakim celu?

> ol{
> counter-reset:mojalista;
> margin:30px;
> }
> ol > li {
> list-style:none;
> counter-increment:mojalista;
> margin-left: 30px;
> }
> ol>li:before{
> content:counter(mojalista) ") ";
> text-indent: -30px;
> display: inline-block;
> text-align: right;
> }

To teraz jeszcze sprawdź jak to wygląda w kilku przeglądarkach :D Może
nie do końca działać tak, jak chcesz.

--
Peter

do góry

Użytkownik "Peter May" <p...@o...pl> napisał w wiadomości grup
dyskusyjnych:hp241i$lri$...@n...onet.pl...
> W dniu 2010-04-01 12:13, Mariusz pisze:
>
> A ta "twarda spacja" to w jakim celu?

Aby odsunąć tekst wewnątrz LI od nawiasu w numeracji - zwykła spacja nie
wiem czemu "znika"...

Sprawdziłem w IE, FF i Operze i nie zauważyłem żadnych różnic:)

--
Pozdrawiam
Mariusz

do góry