Newsliste - CSS-Klasse für first und last

[thepixture]

Ich möchte gern meine eigenen Grid-Klassen für die Newsliste verwenden können, bei der ich 3,4 oder 5 Elemente nebeneinander ausgebe, wobei das Element mit "first" einen anderen margin hat als die anderen. Die Anzahl der "Spalten" werden in eigenen Templates als CSS-Klasse vordefiniert. Im Beispiel von 3 Spalten/Elementen ist es "one_third".

Standard:

<div class="mod_newslist block">
    <div class="layout_latest one_third block first even"></div>
    <div class="layout_latest one_third block odd"></div>
    <div class="layout_latest one_third block even"></div>
    <div class="layout_latest one_third block odd"></div>
    <div class="layout_latest one_third block even"></div>
    <div class="layout_latest one_third block last odd"></div>
</div>

Gewünscht:

<div class="mod_newslist block">
    <div class="layout_latest one_third block first even"></div>
    <div class="layout_latest one_third block odd"></div>
    <div class="layout_latest one_third block last even"></div>
    <div class="layout_latest one_third block first odd"></div>
    <div class="layout_latest one_third block even"></div>
    <div class="layout_latest one_third block last odd"></div>
</div>

Wenn ich insgesamt nur 3 anzeigen lassen würde, würde es auch passen, aber ich möchte 6 oder 9 oder mehr ausgegeben haben und da passt es dann nicht mehr.

Bei der Galerie ist das zum Beispiel von Haus aus schon mit dem "first" und "last", weil ich da die Anzahl pro Reihe angeben kann. Musste zwar noch im Template was ergänzen, aber das kann ich im Template für die Newsliste "news_latest" nicht anwenden, weil da ja jedes Element für sich behandelt wird.

Hat jemand einen Tip für mich?

[mandrake]

Hallo Heiko,

ich kann den Aufbau Deines Grid-Ansatzes zwar nicht genau nachvollziehen aber wenn ich es richtig sehe, sollte sich dieses Ziel prinzipiell über eine Modifikation des übergeordneten Templates "mod_newslist" erreichen lassen.

MfG
Peter

[thepixture]

Ok das muss ich mir anschauen, dachte ich kanns irgendwie direkt in den News-Templates lösen.

Danke

[art-instinct]

alternativ kannst du sowas auch über CSS3 mit nth-child lösen.

[thepixture]

alternativ kannst du sowas auch über CSS3 mit nth-child lösen.

Klingt interessant, aber irgendwie greift es nicht.

Habs mit

.mod_newslist>div:nth-type-of(3n+1) { margin-left: 0!important; clear: left; }

sowie

.mod_newslist:nth-child(3n+1) { margin-left: 0!important; clear: left; }

probiert. Keine Änderungen zu sehen.

Im Firebug sehe ich auch keine derartige vergebene CSS-Definintion, wenn ich das Element untersuche.

[thepixture]

Ah Fehler gefunden. Es muss natürlich so

.mod_newslist div:nth-child(3n+1) { margin-left: 0!important; clear: left; }

geschrieben werden.

Danke, das hilft erstmal weiter.