höhe der bereiche LEFT und RIGHT dynamisch angleichen

[penguin]

Hallo Typolight Experten!

Ich bin gerade am verzweifeln... Habe schon gegoogelt und das Forum durchsucht, aber nichts gefunden.

Ich möchte die Höhe der Bereich LEFT und RIGHT an die Höhe des Contents in MAIN anpassen, so dass sie immer dieselbe Höhe haben, wie MAIN. LEFT und RIGHT haben eine Hintergrundfarbe und sollen unten bis an den footer heran gehen, egal wie "wenig" Inhalt darin ist.

Die einzige Änderung in der Höhe habe ich erzielt, als ich ein min-heigt:600px; für #left und #right eingefügt habe. Das Ergebnis war allerdings eher dürftig. Alle anderen Höhenangaben bleiben leider ohne Effekt.

Ich habe die Höhenangaben erstmal wieder entfernt und lebe damit, dass der Bereich unter meiner Navigation links bis zum footer weiß ist.

Der Aufbau der Seite ist TL-standard, also 3-spaltig mit header und footer.

Kann mal jemand eine Schritt-Für-Schritt-Anleitung posten, wie ich das erreichen kann?

Vielen Dank schonmal,
Timo

[MacKP]

Hallo penguin,
eine kleine Kurzanleitung für einfarbige Hintergründe:

Nimm margin-left und margin-right für #main raus. Gib #main dann ne
{
border-left: breite_von_left_in_px solid farbe_von_left;
border-right: breite_von_right_in_px solid farbe_von_right;
}

Wenn das keinen einheitlichen Hintergrund haben soll, dann musst du eine Grafik anfertigen für den Hintergrund.. da finden sich aber auch 1001 Anleitungen im Netz ;-)

Viele Grüße

[penguin]

Hallo MacKP!

Danke für die Antwort. Die Idee scheint nicht schlecht zu sein, aber wenn ich das mache, wird mein MainBereich ein graue Fläche. Der Rahmen schiebt sich also nicht unter den Bereich left sondern nimmt den Innenraum von main ein.

Siehe Screenshot

Grüße, Timo

[MacKP]

Hast das margin auch entfernt?

Ich nutze das TL Framework selber nicht, daher bräuchte ich nen link wenn ich weiter helfen soll.
Die Technik ist dir ja jetzt klar. So funktioniert das auf jeden Fall im Klassischen Sinn ;-)

Viele Grüße

[penguin]

Danke!

Ja. Margin habe ich entfernt. Ich tüftele noch etwas rum. Ich glaube, das klappt dann irgendwie.
Danke, schönes Wochenende,
Timo

[Budman]

Am einfachsten ist es über einen anderen Weg:

Mach eine Hintergrundgrafik, 1px hoch, indem die Hintergründe für alle drei Spalten enthalten sind, sprich auf volle Breite der Seite (je nachdem was Du unter Seitenlayout eingestellt hast) und weise diese Graifk dann #container als Hintergrundgrafik zu.

Und das war's auch schon.

[Andreas]

@penguin

Schau dir dazu auch die Beispiele von YAML an, der Unterschied des HTML-Codes zu TYPOlight ist nicht sooo gewaltig. Analysiere die Beispiele z.B. mit firebug im FF. Schau dir unter 04_layouts_styling die ersten 3 Beispiele an http://www.yaml.de/fileadmin/examples/index.html

Den Tip von MacKP findest du in den ersten 2 Beispielen wieder. Der Tip von Budman ist hier nicht aufgezeigt, da er mehr od. weniger nur für ein Layout mit fester Breite nützlich ist. Das 3. Beispiel mit der Faux Columnes Technik ist aber die erweiterte Form von Budmans Tipp. Hier werden 2 Bilder eingebunden, eins für die linke und eins für die rechte Spalte. Die Bilder werden aber nicht den Spalten selbst (denn die gehen ja nicht bis nach unten), sondern den darunter liegenden Containern zugewiesen. Einmal top right und einmal top left.

Welche Möglichkeit du umsetzt ist abhängig von dem Projekt und dessen Inhalten. Auch dein Versuch den 3 Spalten eine Höhe zuzuweisen {height:500px;overflow:auto;}, kann für dein Projekt die passendste sein. Dann bist du natürlich fein raus mit den Hintergründen, nutzt allerdings nicht die komplette Höhe des Viewports beim User. Wenn du aber deine Inhalte nach dem Motto gestalltest "besser klicken als scrollen", z.B. mit Tabs oder Akkordions, ist das ja evtl. egal.

