---
title: "Färga varannan rad"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/182696-färga-varannan-rad"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "mackanz"
published: "2010-03-07T23:11:49.000Z"
updated: "2010-03-15T16:44:40.000Z"
replies: 13
views: 1285
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/182696-färga-varannan-rad"
---

# Färga varannan rad

## #1 — mackanz, 2010-03-07T23:11Z

Vet ej om jag postar rätt men denna avdelning känns mer rätt än ASP.

Det är så att jag har en massa länkar i en databas som jag vill loppa ut.
Nu vill jag att varannan rad ska vara färgad.

Hur löser man detta när man har en sajt byggd med css och divar.

Jag har detta på en annan sida men där är det gjort med tabeller och det vill jag ju inte ha här. 

Finns det något bra sätt att lösa detta på?

Permalänk: https://www.webforum.nu/p/182696

## #2 — Pedda, 2010-03-07T23:30Z

Du får ha två olika stilar i din css.
Och när du loopar så sätter du dina olika stilar på divarna.

Permalänk: https://www.webforum.nu/p/2230577

## #3 — mackanz, 2010-03-10T18:15Z

Hur gör jag det kodmässigt? Jag förstår inte riktigt.

Själva loopen ser ut så här idag:

```

<table>

<%
vColor = Array("#E0E9F1", "#ffffff")
i = 0
do while not rs.eof
%>

<tr bgcolor="<%=vColor(i Mod 2)%>">
<td class="brodtext"><a href="<%=rs("fld_url")%>" target="_blank"><%=rs("fld_namn")%></a></td>
</tr>

<%
rs.movenext
i = i + 1
loop
rs.Close
%>
```

Hur gör jag med själva divvarna???

Permalänk: https://www.webforum.nu/p/2230746

## #4 — erciz, 2010-03-10T18:27Z

