[html/css] odd even afwisseling

[Grijze Vos]

Maar dan zonder classes te definieren. Is dat mogelijk?
M.a.w. is er een control-mechanisme om op die manier te tellen in html en/of CSS. (M.b.v. CSS selectors ofzo.)

Ik wil namelijk forum-posts gaan cachen, maar als er een gedelete wordt dan moet de rest semi-dynamisch van kleur kunnen veranderen.

[Verwijderd]

Kleuren om en om in een tabel met PHP?
[rml][ php] totale inhoud database-tabel in html-tabel zetten[/rml]
[rml][ CSS] Tabelkolommen kleuren[/rml]

[Verwijderd]

Hij heeft het over rijen, heb ik zo het gevoel (die bug in Mozilla waarnaar gerefereert wordt is trouwens gefixed, bug 4510 was het geloof ik).

CSS3 heeft er wel pseud-class selectors voor, ':nth-child', maar de ondersteuning blijft uit

[coubertin119]

http://www.alistapart.com/articles/zebratables/

Bovendien kan je ook altijd een behavior'tje schrijven die dit doet, dan blijft styling altijd rechtstreeks accessible via de stylesheet .

[Grijze Vos]

Het gaat min of meer over rijen ja. Ik gebruik een container div voor elke post, dus het is eigenlijk een afwisseling van div's. Maar het idee is hetzelfde. Een eigen behaviour schrijven, het enige wat ik daarvan weet is dat ze in een .htc file worden gepropt. Misschien wel leuk om te doen.

Dalijk ff googlen dan maar, is dat ook gewoon beschikbaar onder Moz/FF?

[disjfa]

Grijze Vos schreef op 20 maart 2004 @ 12:17:
Dalijk ff googlen dan maar, is dat ook gewoon beschikbaar onder Moz/FF?

htc is IE only. Dan zou je een js filetje kunnen maken die hetzelfde doet en dan werkt het wel in alle browsers.

[Grijze Vos]

Dus ik ontkom niet aan JS. Jammer. Ik hoop dat FireFox nu ze naar 1.0 gaan echt IE voorbijstreven en een goeie ondersteuning voor CSS3 bouwen.

Mja, een JavaScriptje dat mn body doorloopt en die DIV's alternerende kleurtjes geeft gaat me wel leuken. Bedankt voor jullie commentaar.

[disjfa]

htc is ook gewoon javascript hoor Alleen zit deze dan in je css ipv je html file.

@Treenaks: en nou zonder serverside parsing

[ Voor 23% gewijzigd door disjfa op 20-03-2004 12:27 ]

[Treenaks]

Natuurlijk ontkom je aan js!

a) platte html: maak een extra class voor elke kleur, en geef je rijen 2 classes
(<whatever class="class1 oneven"></whatever>)
b) code/loopje: zorg dat het loopje die extra class voor je neerzet

Multi-classing is handig

[ Voor 13% gewijzigd door Treenaks op 20-03-2004 12:27 ]

[Grijze Vos]

Treenaks, lees je mijn eerste post wel?

Ik moet het juist zonder doen, omdat ik afwil van die alternering in mn PHP code.

[AkaXakA]

Ik weet niet of je het weet, maar een htc, is ook eigenlijk gewoon JS, maar dan alleen in Explorer...

Er zijn op het moment 2 manieren om het crossbrowser te doen:

