CSS Einsteiger Tutorial #3

von

CSS Einsteiger Tutorial #3

css_part3Herzlich willkommen zum dritten Teil des CSS Einsteiger Tutorials. Es wird empfohlen folgende Teile des Tutorials vorher gelesen zu haben:

  1. Teil #1 (XHTML+CSS, Syntax)
  2. Teil #2 (Syntax, Selektoren, Box-Model)

In Teil 3 werden wir versuchen ein zweispaltiges Layout – bestehend aus Header, Sidebar, Content und Footer – zu erstellen.

Wieder mit dabei?

na aber sicher!

Ok, bevor es richtig losgeht, sollte wir noch eine wichtige Unterscheidung von HTML-Elementen kennen und verstehen lernen.

Block- & Inline-Elemente

Block-Elemente

Block-Elemente sind HTML-Elemente, die vom Browser so interpretiert werden, als würde vor und nach ihnen ein Zeilenumbruch stehen. Sie starten also, außer nicht anders durch CSS-Befehle festgelegt, eine neue Zeile. Standardmäßig bekommen Block-Elemente die gleiche Breite wie ihre Elternelemente, sie versuchen also ihr Elternelement in der Breite (nicht aber in der Höhe, die wiederum vom Inhalt bestimmt wird) auszufüllen.

Beispiele für Block-Elemente sind:

  • div – Divisions (Sektor)
  • p – Paragraph (Absatz)
  • blockquote – Blockquote (Zitat)
  • ul,ol – Unordered/Ordered List (ungeordnete/geordnete Liste)
  • li – List Item (Listenelement)
  • h1-6 – Headings (Überschriften)
  • table – Table (Tabelle)

Inline-Elemente

Inline-Elemente hingegen produzieren keine Zeilenumbrüche, sie werden einfach der Reihe nach dargestellt. Ihre Breite und Höhe wird von ihrem Inhalt bestimmt, unabhängig vom Elternelement (auch hier gilt wieder: nur solange nicht anders durch CSS-Befehle festgelegt).

Beispiele für Inline-Elemente sind:

  • span – Span
  • a – Anchor (Link)
  • em – Emphasize (Italic)
  • strong – Strong (Fett)
  • code – Code

Bemerkungen

Ein Layout, und dazu zählt auch unseres, besteht aus Block-Elementen, die mit anderen Block- und Inline-Elementen gefüllt werden. (Sidebar bekommt eine Liste, Content wird mit Absätzen befüllt, die wiederum Links und Spans enthalten können usw.)

Jedes Element kann in seinem Verhalten verändert werden. Der CSS-Befehl, der dafür zuständig ist, heißt display. display hat mehrere Zustände; hier die 4 wichtigsten:

  1. none das Element wird nicht angezeigt (Element + Inhalt verstecken)
  2. inline das Element wird als Inline-Element behandelt
  3. block das Element wird als Block-Element behandelt
  4. list-item das Element wird als Listenelement angezeigt (mit Anstrich)

Jedes Block-Element kann somit als Inline-Element und umgedreht behandelt werden, wodurch man sehr flexibel wird was die Benutzung von Elementen angeht.

Durch das Ändern der display-Eigenschaft ändern wir nicht das Element selbst. Ein Block-Element bleibt ein Block-Element, es verhält sich nur anders. Es ist also auch damit nicht möglich ein div innerhalb eines a-Elements zu schreiben o.ä.!

das hab ich natürlich gleich gewusst.. ;)

Zweispaltiges Layout

Ein Layout mit zwei Spalten besteht zumeist aus Header (Banner, Top-Navigation, Suche etc.), Sidebar (Navigation, Kalender, Werbung etc.), Content (der eigentliche Seiteninhalt, Bilder etc.) und dem Footer (Back-Links, Sitemap, Copyright etc.). Die meisten WordPress Themes – meins inklusive – benutzen ein zweispaltiges Layout, deshalb soll es uns hier mal als Beispiel dienen:

Zweispaltiges Layout mit Header, Sidebar, Content und Footer.

Zweispaltiges Layout mit Header, Sidebar, Content und Footer.

