Vorwort
Mir ist aufgefallen das immer wieder die Frage nach zentrierten (dynamischen) Layouts und der Positionierung einzelner Elemente auftaucht. Also habe ich mich dafür entschieden ein kleines Tutorial zu schreiben um den Umstieg auf CSS zu erleichtern. Wer seine Layouts mit CSS gestalltet schafft sich grosse Vorteile wie z. B. übersichtlichen HTML-Code, mehr gestalterische Möglichkeiten, Barrierefreiheit, Templatefunktion, geringere Ladezeiten und viele weitere Vorteile. Leider gibt es auch einen kleinen (grossen) Nachteil von der Browserseite, denn nicht jeder Browser rendert ein Stylesheet auf die gleiche Art. D. h. es kann in unterschiedlichen Browsern zu unterschiedlicher Darstellung kommen und genau deshalb sollte man sich vor dem erstellen eines Layouts überlegen für welche Benutzergruppe man seine Hompepage erstellen möchte. Aber für Anfänger ist es empfehlenswert das Layout für den Internet Explorer (IE) und/oder für Firefox (FF) zu erstellen.
Für dieses Tutorial sind keine Vorkenntnisse erforderlich. Ich werde im Groben auf die wichtigsten HTML-Elemente eingehen die für die Erstellung eines Layouts mit CSS unbedingt notwendig sind. Danach schauen wir uns an wie man ein Stylesheet erstellt und in eine externe Datei auslagert, was uns die Möglichkeit bietet das Stylesheet als Template zu verwenden. Im ersten Teil werde ich lediglich auf Positionierung von Boxen und weniger auf gestalterische Möglichkeiten eingehen.
Wir erstellen ein Dynamisches Layout (Header, Topnavigation, Menü links und rechts, Content, Footer) das bequem in eine 1024x768 Auflösung passen und mit dem Inhalt wachsen soll.
...und los geht´s.
HTML (HyperText Markup Language)
Ganz am Anfang eines HTML-Dokumetes steht ein
DOCTYPE . Das brauchen wir damit der Browser weiss mit welcher Art von Dokument er es zu tun hat. Um CSS zu üben ist es sinnvoll ein strict Doctype zu wählen, denn dieses lässt viele Attribute zur Visualisierung in HTML nicht mehr zu, was einen dazu zwingt evt. Visualisierungsprobleme mit CSS anstatt mit HTML zu lösen.
Nach dem Doctype wird HTML mit dem <html>Tag eingeleitet.
Als nächstes brauchen wir einen Header (Kopf) der
Meta-Angaben und Titel des jeweiligen Dokumentes beinhaltet. Darüberhinaus werden die Stylesheets in den Header geschrieben. Alles was im Header verzeichnet ist kann der Anwender nicht im Browserfenster sehen.
Auf den Header folgt der Body (Körper) in dem wir unsere Elemente positionieren die der Anwender im Browserfenster sehen kann.
Und zu guter letzt wird das <html>Tag wieder geschlossen mit </html>.
Schauen wir uns nun mal so ein HTML-Dokument an.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Layouten ganz einfach!</title>
</head>
<body>
</body>
</html>
Und nun brauchen wir noch ein Div (allgemeines Block-Element) das im body verarbeitet wird. Div steht für division (Bereich). Um so ein Div mit CSS verarbeiten zu können, müssen wir dem Div noch eine Identität (id) zuweisen mit der wir später dann die Verbindung zu einem Selektor herstellen.
Code:
<div id="Container">Hier steht der Inhalt des Divs</div>
Wieviele Divs brauchen wir also nun für unser Vorhaben? Wir erinnern uns. Das Layout soll Header, Topnavigation, Menü links und rechts, Content und Footer haben. Demnach brauchen wir 6 Divs!? Fast richtig, nun fehlt uns nur noch ein Div in das wir alles reinpacken. Ich gebe diesem Div einfach mal die "id" Container und packe alles zusammen in den body. Um das ganze noch etwas übersichtlicher zu gestallten kann man Kommentare <!--Kommentar--> benutzen. Diese werden im Browserfenster nicht angezeigt sonder dienen lediglich dem Programmierer zur besseren Übersicht.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Layouten ganz einfach</title>
</head>
<body>
<!--beginn container-->
<div id="container">
<div id="header">Header</div><!--end header-->
<div id="topnavi">Topnavi</div><!--end topnavi-->
<div id="menue_links">Menü links</div><!--end menue_links-->
<div id="menue_rechts">Menü rechts</div><!--end menue_rechts-->
<div id="content">Content</div><!--end content-->
<div id="footer">Footer</div><!--end footer-->
</div><!--end container-->
</body>
</html>
So, das war´s auch schon mit dem nötigsten an HTML. Nun schauen wir uns endlich CSS an.
CSS (Cascading Stylesheet)
Um eine Verbindung zwischen CSS und den Elementen im body herstzustellen, brauchen wir
Selektoren . In diesem Tutorial bafassen wir uns mit Universal-Selektoren, Typ-Selektoren und ID-Selektoren. Um ein Element zu bearbeiten brauchen wir ein Selektor, danach öffnen wir eine geschweifte Klammer, Stylesheetangaben (Attribut, Doppelpunkt, Wert, Semikolon) und geschweifte Klammer wieder schliessen.
Hier ein Beispiel mit dem Typ-Selektor html.
Code:
html {height:100%;}
Um nun unsere Elemente (divs oder auch Boxen genannt) mit CSS positionieren zu können, sollten wir uns zuerstmal das
Boxmodell anschauen. Um das Boxmodell zu verstehen müssen wir uns etwas näher mit den Attributen
margin,
padding und
border beschäftigen.
Margin ist der Aussenabstand einer Box zu der danebenliegenden oder übergeordneten Box.
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
Mit diesen Attributen würde eine Box mit 10px Abstand zu jeder Seite der darüberliegenden Box positioniert.
Eine andere Schreibweise ist margin:10px 10px 10px 10px. Es wird von top im Uhrzeigersinn zu left gelesen. Oder auch margin:10px 10px. Der erste Wert seht für top und bottom und der zweite für left und right.
Padding bewirkt das Gegenteil von margin, also der Innenabstand zu der darunterliegenden Box.
padding-top:10px;
padding-right:10px
padding-bottom:10px
padding-left:10px;
oder padding:10px 10px 10px 10px;
oder padding:10px 10px;
Um sich nun mit diesen beiden Attributen etwas vertraut zu machen, habe ich hier eine kleine Aufgabe für euch. Wir habe in folgendem Text eine grosse gelbe Box in welcher in der rechten Ecke oben eine kleine rote Box positioniert ist.
- Die erste Aufgabe ist es die kleine rote Box mit dem Attribut
margin in der unteren rechten Ecke der gelben Box zu positionieren.
- Die zweite Aufgabe ist es die kleine rote Box mit dem Attribut
padding in der Ecke rechts unten zu positionieren.
Die zweite Aufgabe ist nicht ganz so einfach zu lösen wie die erste. Ich wünsche euch viel Spass beim rätseln und rumprobieren. Einfach den Quelltext in einen Editor kopieren und los geht´s...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Boxmodell Übung</title>
<style type="text/css">
#grosse_box {
width:500px;
height:500px;
background-color:#ffff00;
}
#kleine_box {
width:50px;
height:50px;
background-color:#ff0000;
}
</style>
</head>
<body>
<div id="grosse_box">
<div id="kleine_box"></div>
</div>
</body>
</html>
Nun aber kommen wir zum Layout. Zuerst müssen wir CSS einleiten. Das machen wir mit <style type="text/css">. Mit </style> schliessen wir das Tag dann wieder und anschliessend setzen wir mit dem Universal-Selektor alle margins und paddings auf 0. Danach setzen wir die
Höhe (height) für html fest und geben dem body noch eine
Breite (width), eine
Hintergrundfarbe (background-color),
Schriftart mit font-family und eine
Schriftgrösse .
Code:
<style type="text/css">
* {margin:0; padding:0;}
html {
height:100%;
font-size:100.01%;
}
body {
width:100%;
display:block;
background-color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
}
</style>
Nun positionieren wir den Container in dem wir alle unsere Elemente drin haben. Wir geben dem Container eine Breite von 960px, damit er in die 1024er Auflösung passt. Mit margin:0 auto legen wir fest das der Abstand des Containers von oben und unten des bodys gleich Null ist und von links und rechts automatisch definiert wird. Somit erreicht man das sich das Layout immer in der Mitte des Bilschirms befindet.
Code:
#container {
width:960px;
margin:0 auto;
}
Als nächsten kommen Header und Topnavigation an die Reihe die wir genau so breit machen wie das Content. Dem Header habe ich spontan mal eine Höhe von 100px und der Topnavigation von 25px gegeben. Damit wir nun endlich mal ein Ergebniss sehen können, weisen wir den beiden Elementen noch eine Hintergrundfarbe zu und jetzt ist auch endlich im Browserfenster was sichtbar.
Code:
#header {
width:960px;
height:100px;
background-color:#ffffcc;
}
#topnavi {
width:960px;
height:25px;
background-color:#ff9900;
}
Die nächste Aufgabe ist es die Menüs und das Content nebeneinander zu positionieren. Hierzu müssen wir
floaten und wer floatet muss auch
clearen . Das Linke Menü wird mit float:left und das Rechte, wie soll es auch anders sein wird mit float:right gefloatet. Um diese Elemente nun zu clearen verwende ich
overflow:auto; in dem darüberliegenden Element, also im Container. Es gibt allerdings mehrere Möglichkeiten zu floaten aber Näheres dazu findet ihr
hier. Nun brauchen die Elemente noch eine Breite und eine Hintergrundfarbe, fertig.
Code:
#menue_links {
float:left;
width:200px;
background-color:#ffffcc;
}
#menue_rechts {
float:right;
width:200px;
background-color:#ffffcc;
}
#content {
background-color:#f7f7f7;
}
Zuletzt kommt dann noch der Footer dem wir ebenfalls eine Breite, eine Höhe und eine Hintergrundfarbe geben. Man könnte nun schon Anfangen das ganze mit Inhalt zu füllen, was aber über HTML geschieht und nicht über CSS. Der Inhalt wird in die HTML-Tags geschrieben. Wenn ihr nun in das Content eine Text schreibt, könnt ihr sehen das sich das Layout in der Höhe mitverändert. Damit der Text nun aber nicht über das Content hinauswächst benutzen wir ebenfalls das Attribut overflow.
Nun höre ich den einen oder anderen schon klagen, ...aber die Menüs wachsen doch gar nicht mit dem Inhalt des Content mit. Eine Lösung dafür ist, dem Container die gleiche Hintergrundfarbe zu geben wie den Menüs. Man muss aber beachten das die Menüs nicht mitwachsen sonder das ist lediglich eine Trick fürs Optische. Die Menüs wachsen ebenfalls nur mit Inhalt. Die Elemente in denen keine Höhe angegeben wurden können mit dem Inhalt wachsen.
Aber hier nun der vollständige Quelltext für das ganze Layout.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Layouten ganz einfach</title>
<style type="text/css">
* {margin:0; padding:0;}
html {
height:100%;
font-size:100.01%;
}
body {
width:100%;
display:block;
background-color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
}
#container {
width:960px;
margin:0 auto;
overflow:auto;
}
#header {
width:960px;
height:100px;
background-color:#ffffcc;
}
#topnavi {
width:960px;
height:25px;
background-color:#ff9900;
}
#menue_links {
float:left;
width:200px;
background-color:#ffffcc;
}
#menue_rechts {
float:right;
width:200px;
background-color:#ffffcc;
}
#content {
overflow:auto;
background-color:#f7f7f7;
}
#footer {
width:960px;
height:25px;
background-color:#ff9900;
}
</style>
</head>
<body>
<!--beginn container-->
<div id="container">
<div id="header">Header</div><!--end header-->
<div id="topnavi">Topnavi</div><!--end topnavi-->
<div id="menue_links">Menü links</div><!--end menue_links-->
<div id="menue_rechts">Menü rechts</div><!--end menue_rechts-->
<div id="content">Content</div><!--end content-->
<div id="footer">Footer</div><!--end footer-->
</div><!--end container-->
</body>
</html>
Damit nun das ganze aber auch als Template Verwendung findet, müssen wir den CSS-Teil in eine exteren Datei auslagern in der die Einleitung von CSS mit <style> nicht nötig ist, da wir diese Datei als CSS-Datei abspeichern. Kopiere das Sheet in eine neue Datei und nenne diese z. B. dateiname.css und schreibe in den Header <link rel="stylesheet" type="text/css" href="dateiname.css">. Hierbei ist zu beachten das die ausgelagerte Datei im selben Wurzelverzeichniss liegen muss.
Das war´s schon. Nun habt ihr ein (noch sehr bescheidenes) Layout das sich bei jeder Auflösung immer in der Mitte des Bilschirms befindet und darüber hinaus noch einen aufgeräumten HTML-text. Wunderbar, oder??? Im Anhang findet ihr noch ein Bildchen von der Margin- Paddingübung und noch eines von unserem Layout.
...und die Moral von der Geschichte
Aller Anfang ist gar nicht mal so schwer und mit etwas Geduld und Übung kann man schon recht schnell ohne Tabellensuppe ein Layout erstellen. Für den Anfang sollte genügend Info und Links vorhanden sein. Ich wünsche noch viel Spass beim Layouten.
Hier geht es zum zweiten Teil von Layouten ganz einfach!
Links
www.css4you
Clearen - Viele Wege führen nach Rom
www.ohne-css.gehts-gar.net/
de.selfhtml.org/css/index.htm
