Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

[comitzuu]

Hallo,

bin hier leider nicht wirklich fündig geworden bezüglich meiner Frage. Vielleicht weiß jemand einen Rat, wäre wirklich toll, sonst bekomme ich noch graue Haare...

Da meine Frage auszuformulieren Unmengen an Worten bräuchte und ich dies niemandem zumuten möchte, habe ich ein Bild verlinkt.

Gibt es eine Möglichkeit, mit CSS, jQuery oder sonstigem, den Contentbereich, wie auch die Sidebar, dynamisch in Abhängigkeit zueinander zu bringen, insofern, dass wenn der Contentbereich auf einer Seite länger als die Sidebar wird, diese sich ebenfalls bis 5px vor den Footer streckt (einfach ausgefüllt mit der Backgroundfarbe) und umgekehrt ebenso (der Contentbereich reißt auch ab, wenn die Sidebar länger ist)?

Wie auf dem Bild unschwer zu erkennen ist, sieht es ein wenig zerrissen aus, wenn die Sidebar einfach so auf halbem Wege aufhört.



Wichtig ist dabei die Erhaltung der verschiedenen Bereiche mit den Abständen dazwischen.

Wäre super wenn jemand weiter weiß, vielen Dank und viele Grüße

 

[cythux]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

mache dir eine .page #page und füll diese Weiss

 

[afr0kalypse]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

das hier dürfte dir vielleicht helfen.
http://www.pmob.co.uk/temp/2col_main.htm#

 

[comitzuu]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

Sorry, kann nicht ganz folgen... Der Seitenaufbau als solches sollte möglichst erhalten bleiben. Nur die Länge der beiden inneren Elemente, Contentbereich und Sidebar, sollen aufeinander abgestimmt sein und sich gegenseitig bedingen.
Wie auf dem Screenshot zu sehen, hört die Sidebar einfach auf.

Die Frage zielte darauf, sie dynamisch bis auf die Länge des Contentbereichs zu verlängern, so dass sie bündig mit ihm anschließt.
Ebenfalls sollte der Contentbereich automatisch mit der Länge der Sidebar abschließen, sollte diese länger sein bei kleineren Artikeln.

Ich möchte keinen prinzipiellen weißen Hintergrund. Diesen habe ich bewusst außen vor gelassen. Die beiden Bereiche sollten von der Breite genauso sein wie sie es jetzt sind, nur eben jeweils 5px vor dem Footer enden...

Oder hast du mir die Lösung schon gesagt und ich habe sie bloß noch nicht verstanden?

 

[jimny1999]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

Der Tipp von afr0kalypse ist doch eigentlich passend und durchführbar. Alternativ kann man natürlich auch eine Tabelle mit 3 Spalten verwenden, da hängen die Höhen der Spalten auf jeden Fall von einander ab.

 

[comitzuu]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

Hallo, vielen Dank für die Antworten.

Mein Unverständnis zielte auf die Ausführung von cythux.

Die Ausführung von afr0kalypse bedingt, so wie ich es verstehe, feste Höhen, oder? Da es sich um dynamisch generierten Content aus WP handelt, weiß ich nicht ob dies damit klappt.

Tabellen wären evtl. ein Vorgehensweise, jedoch versuche ich heute bereits den gesamten Nachmittag Informationen zusammen zu bekommen über die Nutzung der Flexbox-Attribute.

Dies klingt vielversprechend, natürlich kann ich mich auch täuschen... Konnte hier bereits jemand Erfahrungen sammeln?

 

[jimny1999]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

cythux Bemerkung ist mir auch nicht klar.

Der Link von afr0kalypse erfordert eben keine festen Höhen (aber feste Breiten). Es geht um ein Hintergrundbild, dass in der Y-Richtung wiederholt wird, je nach Bedarf. Das Bild simuliert die 2 Spalten nur, das ist der eigentliche Witz. In dem Beispiel sind 2 Links, fahre mal mit der Maus drüber und wieder weg und schau' Dir genau den unteren Rand der Seite an.

Ergänzungs-Edit: Und mach ggf. das Browserfenster kleiner!

 

[comitzuu]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

Kommando zurück mit den festen Höhen bei dem Hinweis von afr0kalypse. Falsch geschaut. Der Ansatz ist gut, jedoch verwenden bei mir beide Elemente bereits display: block.

Da es sich um ein responsive Design handelt, sind die Breitenangaben, wie auch das Padding dazwischen allesamt in Prozentwerten angegeben. Trotz allem endet die Sidebar leider vorzeitig.