1e JS (uit een van de comentaren op het stuk op AListApart:

PHP:

<script type="text/javascript">
<!--
 onload = function() { stripe ('playlist') };

 function stripe(id) {
    var table = document.getElementById(id);
    if (! table) { return; }
    
    var trs = table.getElementsByTagName("tr");

    for (var i = 0; i < trs.length; i += 2) {
      trs[i].className += " even";
    }
  }
// -->

</script>

De andere manier is in php:

PHP:

<?php
$class = ($class == 'odd') ? 'even' : 'odd';
?>

<div class="<?php echo $class ?>">

Deze laatste manier heb ik nog niet uitgeprobeerd, maar die andere werkt perfect.
En ja, ik heb voor beide een php block gebruikt, maar dat is gewoon omdat ik die kleurtjes mooier vindt.

Tot slot de CSS3 en CSS2 manier, een quote van een van de comentaren op het stuk:

Several CSS3 selectors do this exactly : tr:nth-child(even) and tr:nth-child(odd).

See http://www.w3.org/TR/css3-selectors/#nth-child-pse… for more details.

[bla bla bla....zeikerige comment]

[onzin over een CSS 2 oplossing die alleen in MoSE zou werken..vond het al zo raar staan]

[ Voor 20% gewijzigd door AkaXakA op 20-03-2004 17:22 ]

[Genoil]

.even + .odd
{
background-color: #EEE;
}

.odd + .even
{
background-color: #FFF;
}

dit slaat toch ook nergens op . alsof het mogelijk zou zijn dat er twee even rijen onder elkaar staan...of mis ik iets?

oh wacht, degene die dit origineel op ala postte is het met me eens:

Does not make any sense. Sorry. Please ignore.

ik doe dit met xslt+css:

XSLT:

<xsl:template match="event">
    <tr class="agendarow{position() mod 2}" >
    ...
    </tr>
</xsl:template>

Cascading Stylesheet:

.agendarow0 {...}
.agendarow1 {...}

maarja da's alleen praktisch als je al xslt gebruikt natuurlijk...

[ Voor 34% gewijzigd door Genoil op 20-03-2004 15:58 ]

[Verwijderd]

(Beetje raar dat stukje over CSS3, het is nog geen REC, dus browsers zijn nergens 'verplicht' toe, als ze dat al zijn.)

[X-Lars]

Ik denk dat hier XSLT _{(Anne, is het geen XSL? )} de meest correcte, eenvoudige en logische oplossing is.

[chris]

Helemaal niet X-Lars, denk niet dat ie het al gebruikt, en dan is het erg onhandig en geeft het ontzettend veel overhead. Wat je imho het best kunt doen is tóch die classes laten genereren, en als je een post delete de cache opnieuw op laten bouwen, opzich kost dit toch niet zo óntzettend veel tijd?

[X-Lars]

chill.. Mijn redenering was de volgende:

• TS wil af van de alternering m.b.v. PHP.
• Waarom is het onhandig? Het doet precies wat TS wil en is makkelijk te implementeren.
• Overhead valt ook wel mee. Zo'n stylesheet is ook client-side (enkele minor browsers die dat (nog) niet ondersteunen).

Correct me if I'm wrong

[Grijze Vos]

de website is gemaakt in HTML 4.01.
Dus om nou 'even' op XHTML over te stappen...
Ik weet al hoe ik het ga doen. De container div ga ik gewoon uitspugen in PHP, en de inhoud via het caching systeem. Dat bespaart me denk ik al heel wat tijd. Helaas dat het niet pure htlm/css client-based kan.

[ Voor 4% gewijzigd door Grijze Vos op 20-03-2004 18:51 ]

[Grijze Vos]

-
niet quoten ipv editen.

[ Voor 95% gewijzigd door Grijze Vos op 20-03-2004 18:51 ]

[chris]

X-Lars schreef op 20 maart 2004 @ 18:23:
chill.. Mijn redenering was de volgende:

• TS wil af van de alternering m.b.v. PHP.
• Waarom is het onhandig? Het doet precies wat TS wil en is makkelijk te implementeren.
• Overhead valt ook wel mee. Zo'n stylesheet is ook client-side (enkele minor browsers die dat (nog) niet ondersteunen).

Correct me if I'm wrong

Sorry als het een beetj agressief overkwam, lees het nu pas terug.

Ik bedoelde trouwens xslt server-side: dat kost veel tijd en dus overhead. Client-side wordt het waarschijnlijk voor de TS niet breed genoeg ondersteund (ligt aan z'n publiek).

Maar dus. en @ Grijze Vos: hoezo zou je 'm dan helemaal naar xhtml om moeten zetten?

[ Voor 3% gewijzigd door chris op 20-03-2004 19:33 . Reden: nog maar wat smileys erbij ]

[Verwijderd]

Omdat HTML een compleet andere syntax regeling heeft dan XML? Wel is gehoord van het verschil tussen SGML en XML?