Färga varannan rad

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

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???

mackanz skrev:

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

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???

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.)

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.

mackanz skrev:

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.

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

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

Pedda skrev:

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.

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.

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.

nitro2k01 skrev:

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?