Anzeige
Anzeige
UX & Design
Artikel merken

CSS: Das eigene flexible Seitenlayout schnell erstellt

Auf der Suche nach dem richtigen Seitenlayout stößt man schnell auf diverse Spaltensysteme und Generatoren, die einem den Aufbau des eigenen Layout erleichtern sollen. Trotz den meist schnell zu verstehenden angewandten Klassen der einzelnen Blockelemente umfassen diese fertigen Grid-Systeme Eigenschaften und Optionen, die oftmals gar nicht zum Einsatz kommen und für die individuelle Umsetzung nicht vonnöten sind. Das kann die spätere Überarbeitung sogar erschweren.

Von Martin Dellert
2 Min. Lesezeit
Anzeige
Anzeige


Möchte man sich von Vorgegebenem lösen, ist die Umsetzung eines eigenen flexiblen Seitenlayouts durch einfache CSS-Befehle schnell realisierbar.

Einzelne Teilelemente definieren

Anzeige
Anzeige

Sei es ein Kopf-, Inhalts- oder Fußbereich: Um die einzelnen Spalten definiert ein Blockelement die Höchst- und Mindestbreite des gesamten Bereiches, setzt diesen vertikal zentral und kann weitere gestalterische Informationen beinhalten. In dem folgenden Beispiel ist die Breite des Elementes mindestens 600px und maximal 1000px, zwischen diesen Werten passt sie sich automatisch der Fensterbreite an.

.bereich {
	width: 100%;
	max-width: 1000px;
	min-width: 600px;
	overflow: hidden;
	margin: 0 auto;
}

Spaltenbreite errechnen und festlegen

Nachdem die einzelnen Bereiche festgelegt wurden, können sie mit den Spalten gefüllt werden. Für die Bestimmung der Breite der einzelnen Spalten reicht einfache Mathematik: Soll die Gesamtbreite (100%) auf fünf Spalten gleich verteilt werden, erhält jede Spalte eine Breite von 20 Prozent. Sollen zwischen den Spalten Freiräume bestehen, so können diese der Spaltenbreite subtrahiert und als Außenabstand angegeben werden. Wichtig dabei ist zu beachten, dass der letzten Spalte kein rechter Außenabstand hinzugefügt werden soll, da sonst am rechten Seitenrand des Blockelementes ein Freiraum entsteht, der nicht gewünscht wird. Somit haben die fünf Spalten eine Breite von 90% (5 mal 18%) plus einen Zwischenbereich von insgesamt 10% (4 mal 2,5%).

Anzeige
Anzeige
.spalte {
	width: 18%;
	margin-right: 2,5%;
	float: left;
}

Der letzten Spalte muss folglich eine Klasse hinzugefügt werden, die dieser den rechten Außenabstand wieder entzieht:

Anzeige
Anzeige
.letzte { margin-right: 0; }

Aufbau der HTML-Struktur

Nachdem alle CSS-Klassen für die Blockelemente, sowie die flexiblen Spalten definiert wurden, ist es einfacher Schritt, das HTML-Grundgerüst zu errichten. Der folgende Aufbau zeigt ein einfaches Blockelement mit den oben verwendeten fünf Spalten:

<div class="bereich">
	<div class="spalte">Erste Spalte</div>
	<div class="spalte">Zweite Spalte</div>
	<div class="spalte">Dritte Spalte</div>
	<div class="spalte">Vierte Spalte</div>
	<div class="spalte letzte">Fünfte Spalte</div>
</div>

Flexibles Seitenlayout mit verschiedener Spaltenanzahl

Möchte man in der Spaltenanzahl zwischen einzelnen Elementen variieren, so können verschiedene Klassen für Spalten erstellt und eingesetzt werden. Sind die Verhältnisse zwischen Spaltenbreite und dem Zwischenraum festgelegt (immer in Prozent), können durch die beiden folgenden Formeln die richtigen Angaben berechnet werden.

Anzeige
Anzeige
  • Spaltenbreite:
    (100 – Spaltenanzahl * Breite des gewünschten Zwischenabstandes) / Spaltenanzahl
  • Zwischenabstand:
    (100 – Spaltenanzahl * Spaltenbreite) / (Spaltenanzahl – 1)

Zusammenfassend ist es keine Kunst, das auf die eigenen Wünsche zugeschnittene flexible Seitenlayout zu erstellen, sodass der Einsatz von fertigen Grid-Systemen nicht weiter notwendig ist. Mit diesem Verständnis ist es ein vielfaches leichter, ein ideal optimiertes und auf die Ansprüche komprimiertes Seitenlayout zu erstellen.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
20 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Queron