Lies auch "Gestaltung der Spalten" http://www.yaml.de/de/dokumentation/...r-spalten.html

Gruß Andreas

[penguin]

Vielen Dank für die Zahlreichen Hinweise!

Ich habe mich nun für die Hintergrundgrafik in #container entschieden, da so der immer unterschiedlichen Höhe des Inhalts am einfachsten Rechnung getragen wird.

Grüße,
Timo

[nicsim]

hi,

also, ich habe ein ähnliches problem, welches sich mit den lösungsvorschlägen leider nicht beheben lässt.

ich möchte den inhalt von #right immer an der unteren kante von #main ausrichten. das würde wunderbar funktionieren, wenn sich die höhe von #right an der höhe von #main orientieren würde. leider tuts das nicht. gibt es da einen trick?

[MacKP]

Hallo nicsim,
wie oben schon beschrieben wurde ist der Trick, das man es nur so aussehen lässt, das der Bereich an der Seite genau so lang ist wie die Mitte...
Da du nur eine Seite so haben möchtest, brauchst du nur alles weglassen bei den Tipps was mit der anderen Seite zu tun hat...

Viele Grüße

[nicsim]

ich möchte es nicht nur so aussehen lassen. ich brauche #right genauso hoch wie #main.

[Nils Riel]

ich möchte es nicht nur so aussehen lassen. ich brauche #right genauso hoch wie #main.

Das ist nicht möglich - naja, mit Javascript schon. (Ich baue schon lange Webseiten und habe das in keinem Fall gebraucht)

[MacKP]

Hallo nicsim,
in der Theorie:
- ein div in #right machen (unter dem Inhalt)
- diesen div mit clearboth und so, so ausrichten, das dieser immer unterhalb von #main ist
-> so dürfte #right immer so weit nach unten gezogen werden, das es praktisch ein stück unter #main ist
- ausgleichen von dem kleinen fitzel der zu viel unten drann ist

Ist jetzt nur ungetestete Theorie.. gebraucht hab ich das auch nie...
Vllt hilft dir da aber auch die Doku von Yaml weiter -> http://www.yaml.de/de/dokumentation/...e=1&sword_list[0]=col3&sword_list[1]=clearfix
Dort wird beschrieben, wie es gemacht wird, das die Mittlere Spalte immer die längste ist.. also mindestens so lang wie die äußeren.

Viele Grüße und viel Erfolg

[Andreas]

ich möchte den inhalt von #right immer an der unteren kante von #main ausrichten. das würde wunderbar funktionieren, wenn sich die höhe von #right an der höhe von #main orientieren würde. leider tuts das nicht. gibt es da einen trick?

Hi,

einfachste Lösung ist natürlich feste Spaltenhöhe für alle Spalten und overflow:auto

Ansonsten kannst du dich am YAML 1-2-3 Layout orientieren, dort ist die rechte Spalte immer gleichhoch mit der meistgefüllten.
http://www.yaml.de/fileadmin/example...col_1-2-3.html
Dann hättest du, wenn dein Hauptinhalt im FE in der mittleren Spalte sein sollte, deinen Hauptinhalt im Quelltext eine Spalte weiter oben, was ja auch nicht schlecht ist. Um deinen Inhalt in Spalte 3 dann nach unten zu positionieren brauchst du dem Inhalt nur noch position:absolute, bottom:0 mitzugeben.

Andreas

[Thomas]

Sucht mal nach Faux Columns, da wird genau dieses Problem gelöst.

Englische orig. Version:
http://www.alistapart.com/articles/fauxcolumns

Deutsche übersetzte Version:
http://alistapart.byteshift.de/fauxcolumns/

Das solte das Problem zumindest annähernd lösen.

[Andreas]

Hi Thomas,

wie der Name "faux" - Betrug - schon andeutet, geht es dabei nur um den Schein. nicsmn möchte aber Inhalte ausrichten.

Andreas

[nicsim]

hey andreas,

vielen dank für deine hilfe. da es gestern schnell gehen musste, habe ich mir eine andere lösung einfallen lassen. da ich den footer nicht brauche habe ich diesen halt missbraucht. ich habe die inhalte für die rechte spalte in den footer gepackt und diese dann nach rechts und nach oben verschoben. bisher scheint das so zu klappen, aber deine ausführungen werden sicher für andere projekte noch interessant sein.

liebe grüße
simone