Mehrspaltiges Layout umsetzen

Ich versuche schon seit geraumer Zeit meine Idee für das neue Template meiner Seite umzusetzen. Das momentane Ergebnis gibt es hier.
Nun stehe ich allerdings vor dem Problem, daß alle Spalten gleich lang sein sollen. Im Moment ist dies der Fall, allerdings ist die derzeitige Lösung nicht sehr optimal. Verschiedene andere Ansätze, um dies zu erreichen, hab ich schon probiert, aber ohne Erfolg. Das grundliegende Problem liegt in den äußeren Spalten. Es wäre toll, wenn mir da jemand weiterhelfen könnte.

Hi,

ein Lösungsansatz wäre das ganze per “Faux Columns” zu realisieren. Ein Beispiel dazu gibt es hier. Es ist ein simpler Trick, der jedoch gut funktioniert.

Einer der Ansätze, die ich probiert habe und die nicht zu dem gewünschten Ergebnis geführt haben.

edit: Das Problem bei dem Ganzen ist, daß ja die äußeren Spalten nochmal unterteilt sind in 3 Divs und das Mittlere verlängert werden soll und das Untere eben unten mit dem Footer abschließen soll.

Nur zu sagen, „ich hab irgendwas probiert, aber nicht das gewünschte erreicht“, ist m.E. keine besonders sinnvolle Problembeschreibung - das gilt auch schon für dein Ausgangsposting.

Den oberen und unteren Abschluss kannst du doch absolut positionieren.

(Damit, dass die mittlere Grafik bei Wiederholung ggf. nicht exakt oben bzw. unten ans Endstück anschließen wird, kannst du allerdings wenig machen. Da bliebe höchstens noch, JavaScript hinzu zu nehmen, und dann die Abschluss-Grafiken etwas horizontal versetzt zu platzieren, so dass auch dieser Übergang nahtlos passt.)

Ok, ich sehe, ich habe mich zu undeutlich ausgedrückt. Sorry, ist schon zu spät.

Die Problembeschreibung wäre die, daß bei meiner jetzigen Lösung sich die Ränder nicht mit verlängern.
Bei den Faux Columns verlängert sich der mittlere Teil nicht und der Rand somit zu kurz ist. Und wenn ich padding-bottom auf bspw. 1000 px und margin-bottom -1000px setze, die Ränder viel zu lang sind und somit unterhalb dem Inhalt die Seite noch ein ganzes Stück nichts kommt.

Edit: Absolute Positionierung oben und unten geht nicht, weil die Teile dann verschwinden.

Faux Columns basieren gerade darauf, dass man die „Verlängerung“ über den Hintergrund simuliert - idR. mit einer Hintergrundfarbe, aber mit einem wiederholten Hintergrundbild geht es theoretisch genauso.

Damit hättest du ja auch nur einen Teil dieser gängigen Lösung umgesetzt.

Dann machst du dabei wohl was falsch.

Sorry, aber so sehe ich immer noch keinen Weg dir weiterzuhelfen. Du schreibst immer noch nur, was alles angeblich „nicht funktioniert“ hat, wirst aber nicht konkret, in dem du bspw. mal zeigst, was du versucht hast und beschreibst wie.

Hi,

kannst du das ganze vielleicht mal grafisch darstellen bzw. dein Template so zerhackstückeln, dass man die einzelnen Elemente sieht? Ein Bild sagt manchmal mehr als tausend Worte :wink:

Ich hab doch im ersten Post den Link drin. Drauf klicken, könnte Klarheit geben, was ich bis jetzt hab :wink:
…Männer grml

Edit: Was ich außerdem probiert habe, sind mehr oder weniger die Ansätze, die hier genannt wurden.

Dann zerpflück ich das eben selbst mal :smiley:
Also geht es eigentlich nur darum, dass diese geschlängelten Linien sich contentbedingt verlängern und unten in diesem Wurzelding abschließt?

Genau. Ist eben auch die Frage, ob das mit der jetzigen Anordnung überhaupt so möglich ist, oder ob da noch was umstrukturiert oder ergänzt werden müsste. Solange beschäftige ich mich auch noch nicht mit CSS, daß ich alle bzw. viele Tricks kenne.

Machbar ist das von der Art her auf jeden Fall… ich hab das gerade mal aus Faux-Layout durchprobiert, und für ein 5-Minuten-Werk ist es schon ansatzweise so wie deins… Klick und etwas länger halt Klick

Die Übergänge sind natürlich nicht schön gelungen, da müsste man eben diese Pergament-Textur der höhe einer solchen Pflanzenwindung anpassen, aber vom Aufbau her denke ich kann man die Umsetzung eigentlich gut sehen.