Für die letzte Spalte ist keine eigene Klasse nötig. Mann kann auch einfach

.spalte:last-child { margin-right: 0; }

schreiben.

Antworten
Martin Emmert

@Queron: der IE7 macht da nicht mit

Siehe:
http://msdn.microsoft.com/de-de/library/cc351024(v=vs.85).aspx

Antworten
Andreas

deswegen sollte man vorne anfangen, denn first-child können auch die älteren ie und man gibt die abstände nach links.

Antworten
Queron

Wen interessiert schon der IE7? Die (paar) Benutzer dieses Browsers müssten es doch schon gewohnt sein, dass die meisten Seiten mittlerweile bescheiden damit aussehen. Man sollte solche alten, schlechten Browser nicht noch länger künstlich am Leben halten, indem man seine Seiten für diese optimiert, zumal sich der Aufwand dafür gar nicht lohnt. In einem Artikel sollte es auch nicht darum gehen, ein auf den IE7 optimiertes Beispiel aufzuzeigen, sondern sich am aktuellen Standard zu richten (soll ja schließlich auch ein aktueller Artikel sein und nicht einer, den man auch vor 5 Jahren hätte schreiben können).

Antworten
Andreas

wenn man aber etwas den grips anstrengt beim css schreiben, dann muss man nicht für alte optimieren, sondern sie können es automatisch auch und da hat man nicht mehr aufwand bei.

das man nicht jede css3 eigenschaft auf alte browser anpassen muss – ok, gibts eben keine runden ecken, verläufe… aber das grundlayout sollte schon stimmen.

Antworten
andreas

Kleiner Fehler bei dem margin-right-Wert von .spalte:
es sollte wohl 2.5% (mit Punkt statt Komma) lauten, nicht?

Antworten
jens_richter

und das 2,5%; float: left; fehlt :)

Antworten
Comstrate

Perfekt wäre ein gemeinsames HTML-Rendering worauf die Hersteller aufsetzen, denn dann wären viele Sorgen los.

Antworten
felix

Lustig, dass man den Leuten inzwischen erklären muss, wie man *ohne* CSS-Framework Layouts umsetzt. Was für eine seltsame Welt…

Antworten
Thomas

Ich finde den Tipp nicht schlecht. Immerhin liest man ständig von CSS-Frameworks und ich hab mich schon gefragt, ob ich der einzige bin, der das nicht braucht ;-)

Wir setzen zwar auch 960 und sass ein, aber ich bin nicht unbedingt der Ansicht, dass dadurch alles einfacher wird.

Vielleicht sollte auch mal jemand nen Artikel schreiben, wie man OHNE reset.css ein Layout baut ;-)

Antworten
Michael Schulze

Es kann bei diesem Beispiel noch zu Fehlern im Internet Explorer kommen. Gerade der IE7, vielleicht sogar der IE8, weisen hier ab und zu Rundungsfehler auf. Das kann dazu führen, dass die letzte Spalte umbricht.
Dies kann man dann ganz einfach mit einem negativen margin umgehen:
.letzte { float: right; margin-right: 0; margin-left: -5px }

Dann ist das ganze auch IE-sicher.
Einen Nachteil sehe ich persönlich noch in der Prozentangabe der Spaltenabstände. Wenn die Spalten einen Abstand von 2,5% haben, dann sieht das bei 960px zwar gut aus, weil es 24px entspricht. Bei 480px Breite sind es allerdings nur noch 12px, was optisch vielleicht zu wenig sein könnte.

Aus diesem Grund würde ich eher mit festen Abständen arbeiten. Diese kann man dann der .spalte als Padding geben und das box-sizing auf border-box setzen. Dafür gibt es auch einen IE7 Polyfill.
Möchte man ohne Polyfill arbeiten, so kann man innerhalb einer Spalte noch einen Container anlegen, der dann das Padding enthält.

Antworten
K_Pliester

Alle am rumtrollen hier. Danke für den Tipp @Redaktion! :-)

Antworten
Queron

@Andreas Mitschke: Was würdest du anstelle von overflow:hidden ansonsten einsetzen? Etwa extra ein Element nach den floatenden Elementen einfügen und diesem ein clear:left zuweisen? Und was für „stilisierende Auswirkungen“ hat overflow:hidden so?

Antworten
Fabian

overflow:hidden hat durchaus Vorteile für einzelne Spalten, wenn die platzierten Inhalte „über den Rand“ hinauslaufen. Dann platzt das ganze Layout auseinander und es entstehen andere Seiteneffekte.

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige