Hallo zusammen,
folgende Herausforderung habe ich zur Zeit. Ich habe bisher ein 2-spaltiges LAyout über eine Breit von 768px in dem ich übers CSS mit float left und right arbeite. Jeder dieser Divs hat 48% somit habe ich auch einen schönen Abstand. Trägt man nur in Spalte Normla Content ein, wird auch nur eine Spalte über die vollen 768px angezeigt, trägt man noch bei Right Content ein, wird wie oben beschrieben der Content durch den float left und right jeweils in einem Div geteilt.
Jetzt meine Herausforderung ich muss das ganze um 4 Spalten erweitern, ob nun Links oder am Rand was eingetragen ist. Dann soll die Seite folgendermaßen aussehen
Gesamt 768px
| Links 150px | 50% von mitte 1 | 50% mitte 2 | 150px Rand
Ist nun Rand oder Links nicht mit Content versehen dann bei Rand leer:
Gesamt 768px
| Links 150px | 50% von mitte 1 | 50% mitte 2 |
Also die festen 150px sollen bei Links oder Rand fest sein, der verbleibende Rest soll dynmaisch zwischen Spalte Normal und Rechts geteilt werden.
Der andere Fall wenn Links frei bleibt sieht so aus:
Gesamt 768px
| 50% von mitte 1 | 50% mitte 2 | 150px Rand
Oder die beiden letzten Varianten wenn nur Normal und Rechts ausgefüllt
Gesamt 768px
| 50% von mitte 1 | 50% mitte 2 |
und zuletzt nur Normal
Gesamt 768px
| 100% von mitte 1 |
MEin TS bisher:
temp.content = COA
temp.content {
# show both columns if content in right col
10 = COA
10 {
if.isTrue.numRows < styles.content.getRight
10 < styles.content.getRight
10.wrap.required = 0
10.wrap = <div id="content_right_2col_rightcol">|</div>
20 < styles.content.get
20.wrap.required = 0
20.wrap = <div id="content_right_2col_leftcol">|</div>
}
# eine Spalte wenn kein Content RECHTS
20 = COA
20 {
if.isFalse.numRows < styles.content.getRight
10 = TEXT
10 < styles.content.get
10.wrap = <div id="content_right">|</div>
}
}
Wäre super, wenn mir da jemand einen Tipp geben könnte.
vielen Dank!!
Gruß
Thomas