Går det med css skapa en unordered list där varannan rad har en annan färg?
Ungefär som på itunes eller liknande.
Jag vill att så fort jag skapar en ul så ska det automatiskt bli en egen färg varannan rad så jag slipper koda varje rad manuellt.
"Randig" list
7 svar · 690 visningar · startad av stateless
Det går inte att lösa med css2...i css3 har du en selektor som heter nth-child som du kan använda så här:
ul li {background-color:#FFF}
ul li:nth-child(odd) {background-color:#DDD}
men stödet är fortfarande dåligt för css3
colione skrev:
Det går inte att lösa med css2
Ehm - varför skulle det inte gå att lösa menar du ? §e
Man kan t.ex. få alla <ul class="randig"> att bete sig så genom att göra såhär:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Ett av jarvklo exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
.randig li {background-color:white}
.randig li+li {background-color:yellow}
.randig li+li+li {background-color:white}
.randig li+li+li+li {background-color:yellow}
.randig li+li+li+li+li {background-color:white}
.randig li+li+li+li+li+li {background-color:yellow}
.randig li+li+li+li+li+li+li {background-color:white}
.randig li+li+li+li+li+li+li+li {background-color:yellow}
.randig li+li+li+li+li+li+li+li+li {background-color:white}
</style>
</head>
<body>
<ul class="randig">
<li>Fee</li>
<li>Fie</li>
<li>Foe</li>
<li>Fum</li>
<li>Fee</li>
<li>Fie</li>
<li>Foe</li>
<li>Fum</li>
</ul>
</body>
</html>
Det går alltså uppenbarligen att lösa med http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors ur CSS2 men det blir mycket kod och det funkar inte i MSIE6 - men det är ivf bättre stöd för den här metoden för närvarande eftersom den tillochmed funkar i IE7 ;)
Nackdelen är att du måste lägga upp så många "li+li"-regler (dvs antalet regler med en extra "+li" måste vara minst lika många som det största antal punkter du någonsin kommer att vilja lägga in i listan...)
Ett annat sätt att få randiga rader för "de flesta" är att lägga på ett fiffigt javascript som manipulerar stilinställningarna på varannan listrad - och att sedan "trigga" detta från body onload - men det är en annan historia (och kanske mer lämpad för ett annat forum) det ;)
Ett tredje sätt är tillgängligt om du skapar koden via ett CMS eller bloggverktyg - dvs att du generera en separat klass för varannan rad när koden skapas på serversidan... men det är *way* off topic i ett (X)HTML-forum som det här ;)
Lycka till :birp
Du menar att han flyttar det manuella kodandet av varje li från ett ställe till ett annat? Smart! ;)
Men jag har för mig att det var det han inte ville göra...
colione skrev:
Du menar att han flyttar det manuella kodandet av varje li från ett ställe till ett annat? Smart! ;)
Hmm...
Naturligtvis gör jag inte det (vilket torde framgå av det jag skrev om man bara läser det ordentligt)
Men OK då. Det behövs tydligen ändå ett förtydligande om nu det gick att missförstå (eller att välja att missförstå :bla ) så jag svarar på ovanstående citat för varje förslag:
Ja - Jag menar på fullt allvar att det inte är någon principiellt avgörande skillnad i att lägga in två CSS-rader i en extern stilmall (som jag tolkar Coliones CSS3-lösning) mot att lägga in ett antal (som den CSS2-lösning jag föreslår innebär ;) ).
Ja - Jag menar att en extern Javascript-fil som "triggar" på samtliga listor i ett dokument inte innebär speciellt mycket merarbete i HTML-koden det heller ;)
Om någon inte har hört talas om "Unobtrusive Javascripting" finns det beskrivet t.ex. här: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript och det är en utmärkt teknik för sådana här problemställningar så länge man kan tillåta sig att det "regraderar" till att inte bli randigt om besökaren har Javascript avslaget (något som betydligt färre tycks ha än de som har CSS3-stöd för närvarande för övrigt såvitt jag förstår §e )
och slutligen
Ja - Jag menar att ett vettigt CMS (ett som har fungerande "output filtering") kan hantera situationen utan att man behöver meka in en massa gojs i sin ursprungs-HTML eller överallt i sina mallar och sitt innehåll - men det är *fortfarande* en annan historia ;)
Bonus:
För att göra det kristallklart kan jag också passa på att påpeka att CSS-nycklingen till ".randig" inte är nödvändig (det går lika bra utan om man vill som jag tror de allra flesta förstår ;) )
Så - Nu hoppas jag att jag kunnat undanröja varje tvivel om att svaret gäller frågan
stateless skrev:
Jag vill att så fort jag skapar en ul så ska det automatiskt bli en egen färg varannan rad så jag slipper koda varje rad manuellt.
samtidigt som jag lyckats visa att det inte är omöjligt med CSS2. Eller går det att missförstå ytterligare? :moose
There, there jarvklo. Inget behov av att reagera så starkt. Det enda jag gav synpunkt på var att jag tyckte att det var hugget som stucket var man placerade den manuella kodningen av vad som ska synas på varje li. Metoden som du presenterar genom att använda adjacent selector ger ju i slutändan lika mycket jobb som att programmera varje rad manuellt (antingen via inline-styles eller via två classer, som jag tolkar det), om inte mer. Jag förstår att pudelns kärns i ditt inlägg är att han inte ska lösa det med adjacent selector - utan ska använda en annan metod. Men metoden du presenterar gör ju precis det han vill slippa - därav mitt syrliga svar på ditt ungefär lika syrliga svar till mig.
Jag svarade alltså på hans fråga plus det han lade till efter frågan, att slippa koda varje rad för hand.
Om du läser hela ursprugliga inlägget och inte rycker mitt svar ur sitt sammanhang kan du nog förstå både mitt första och andra svar. (Eller har vi ett fall av ett valt misstolkande från dig här?).
Dina övriga punkter håller jag dock med om...redan i ditt första inlägg. ;)
RED ->
Jag anser alltså att det är en principiell skillnad mellan din och min metod (css2 visavi css3), men inte mellan din metod och det han säger att han vill slippa.
colione skrev:
Metoden som du presenterar genom att använda adjacent selector ger ju i slutändan lika mycket jobb som att programmera varje rad manuellt (antingen via inline-styles eller via två classer, som jag tolkar det), om inte mer.
There there Colione Du missuppfattar uppenbarligen det jag skriver igen.
"Pudelns kärna" är att följande CSS2-tips fungerar och att det är enkelt att använda:
-
Lägg in CSS:en för li generellt (för "tillräckligt många" nivåer) i din globala stilmall
-
lägg därefter in så många listor du vill på dina sidor på din webbplats - samtliga kommer då att "randas" utan extra insats tack vare den CSS du då en gång för alla skapat, och oavsett vilken (CSS-fils-refererande) sida på webbplatsen de läggs in på.
Med det tillvägagångssättet (dvs skapa defaultvärden i CSS - Inget konstigt eller magiskt alls, bara "good practice") slipper man extraarbete vid inläggning av enskilda listor.
Jag vill att så fort jag skapar en ul så ska det automatiskt bli en egen färg varannan rad så jag slipper koda varje rad manuellt.
Check (y)
Det går inte att lösa i CSS2
Beeeep - Not true ;)
Punkt slut :bire
jarvklo skrev:
There there Colione Du missuppfattar uppenbarligen det jag skriver igen.
"Pudelns kärna" är att följande CSS2-tipset fungerar och att det är enkelt att använda:
Lägg in CSS:en för li generellt (för "tillräckligt många" nivåer) i din globala stilmall
lägg därefter in så många listor du vill på dina sidor på din webbplats - samtliga kommer då att "randas" utan extra insats tack vare den CSS du då en gång för alla skapat, och oavsett vilken (CSS-fils-refererande) sida på webbplatsen de läggs in på.
Med det tillvägagångssättet (dvs skapa defaultvärden i CSS - Inget konstigt eller magiskt alls, bara "good practice") slipper man extraarbete vid inläggning av enskilda listor.
Jag vill att så fort jag skapar en ul så ska det automatiskt bli en egen färg varannan rad så jag slipper koda varje rad manuellt.
Check (y)
Punkt slut :bire
Det var ungefär det här jag var ute efter.
Mig gör det inget att få lägga in den extrakoden i css-mallen eftersom varje lista jag skapar sen kommer att använda sig av den.
Har man långa listor med en del information blir det ju helt klart mer användarvänligt att göra såhär.
Tack!