CSS lista. A1 A2 A3, B1 B2 B3

Hej,

jag försöker lära mig hur man kan styra listor med CSS. Går det att lägga på ett prefix på en lista så att lista A heter A1, A2, A3 och att lista B heter B1, B2, B3 osv...

:stud

Och så undrar jag om man kan får listan (bullet:A1) att vara 20px hög medans texten i listan är tex 10px hög.

Än så länge är inte ::marker implementerat nånstans (vad jag vet), så man får använda vanliga ::before.

ol { list-style-type:none; counter-reset:a; }
li::before { content:"A" counter(a) " "; counter-increment:a; font-size:2em; }

Petnoga som jag är undrar jag om det inte ska vara **:**before, alltså med bara ett kolon?

Fast kollar man på w3 står det ::before för CSS 3 men det är ju :before som gäller i CSS 2/2.1. Vilket är det som gäller eller spelar det ingen roll?

Som du säger är det ::before enligt Selectors level 3 och :before enligt CSS 2.1. Webbläsare borde förstås ha stöd för båda (som Selectors kräver), så i praktiken spelar det ingen roll. Anledningen till att det ändrades till två kolon för pseudo-element är för att man ska kunna se skillnad på pseudo-element och psuedo-klasser utan att behöva känna igen nyckelordet...

Okaj, tackar för förklaringen. :)

Tack för era svar.

Men jag får det inte att fungera. Får inte några bullets alls. Ser bara en lista på 1 2 3.

ol{
list-style-type:none;
counter-reset:a;
}
li::before{
content:"A" counter(a) " ";
counter-increment:a;
font-size:2em;
}

<ol>
<li> 1
<li> 2
<li> 3
</ol>

Kör docktype strict.

Fann även

Note: If "display: none" is used you should not be able to reset the counter. If "visibility: hidden" is used you should be able to reset the counter.

men jag vet inte vad det betyder. :stud

Mvh
Mattias

Hej Mattias!

Prova att använda en annan webbläsare än Microsoft Internet Explorer så ser du att det inte är något fel på din kod.

Du har helt enkelt råkat hamna på fel sida av "the bleeding edge" iom att det du testar inte stöds av MSIE7 :bire

w333 du dyker verkligen upp lite överallt ;)

Ok. Najs då vet jag.

Ligger lågt med detta tillsvidare. Men det är klart önskvärt att kunna hantera listor på detta sätt. Läste att IE8 är på väg: http://www.idg.se/2.1085/1.137701

Om jag får följa upp på samma spår, finns det något mer dynamiskt CSS sätt att uppnå nedan. Det jag skulle vilja underlätta är att lägga in nya stycken i min lista (den är lång) utan att behöva ändra alla A3, A4 numreringar.

<a name="A1"></a> A1 - Här kommer rubriken för stycke A1
Text text text
Text text text
Text text text
Text text text

<a name="A2"></a> A2 - Här kommer rubriken för stycke A2
Text text text
Text text text
Text text text
Text text text

Mattias Nordin skrev:

w333 du dyker verkligen upp lite överallt ;)

Hehe - ja, det var verkligen trevligt i lördags :bire

Men jag förstår inte riktigt hur du menar med det där sista, kan du beskriva det med andra ord och kanske ett annat exempel ?

Ha ha... menade bara i andra trådar här på forumet. Bra jobbat av någon som bara hunnit posta 11 inlägg och lyckats pricka flera av mina. (y)

OK - Tack - Jag trodde ett tag där att du också var med bland dem som hävdar att jag är någon annan :)

Men jag förstår faktiskt inte det där sista du skrev iallafall ;)

Mattias Nordin skrev:

Om jag får följa upp på samma spår, finns det något mer dynamiskt CSS sätt att uppnå nedan. Det jag skulle vilja underlätta är att lägga in nya stycken i min lista (den är lång) utan att behöva ändra alla A3, A4 numreringar.

<a name="A1"></a> A1 - Här kommer rubriken för stycke A1
Text text text
Text text text
Text text text
Text text text

<a name="A2"></a> A2 - Här kommer rubriken för stycke A2
Text text text
Text text text
Text text text
Text text text

Hur menar du? Kan du formulera det med andra ord eller med ett annat exempel också ?

Jag har en massa stycken text som jag vill ha <a name= länkar till. Alla stycken har ett namn som tex stycke A1, B38.

För det första så skulle jag önska att det gick att använda <li> för att skapa mina A1, A2 bullets och det verkar fungera i moderna webläsare (exklusive IE7) enligt zcorpan.

Undrar nu om man kunde baka ihop den funktionen med att få dynamiska <a name länkar. Som jag har gjort nu så är alla <a name namn hårdkodade och blir drygt att ändra alla <a name namn om jag vill infoga ett nytt stycke som ska ligga mellan A2 och A3. Då behöver jag byta namn på alla länkar efter denna (om jag envisas med att de ska ha samma namn som min bullet).

Exempel på mina stycken:

A1

A2

A3

...

A44

A45

B1

B2

B3

osv.

Vill då att det ska gå att skapa en direktlänk till #A3.
(enligt principen http://www.webforum.nu/showthread.php?p=1390573#post1390573)

Mvh
Mattias Nordin