Alle markierten Blöcke auf dem Bild sind divs und somit Block-Elemente. Der HTML-Code für diese grobe Struktur würde wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
	<head>
	<!-- meta Elemente, Verlinkung auf CSS Datei -->
	</head>
	<body>
		<div id="page">
			<div id="header">
				Header
			</div>
			<div id="sidebar">
				Sidebar
			</div>
			<div id="content">
				Content
			</div>
			<div id="footer">
				Footer
			</div>
		</div>
	</body>
</html>

Die IDs sind dazu da, um die Elemente später per CSS anzusprechen. Das div id="page" ist praktisch, wenn wir unsere Seite zentrieren wollen. Oftmals wird so ein div auch wrapper genannt, weil es die Seite nochmal umschließt (eng: to wrap).

Wollen wir nun unseren Blöcken ein gewisses Aussehen verleihen und schreiben also folgende CSS (die Werte für height und background-color stehen nur da, damit wir nachher was sehen, normalerweise wird die Höhe vom Inhalt des jeweiligen Divs bestimmt):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#page {
	margin:0 auto; /* zentriert die Seite */
	width:800px; /* Seite wird 800 Pixel breit */
}
 
#header {
	background-color:#00ffff;
	height:50px;
}
 
#sidebar {
	background-color:#ff8800;
	width:200px;
	height:100px;
}
 
#content {
	background-color:#ff00ff;
	width:600px;
	height:400px;
}
 
#footer {
	background-color:#00ff00;
	height:50px;
}

Schauen wir uns nun das Ganze im Browser an:

Zweispaltiges Layout? Noch nicht ganz..

Zweispaltiges Layout? Noch nicht ganz..

hm.. da stimmt irgendwas noch nicht. sidebar und content sollten doch eigentlich nebeneinander passen?!

Völlig richtig! Allerdings reicht dafür obenstehendes CSS nicht aus. Es gibt allerdings eine ganz einfache Methode, um unser Ziel zu erreichen – float

Float

float hat 3 wichtige Zustände:

  1. left Element “fließt” nach links
  2. right Element “fließt” nach rechts
  3. none Element “fließt” nicht

öhm.. “fließt” ??

Um es verständlicher zu machen, erkläre ich es am besten an einem Beispiel. Folgendes Szenario: Eine große 500px breite Box (schwarzer Rahmen) soll mit 4 Boxen (Box1-4) befüllt werden, die alle die Eigenschaft float:left besitzen und jeweils eine unterschiedliche Höhe und Breite haben.

Gehen wir die Sache Schritt für Schritt durch..

1. Box1 platziert sich wie erwartet links oben.

Box1

Bild 1

2. Box2 “fließt” jetzt links neben Box1, da noch genug Platz vorhanden ist.

Box2

Bild 2

3. Box3 tut es Box2 gleich.

Box3

Bild 3

4. Die “erste Reihe” ist nun voll Box4 muss sich weiter unten einreihen, wir sehen jedoch das Problem. Box4 lässt nach links Platz weil es ja auch soweit wie möglich nach oben will und muss.

Box4

Bild 4

5. Um das zu verhindern und Box4 auf einer “neuen Zeile” beginnen zu lassen, fügen wir vor Box4 noch eine weiter Box hinzu.

Bild 5

Bild 5

CSS-Code für Box5:

1
2
3

.box5 {
	clear:both;
}

Damit ist Box5 ein sogenannter Clear-Div. Solche Divs bewirken, dass nachfolgende Elemente das Floating von vorhergehenden Elementen ignorieren und somit wieder “bei Null angfangen”, d.h. sich wieder ganz links anordnen und nicht solche Fehler produzieren wie in Bild 4.

Neben both hat clear noch die Werte left und right, sodass es möglich ist nur eine bestimmte float-Richtung aufzuheben. Außerdem ist clear nicht auf Divs beschränkt sondern kann auf jedes Element angewendet werden.

Ok, ich denke ich hab’s verstanden.. zurück zu unserem Beispiel, was muss ich da nun wo ändern?

Mit dem neuen Wissen lassen wir nun die Sidebar und den Content floaten. Die Sidebar nach links und den Content nach rechts. So können wir sicher sein, dass nichts schief läuft. Zusätzlich sollten wir dem Footer noch ein clear:both verpassen, das ist zwar nicht unbedingt notwendig aber sollten wir doch aus irgendwelchen gründen noch Elemente nach dem Footer einfügen und diese floaten lassen besteht die Gefahr, dass es uns das Layout zerschießt.