Ich glaub mit der Anordnung wäre das für mich auch kein Problem gewesen. :wink: Trotzdem schonmal danke für die Mühe.

Ich hatte halt die andere Anordnung gewählt, weil der obere Teil der Ranke 91px hat und der Header glaub 250px. Gut, das sollte kein grundsätzliches Problem sein, da ich den oberen Rankenteil entsprechend verlängern kann. Ginge es mit der Anordnung grundsätzlich auch, oder wäre der Aufwandt zu groß? Wenns natürlich zu schwierig ist, hab ich auch kein Problem, mein Konzept über Bord zu werfen und es doch so zu machen.

Da gibt es theoretisch mehrere Möglichkeiten.

a) Du verlängerst den oberen Teil der Ranke so, dass er genauso lang ist wie der Header - dass es in der Breite eine Einheit ergibt. Die Schwierigkeit hierbei ist wohl vor allem, dass die Naht zwischen dem Kopfbereich und der sich wiederholenden Ranke möglichst unsichtbar sein sollte.

b) Du belässt es bei der Größe der Ranke und legst den Header als Ebene zentriert obendrüber. Dabei würden sich die Ranken eben bereits dort oben wiederholen. Wobei dies wohl von der Positionierung eher semioptimal sein dürfte.

Das mit dem auf die Headergröße verlänger würde kein Problem darstellen, da die Wiederholung jetzt genau da wieder anfängt, wo auch der Header endet. Der Übergang wäre also nahtlos und ich müsste den Header vermutlich nur um paar wenige Pixel noch anpassen.

Ich glaub trotz allem, sollte das mit den Faux am einfachsten sein und es sollte auch kein Problem sein, das entsprechend an Joomla anzupassen.

Dann bedanke ich mich vielmals für die Hilfe und fange mal an, das umzubauen.

Das einzige was dir dann noch passieren kann ist der untere Abschluss, dort wo die Wiederholung in die Grafik der Wurzel übergeht, unsauber wird, je nach Höhe eben.

Das ganze ließe sich per Javascript beheben, aber ob das sinnvoll ist lass ich mal dahingestellt :wink:

Na Javascript will ich dabei eigentlich vermeiden, außerdem müßte ich das dann erstmal lernen. Hab ich zwar noch vor, aber erstmal keine Zeit dafür. Vielleicht fällt mir dafür dann noch was passendes ein, ansonsten kann ich auch erstmal damit leben. Ist eben die Schwierigkeit, wenn man so ne Idee hat.

Bei der aktuellen Version sehe ich vor allem das Problem, daß
zwischen dem Teil links/rechts oben und dem darunter eine Lücke
ist. Das wird sich daraus ergeben, daß das Hintergrundbild in Pixeln
dimensioniert ist und die Höhe der Elemente in em. Die Größe von
em kann aber von den Voreinstellungen des Nutzers abhängen, so
bekommt man das also nicht sinnvoll zusammen.
Da der Kram sowieso nur Pixelgraphik enthält, wäre da eine Höhe
in Pixeln in diesem Falle sinnvoller.

Um bei den mittleren Teilen einen Bezug zum (späteren) Inhalt
zu bekommen, wäre eine andere Verschachtelung sinnvoll und
dann wohl eher gar keine Positionierung. Problematisch bleibt so
oder so der Anschluß oben und unten von dem Muster an Kopf und
Fuß dieser Objekte. Mag sein, daß es da in CSS3 Vorschläge gibt,
mit flexibler Höhe kann man das mit CSS2 aber nicht allgemein
hinbekommen, zumindest nicht mit Pixelgraphik. Mit SVG ginge
das schon etwas besser, aber auch nicht unbedingt mit einem sich
wiederholenden Muster.

Daß die momentane Version mit den px und em und % nicht optimal ist, ist mir auch bewußt, weshalb ich ja irgendwie nach einer anderen Lösung gesucht habe. Es war halt die erste Version und die hab ich schon vor ner Weile erstellt. Seitdem hab ich über dem Problem gegrübelt und mich erstmal anderen Dingen gewidmet gehabt.

Ob SVG sinnvoll sind, hab ich bereits überlegt, mich aber dann dagegen entschieden. Einfach aus dem Grund names Internet Explorer. Da ich normalerweise Opera benutze, wäre mir das zwar egal, aber gibt eben noch genug andere, die dran festhalten.

Um einen besseren Übergang zu schaffen, werde ich mir irgendwann vielleicht nochmal die entsprechende Grafik vornehmen und schaun, was sich da machen lässt. Hab sie ja mit Illustrator erstellt und somit sind Änderungen kein Problem. Aber das ist erstmal nebensächlich.