Bestimmt sollte ich noch erwähnen, dass die beiden Elemente: Contnet und auch Sidebar innerhalb eines <div>s liegen, welches der Zuweisung im Grid dient und auf transparent geschaltet ist.

Es ist ein 12er Grid, somit ist der Aufbau wie folgt:

<div class="row-fluid">
<div class="span9">...</div>
<aside class="span3 sidebar">...</aside>
</div>

Im span9 befinden sich das <div> mit dem Seitentitel und dem Contentbereich.

 

[comitzuu]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

Hallo jimny1999,

vielen Dank. Der besagte Ansatz mit dem Hintergrundbild kann so nicht zum tragen kommen, über diesen bin ich bereits gestolpert (stammt glaube ich ursprünglich von Dan Cederholm).
Da das Theme responsive ist, ist das eher unpassend. Klar könnte man das in den mediaQueries zusammen fummeln, jedoch geht es mir auch explizit darum durch die Spalten des Padding wechselnde Hintergrundbilder hindurch zu sehen. (Es werden im Hintergrund die Bilder eingeblendet die im Slider bereits zu sehen sind).

Für ein besseres Verständnis kann man es sich auf meiner primären Webseite einmal anschauen:

Hier arbeite ich jedoch mit einem zusammenhängenden InnerContent.

Diesmal würde ich gerne einen Schritt weiter und die verschiedenen Bereiche voneinander abgrenzen, was auch alles echt gut klappt, bis auf die ... Längenanpassung von Sidebar und Content...

 

[jimny1999]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

Bin eben auf diese Idee gestoßen:

Hier die übergeordnete Seite:

Letztendlich ist es aber doch so, dass Du etwas erreichen willst, was sich wie eine Tabelle verhält. Vermutlich möchtest Du aber keine Tabelle einsetzen, weil das irgendwie "out" ist? Ich bin da der pragmatischen Ansicht, wenn man was machen will, das die Eigenschaften einer Tabelle hat, kann man auch einfach eine Tabelle nehmen. Die Absicht hinter CSS ist ja eigentlich nicht, nur dann das Gewünschte zu erreichen, wenn man CSS ausgesprochen trickreich einsetzt, oder?

 

[hedoo]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

Hallo,
habe hier eine Anleitung für ein css-basiertes und fluides Layout gefunden:
http://www.ohne-css.gehts-gar.net/0031.php

Vielleicht hilft es dir ja weiter.
Gruß
hedoo

 

[comitzuu]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

Hi,

erst mal vielen Dank für den Einsatz!

@jimny1999: Hat nichts mit out zu tun. Wenn etwas seinen Dienst browserübergreifend leistet, ohne dass die Performance darunter leidet, ist es gerne willkommen. Es ist hier nur insofern ein wenig komplizierter, da zu viele Bestandteile, auf den bestehenden Aufbau verlinkt sind. Nur deshalb benötige ich eine auf CSS basierende Lösung...

@hedoo: interessanter Ansatz. hab´s zwar noch nicht zum laufen gebracht. Vielleicht klappt es noch...

Gibt es denn vielleicht jemanden hier, der Erfahrung mit den Flexbox-Werten hat?

Scheint prinzipiell ziemlich interessant zu sein, insbesondere da sich damit auch Floating umgehen lässt und die damit oftmals verbundenen Probleme...

Habe es bloß noch nicht zum laufen gebracht...

Hier gibt es ganz interessante Infos:

http://css-tricks.com/fluid-width-equal-height-columns/

http://www.html5rocks.com/de/tutorials/flexbox/quick/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Klappt zwar alles erst mit webkit etc., allerdings sind die Ergebnisse echt beeindruckend. Hierbei gestaltet man unter anderem ein Parent<div> und weist diesem beliebig vielen Child<divs> zu mit echt interessanten zu vergebenden Eigenschaften... Dabei lassen sich in horizontaler, wie auch vertikaler, Richtung eben solche Aufgaben lösen, wie sie bei mir gerade anstehen...

(Hoffe mehrere Links zu einem Thema zu hinterlegen wird hier nicht als Spam geahndet )

 

[comitzuu]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

Habe nun eine Lösung finden können... Setzt Javascript voraus, erfüllt aber genau den erhofften Zweck:

http://www.normansblog.de/when-css-is-not-enough/

Vielen Dank noch einmal

 

[comitzuu]

AW: Länge des Contentbereichs auf die Sidebar anpassen und umgekehrt

Ebenfalls ganz spannend sind die beiden hier:

https://github.com/ginader/syncHeight

http://www.yaml.de/docs/index.html#yaml-addons