Markup
Kommentare 3

Collapsible Layout – Fensterbasierendes Layout

Für ein Projekt musste ich mich mit dem Thema fensterbreitenabhängiger Layouts beschäftigen. Viele Artikel im Netz (siehe Linksammlung unten) zeigen Lösungen auf, die entweder mit JavaScript und CSS oder nur mit CSS auskommen. Wir haben und für die erste Variante mittels JavaScript entschieden, da einige der Ansätze für unsere Ziele nicht ausreichten bzw. nicht funktionierten.

Zielstellung

Wir wollen ein Layout, in dem die dritte Spalte unter eine bestimmten Fensterbreite unter der ersten Spalte dargestellt wird:

Skizze des angestrebten zusammenklappbaren Layouts

Zusätzliche Schwierigkeit: Die Spalten sollen sich über die Inhaltsspalte verschieben, welche außerdem eine flexible Breite hat.

Verschiedene Ansätze auf verschiedenen Browsern = verschiedene Ergebnisse. Wir haben uns dann für folgende Struktur im Markup entschieden:


<div id="wrapper" class="layout-default">
	<div id="header"></div>
	<div id="main">
		<div id="sidebar"></div>
		<div id="extra"></div>
		<div id="content"></div>
	</div>
	<div id="footer"></div>
</div>
<div id="extra2"></div>

Ich weiß, über die Reihenfolge der Blöcke könnte man streiten; letztendlich folgt unsere Anordnung dem Inhalt (vom Allgemeinen zum Besonderen).

Unser Beispiel: Im Stylesheet werden einige Anweisungen für die Position der DIVs gegeben, dazu benutzen wir Floats. Später erhält der Wrapper per JavaScript unter einer Auflösung von 900 Pixeln eine andere Klasse (.layout-small), der Inhalt #content wird breiter, die entsprechende Spalte #extra wird nach links verschoben und rutscht somit unter die Sidebar:


/*** Normales Layout ***/
#content {
	width: auto;
	margin: 0 150px 0 200px;
}
#extra {
	float: right;
	width: 130px;
}

/*** Schmales Layout ***/
.layout-small #content {
	margin-right: 0px;
}
.layout-small #extra {
	clear: left;
	float: left;
	width: 180px;
}

Den gesamten Versuch (und das verwendete JavaScript) könnt ihr in meiner kleinen Sandbox sehen: Collapsible Layout.

Als Ausgangspunkt habe ich mich an den Ansatz von Richard Rutter/Clagnut, einer Variation des CollyLogic-Layouts von Simon Collison, gehalten. Ab einer bestimmten Fenstergröße wird eine Klasse im Markup geändert, die dann wiederum per CSS gesteuert wird.

Auch unser Beispiel ist noch nicht ausgereift, ich wollte es hier einmal zur Diskussion stellen. Momentan reicht allerdings meine Zeit nicht, um mich genau damit zu befassen und eine elegantere Lösung für das Projekt zu finden. Der Ansatz ist jedenfalls geschafft.

Linksammlung

Hier seht ihr die Artikel und Beispiele, die ich bisher gefunden habe:

CSS-Lösungen

Lösungen mit JavaScript und CSS

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.

3 Kommentare

  1. hellaufbegeistert. Da mich das Thema auch interessiert: vielleicht willste ja noch was zum Javascript-Teil deiner Lösung erzählen? ;) Denn da fehlt mir ein wenig die Taktik…

    (ich habe zB. das ungelöste Problem dass Fade/Slide-Effekte in Prozentbasierten Spalten, recht Viewport-feindlich sind)

  2. Auch ich habe mir beim JavaScript helfen lassen, der Code ist enspricht fast dem Original von Richard Rutter/Clagnut. Soweit ich das verstehe, wird mit all dem Code die aktuell verfügbare Breite des Fensters ermittelt und bei eine Breite von unter 900px (unser gezetzter Grenzwert) an den Wrapper eine neue Klasse vergeben. Das pasiert erst nachdem das Fenster geändert wurde, nicht während.

    Bisher lief es im FF, IE 6 und Opera 7/9 gut.

  3. Das bedeutet aber für prozentbasierte Layouts auch, dass man keine Fading/Slide Effekte auf deren Hauptelemente anwenden sollte (und dazu verleiten mich solche JS-Bibliotheken in d. Regel). Ist ein schöner Ansatz, über den ich mir nochmal Gedanken machen muss: Statt fluid oder Liquid-Layout eine Art Treppen-Layout zu gestalten…
    (nur um der Effekthascherei willen versteht sich) :)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>