Annenhver farge i <li>

[Vidi]

Er rimelig fersk innen CSS.

 

Jeg lurer på hvordan man får annenhver farge i en liste? Si at <li> 1 </li> har hvit bakgrunn, mens <li> 2 </li> har grå bakgrunn, altså vekselvis grå og hvit bakgrunn nedover.

[mikk-]

Det finnes ingen måte å gjøre dette på automatisk, verken i CSS2 eller CSS3 såvidt meg bekjent. Du må derfor sette på klasser.

<li class="l1">1</li>
<li class="l2">2</li>
-----
li.l1 { background: #fff; }
li.l2 {background: #ddd; }

 

Dette kan eventuelt gjøres med et serversidespråk som PHP.

[Vidi]

Det finnes ingen måte å gjøre dette på automatisk, verken i CSS2 eller CSS3 såvidt meg bekjent. Du må derfor sette på klasser.

<li class="l1">1</li>
<li class="l2">2</li>
-----
li.l1 { background: #fff; }
li.l2 {background: #ddd; }

 

Dette kan eventuelt gjøres med et serversidespråk som PHP.

 

Takk for oppklaringen. Innser at det blir alt for mye arbeid å gjøre dette for en liste med over 600 DVDer. Kanskje PHP-variantene utgjør et mer automatisert og effektivt alternativ?

 

Dessuten lurer jeg på hvordan jeg kan tilordne et passe mellomrom mellom disse overskriftene:

Year - Title - Director - Genre - Country - Language

 

Det samme gjelder for selve oppføringene:

1995 Leaving Las Vegas Mike Figgis Drama, Romance France, USA, UK English, Russian

 

I gammel HTML-ånd ønsker jeg en form for tabell som skiller teksten i hver sitt felt. Gjør man dette enklest ved å dele opp hele siden i 5-6 biter? Håper jeg gir et klart nok bilde av hva det er jeg prøver å oppnå.

[itsmebth]

Det er fremdeles lov å bruke tabeller, så lenge man bruker dem riktig

[mikk-]

Det er ikke bare lov å bruke tabeller. Tabeller er det eneste riktige.

[PHPdude]

Det finnes ingen måte å gjøre dette på automatisk, verken i CSS2 eller CSS3 såvidt meg bekjent.

 

CSS3 har funksjonalitet for akkurat dette.

Sjekk http://www.w3.org/TR/css3-selectors/ eller for å være mer nøyaktig: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

 

I praksis vil det si at man kunne gjort noe ala dette for å markere annenver rad forskjellig:

tr:nth-child(odd) { color:#ccc; }
tr:nth-child(even) { color:#eee; }

[mikk-]

Ah... Beklager, jeg visste ikke at man kunne bruke "odd" og "even" som parametere.

[PHPdude]

"odd" og "even" er bare et alias for "2n+1" og "2n", som igjen kan leses som "hvert andre element i rekken + 1" og "hvert andre element i rekken", hvor det første elementet i rekken har nummeret 1.

":nth-child"-selectoren er langt mer fleksibel enn odd/even, og alle mulige tilsvarende verdier kan oppgis for å markere/velge elementer basert på nummerering.

Spesifikasjonen inneholder en god del eksempler.

 

Måtte bare presisere litt

[arthoz]

Ellers kan du bruke xsl(t) også:

<xsl:if test="position() mod 2 = 1">

 

Kan lese mere på http://w3schools.com/xsl/default.asp

(du kan også sortere med det, så du slipper å bruke php/whatever til det)

[Garanti]

Hei!

Ved en tilfeldighet husket jeg denne posten, som kan løse ønsket ditt