Der neue CSS-Code lautet demnach (nur #sidebar, #content und #footer ändern sich, Rest bleibt gleich):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#sidebar {
	float:left;
	background-color:#ff8800;
	width:200px;
	height:100px;
}
 
#content {
	float:right;
	background-color:#ff00ff;
	width:600px;
	height:400px;
}
 
#footer {
	clear:both;
	background-color:#00ff00;
	height:50px;
}

Und siehe da, alles so wie es sein soll :)

Sieht es bei dir auch so aus? Dann glückwunsch zum einem zweispaltigen Layout!

Sieht es bei dir auch so aus? Dann Glückwunsch zum einem zweispaltigen Layout!

Sehr geil.

Nun kannst du anfangen die Blöcke mit Inhalt zu befüllen! Folgende Teile stehen zum Weiterlesen bereit:

  1. Teil #1 (XHTML+CSS, Syntax)
  2. Teil #2 (Syntax, Selektoren, Box-Model)
  3. Teil #3 (Zweispaltiges Layout, Float)

War dieses Tutorial hilfreich? Was möchtest du als nächstes wissen? Hast du Fehler gefunden oder etwas vermisst? Dann hinterlasse einfach einen Kommentar :)

Die hier könnten dich auch interessieren…

14 Kommentare RSS

Kaloeffel

Die Tutorials werden immer interessanter, es wird immer mehr “Kleinkram” den ich noch nicht kannte, welcher aber sicher nützlich ist. Vielleicht werde ich ja jetzt den fehlenden Body-Div in meiner Seite wieder zum Vorschein bekommen :]

Kaloeffel

Schade. Wenn ein Div nur mit “fließenden” Objekten gefüllt ist, wird er selber nicht angezeigt, bzw hat eine Höhe von 0px. kann man dagegen etwas machen?

domiDC

Hi ich würde gern wissen wie ich jetzt die sidebar, passend zwischen Head und fooder bekomme ?? !!

dachte immer mit margin und / oder height:auto; aber das klappt nicht so ganz !

Norman

ach, du meinst, dass sie immer genauso hoch ist wie der contentbereich?
das geht so direkt nicht. dafür müsstest du um sidebar und content noch einen div machen, den du eine hintergrundgrafik oder etwas ähnliches gibst. so entsteht die illusion, dass die sidebar bis runter geht.
eine beispiel, wo ich das so gemacht habe, ist die seite hier: http://www.technical-consultation.de

Mor-E

Hallo Norman
Erstmals danke für deine hilfreichen Tutorials. Was ich bei der ganzen Boxeneinteilung noch nicht verstehe ist, wie du danach dein Layout darin verpackst…Die “Blätter-Grafik” aus deinem Header lappt z.B. ja in die Sidebar hinein. Werden solche Probleme erst zu einem späterem Zeitpunkt angegangen oder verstehe ich etwas grundlegend falsch ?
gruss
mor-E

Kaloeffel

Er hat den Background einfach in den Page-Div gepackt und nicht in den Head-Div. Der Head-Div ist quasi Transparent, so dass man den Hintergrund des Page-Div sehen kann ;)

Kaloeffel

Neue Herausforderung:
Ich möchte dass die Sidebar oben anfängt, also nicht nur neben dem Content sondern auch neben dem Header.
Die Seite soll die ganze breite einnehmen und der Header und Content sollen eine flexible breite haben.
Problem: Wenn z.B. der Header die Eigenschaft “float:left;” bekommt, ist die Größe nicht mehr flexibel sondern nur noch das Minimum.

Silvia

Eeeeendlich!
Vielen Dank für dieses einfache Tutorial. :)
Endlich hab ichs Verstanden … in Büchern haben Sie es oftmals zu kompliziert (für mich) erklärt.
Vielen Dank =)
*sich deine Seite mal speichert* ;)

Bensen

Hey geil erklärt hat sich gut gelesen und endlich hab ich auch mal das floaten und clearen gecheckt! Wenn du sowas auch bezüglich positions machen könntest, for allem mit typischen anwendungsbereichen, würde ich total ausm häuschen sein! Wie auch immer. Vielen Dank,
Bensen

Kommentieren

nach oben