Neu 60/40 Grid aus foreach Schleife?

  • Wenn Ihr uns das erste Mal besucht, lest euch bitte zuerst die Foren-Regeln durch.

Groundhog

Gut bekanntes Mitglied
11. Januar 2011
224
5
Austria
#1
Hallo mal wieder,


Ich möchte in der News Overview ein unregelmäßiges Grid erzeugen. Dabei sollen sich 60% / 40% Boxen, mit 40% / 60% Boxen Reihenweise abwechseln. Die einzelnen News Vorschauen kommen aus einer foreach Schleife aus blogs/overview.tpl.


Kann ich ohne Javascript und CSS irgendwie so ein abwechselndes 60/40er Raster erzeugen?
Mit Css sollte es ja nicht das Problem sein (nth-child mit prozentueller width sollte ja gehen), ebenso könnte man ja auch die Klassen mittels JS austauschen....(remove/addClass). Gehts aber auch anders?
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
3.622
483
Berlin
#2
Zustimmungen: Groundhog

Groundhog

Gut bekanntes Mitglied
11. Januar 2011
224
5
Austria
#3
@css-umsetzung Du bist der Hammer!

Mal davon abgesehen dass ich ein komplettes Smarty Lulu bin, funktioniert das mit {cycle} bereits super. Ich bekomme jetzt pro Beitrag eine andere Klasse....aber, wie dreh ich das um....

Ziel ist folgendes: 60/40/40/60/60/40
Aktuell hab ich : 40/60/40/60/40/60

Somit müsste nach der 2ten Ausgabe nicht direkt widerholt, sondern 1 mal übersprungen werden..

EDIT: Vergiss es...Ich Trottel...hab {cycle} einfach 4 Werte gegeben...nicht nur 2...jetzt läufts :D
 

Groundhog

Gut bekanntes Mitglied
11. Januar 2011
224
5
Austria
#5
Mein aktueller Code sieht so aus:

PHP:
{foreach name=uebersicht from=$oNewsUebersicht_arr item=oNewsUebersicht}
    <div class="blogbox {cycle values="col-md-7,col-md-5,col-md-5,col-md-7"}"  itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
...
{/foreach}
Ist das so korrekt?
 

Groundhog

Gut bekanntes Mitglied
11. Januar 2011
224
5
Austria
#6
Hallo,
du musst einfach für die erste Box {cycle name="left" values="40,60"} und für die Zweite {cycle name="right" values="60,40"} verwenden.
Zeilen gibt es ja eigentlich eine da sich die Blogbeitragsvorschauen ja nicht über Zeilen anordnen, sondern nur über die Spalten. Die Zeilen entstehen ja gezwungenermaßen. Die beabsichtigte Zeile (<div class=".row"></div>) muss ja vor die foreach Schleife, sonst wird ja pro Item eine Row erzeugt.