Layout ohne Tabellen - Teil 1
Notwendige Quellcodes für Teil 1
An dieser Stelle verschwenden wir noch keine Gedanken an das Aussehen der Seite - das ist der Spaßteil unserer Arbeit, dem wir uns später zuwenden. Jetzt teilen wir die Seite erst einmal in die gewünschten Bereiche auf. Diese Bereiche nennen wir in der Folge 'Container'. Die ersten Container sind bereits vorgegeben - html und body.
Im Stylesheet (css/define.css) haben wir dazu folgendes notiert:
html, body {
margin: 0;
background: #ccc;
color: #000;
}
margin: 0; sorgt dafür, dass wir den gesamten Anzeigebereich in Anspruch nehmen können; die beiden anderen Werte bestimmen die (globale) Hintergrund- und Schriftfarbe.
body {
padding: 1% 10%;
}
Die padding-Angaben sorgen dafür, dass wir oben und unten einen Abstand von 1%, links und rechts einen Abstand von 10% erzeugen (jeweils zum Bildschirmrand). Die 10%-Angabe bewirkt somit auch eine Zentrierung unserer Inhalte.
Innerhalb von body definieren wir nun unsere eigenen Container und die jeweiligen Stylesheet-Anweisungen:
<div id="main">#main {
padding: 0;
background: #bbb;
border-right: 1px solid #369;
border-left: 1px solid #369;
}
Hier öffnen wir den Container main, der unsere 'Arbeitsfläche' definiert.
Mit der padding: 0-Angabe sorgen wir dafür, dass alle folgenden Container den gesamten Platz nutzen. Wir setzen eine eigene Hintergrundfarbe sowie einen Rahmen (nur rechts und links - um oben und unten kümmern wir uns später).
Alle folgenden Container liegen innerhalb von main - dieser Container wird also erst am Ende geschlossen!
<div id="head">
Der Kopfbereich
</div>#head {
background: #09c;
overflow: visible;
}
Auch der Kopfbereich bekommt eine eigene Hintergrundfarbe. Die overflow-Anweisung verhindert das Abschneiden von Texten, falls die Schrift vom Anwender extrem vergrößert wird.
<div id="content">
Der Content-Bereich
</div>#content {
margin: 5px 0;
background: #e0e0e0;
padding: 20px;
}
Mit der margin-Angabe erzeugen wir einen jeweils 5 Pixel hohen Abstand zum vorhergehenden und nachfolgenden Element (Kopf und Fuß). Auch hier setzen wir wieder eine eigene Hintergrundfarbe. Das padding erzeugt einen 20 Pixel weiten Abstand zum Rand des Containers und verhindert, dass der Text an den Kanten 'klebt'.
<div id="foot">
Der Fuß der Seite
</div>#foot {
background: #09c;
overflow: visible;
}
Diese Anweisungen entsprechen denen des Kopfbereiches.
</div>Hier schließen wir den Container main.
#head, #content, #foot {
border-top: 1px solid #369;
border-bottom:1px solid #369;
}
Zum Abschluss notieren wir die noch fehlenden Rahmen-Elemente für alle definierten Inhalts-Bereiche, jeweils oben und unten.
An dieser Stelle lohnt es sich, ein wenig mit den Werten aus dem Stylesheet zu spielen, um die Auswirkungen von margin, padding und border zu verstehen. Auf weitere Formatierungen sollte an dieser Stelle verzichtet werden, damit das Stylesheet übersichtlich bleibt. Alternativ kann auch das zusätzliche Sheet (css/extra.css) via @import eingebunden werden, das alle sekundären Anweisungen enthält (siehe: 'Notwendige Quellcodes').
Aufgabe:
Zwischen den Containern head und content soll ein weiterer Container mit dem Namen menue eingefügt werden. Im Stylesheet muss für #menue eine eigene Hintergrundfarbe definiert werden - color: #ffcc99. Auch das Abschneiden von Text soll verhindert werden. Der Container muß 5 Pixel Abstand zum Container head beibehalten.
In den Container sollen drei Links zentriert eingesetzt werden.