> **[mackanz skrev:](https://www.webforum.nu/p/1500050)**
>
> Hur gör jag med själva divvarna???

Varför ska du ha divvar? det ser ju ut som att du har tabulär data, då är det helt rätt som du har gjort. Annars är det väl bara att byta ut dina **tr** mot **div**

Permalänk: https://www.webforum.nu/p/2230747

## #5 — mackanz, 2010-03-10T18:49Z

Jag vill ogärna ha tabeller. Och köra med divar för att få det så användarvänligt som möjligt med ev validering i slutändan. 

Kan jag bara ersätta mina \<tr\> med div rakt av eller???

Hur skulle Du ha gjort???

Permalänk: https://www.webforum.nu/p/2230753

## #6 — nitro2k01, 2010-03-10T18:51Z

Typ:

```
<%
vColor = Array("even", "odd")
i = 0
do while not rs.eof
%>

<div class="zebra <%=vColor(i Mod 2)%>">
<div class="brodtext"><a href="<%=rs("fld_url")%>" target="_blank"><%=rs("fld_namn")%></a></div>
</div>

<%
rs.movenext
i = i + 1
loop
rs.Close
%>
```

Notera hur divven ifråga får två olika klassnamn.
Du kan även ange regler specifikt t ex för element inuti ett annat element med ett visst klassnamn. 

```
.zebra{
  /* Regler som gäller alla zebra-element */
}
.zebra a{
  /* Regler som gäller länkar i zebra-element */
  font-family: arial;
  font-size: 18px;
}
.even{
  /* Regler som gäller jämna element */
  background-color: #E0E9F1;
}
.odd{
  /* Regler som gäller udda element */
  background-color: #FFFFFF;
}
.even a{
  /* Regler som gäller länkar i jämna element */
  color: #606971;
}
.odd a{
  /* Regler som gäller länkar i udda element */
  color: #7F7F7F;
}
```

Även om du fortsätter använda en tabell som erciz föreslår kan du använda samma princip. (Och alltså sätta klass-namn på divvarna.)

Permalänk: https://www.webforum.nu/p/2230754

## #7 — mackanz, 2010-03-10T19:02Z

Tackar tackar. Ska testa detta. Vad jag förstått ska man ju undvika tabeller så långt det är möjligt eller har jag fel? 

nitro2k01: Ska kolla på din kod och leka lite med den för att få in förståelsen.
Men det verkar inte vara speciellt svårt.

Permalänk: https://www.webforum.nu/p/2230755

## #8 — erciz, 2010-03-10T19:08Z

> **[mackanz skrev:](https://www.webforum.nu/p/1500062)**
>
> Tackar tackar. Ska testa detta. Vad jag förstått ska man ju undvika tabeller så långt det är möjligt eller har jag fel?

Nejdå. Tabeller SKA användas till just tabeller. T.ex. om du har en liten tabell med befolkninsstatistik eller liknande. Tabeller ska däremot absolut inte användas för layout, så som det gjordes mycket förut. Då är det bättre att använda divvar och CSS.

Permalänk: https://www.webforum.nu/p/2230756

## #9 — M@gnus, 2010-03-11T07:07Z

Jag brukar slänga in färgningen i loopen

```
	Do While Not Recset2.EOF

	nummer = nummer + 1
	If nummer Mod 2 = 0 Then
	bgcolor = "E6E6E6"
	Else
	bgcolor = "F5F5F5"
	End If
```

och sedan

```
bgcolor="#<% = bgcolor %>
```

i tabellraderna

Permalänk: https://www.webforum.nu/p/2230790

## #10 — onkelborg, 2010-03-11T09:54Z

Rekommenderas nog inte, knöligt med en massa ställen att ändra färg på när det blir aktuellt..

Permalänk: https://www.webforum.nu/p/2230804

## #11 — Pedda, 2010-03-11T10:16Z

> **[Pedda skrev:](https://www.webforum.nu/p/1499853)**
>
> Du får ha två olika stilar i din css.
> Och när du loopar så sätter du dina olika stilar på divarna.

nitro2k01 gav ett utförligt exempel på vad jag menade.   (y)
Så gör jag iaf.

Permalänk: https://www.webforum.nu/p/2230807

## #12 — Alling, 2010-03-14T15:23Z

Enkelt med CSS

Det här är faktiskt väldigt enkelt, och turligt nog lärde jag mig det idag, så jag kan hjälpa dig. (Du får anpassa detta till ASP, jag kan inte det.)

Skriv så här i HTML-koden:

\<div class="exempel"\>
  \<div\>Rad 1\</div\>
  \<div\>Rad 2\</div\>
  \<div\>Rad 3\</div\>
  \<div\>Rad 4\</div\>
\</div\>

I stylen skriver du:

.exempel div:nth-child(even) {background-color:red;}
.exempel div:nth-child(odd) {background-color:blue;}

Detta kommer att göra varannan rad röd (even = jämn) och varannan blå (odd = udda). Den första kommer vara blå eftersom den är nummer 1, alltså udda.  :)

Nu visade jag ju hur man gör med vanlig HTML och CSS, men det borde vara enkelt att anpassa till ASP, som jag tyvärr inte kan.

Permalänk: https://www.webforum.nu/p/2230998

## #13 — nitro2k01, 2010-03-14T15:44Z

Alling: Välkommen till webForum. :)
nth-child är läckert, men stödet för det är lite tunt för tillfället. T ex saknas stöd för det i IE och orh FF fram till 3.0 och andra bläddrare tolkar attributet fel i vissa fall. Jag skulle personligen vänta ett par år med att använda nth-child seriöst.

Permalänk: https://www.webforum.nu/p/2231000

## #14 — Alling, 2010-03-15T16:44Z

> **[nitro2k01 skrev:](https://www.webforum.nu/p/1500358)**
>
> Alling: Välkommen till webForum. :)
> nth-child är läckert, men stödet för det är lite tunt för tillfället. T ex saknas stöd för det i IE

Tack!

Suck... jag blir veeerkligen förvånad över att IE inte stöder det. -.-

Det är ju så tråkigt om man försöker göra korrekt XHTML och CSS ... man tvingas alltid fulkoda eller på något annat sätt gå runt IE.  (n) (n) (n) Bara för att DEN måste vara den största webbläsaren... då kunde den väl åtminstone vara hyfsad... men nej, det kan Microsoft inte tillåta. Hatar de W3C?

Permalänk: https://www.webforum.nu/p/2231050

---

Tråden på webben: https://www.webforum.nu/amne/html-css/182696-färga-varannan-rad