Photoshop
Cinema 4d
HTML / CSS
JavaScript
PHP
Flash
Fotografie
Terragen
Webserver
Informatik
Sonstige
Div-Layer und CSS (CSS Tutorial)
Tutorial erstellt von Manuel, letzte Änderung am 10.12.2007
Div-Tags haben zwar selbst wenig mit CSS zu tun, da es sich hierbei um HTML handelt, dennoch lassen sich diese sehr gut mit CSS ausrichten bzw. anordnen.
Da Viele scheinbar große Probleme im Umgang mit div-Tags haben und daher lieber zu Tabellen greifen, möchte ich mit euch mal ein paar einfache, aber typische und daher immer wieder auftretende Beispiele durchgehen. Diese Beispiele sind weitestgehend äquivalent zu komplexeren Modellierungen mit Div-Layern.
Die Umstellung von Tabellen ist auf jeden Fall nicht einfach, da man ganz anders vorgehen und planen muss. Dass sich dieser Umstieg aber lohnt, werde ich noch in einem weiteren Tutorial ansprechen, dass ich dann an dieser Stelle verlinken werde. Daher möchte ich nicht weiter auf die Gründe, warum man ausgerechnet Div-Layern Tabellen vorziehen sollte, eingehen.
Die einfachste Art der Homepage-Gestaltung ist ein einziger Div-Layer. Dieser ist auch meist der Anfang für verschachtelte Seiten, so auch der-Webdesigner.net.
Dieser Layer hat keinen Rahmen, macht aber durchaus Sinn, damit wir eine einheitliche Seitenbreite erhalten, mit der wir arbeiten können. Zudem können wir diesem Layer ganz einfach eine Position zuweisen. In unserem Beispiel, also der-Webdesigner.net, habe ich der gesamten Seite eine mittige Zentrierung zugewiesen.
Schauen wir uns dazu einfach mal den für uns relevanten Teil an.
HTML
Code:
CSS
Code:
In der CSS-Datei definieren wir für den Body-Tag alle allgemeinen Dinge, die für die ganze Seite gelten sollen. So müssen wir diese nicht immer wieder definieren.
Unserem Root-Layer weisen wir nun eine bestimmte Breite zu. Da wir uns vorher im Body-Tag für eine mittige Ausrichtung entschieden haben, haben wir nun ein 982 Pixel breites „Quadrat“ in der Mitte unseres Bildschirms. Diese Breite macht natürlich nur dann Sinn, wenn wir uns für eine Ausrichtung der Seite auf eine Auflösung von 1024*768 Pixeln entschieden haben.
Hinweis:
Grundsätzlich ist es natürlich besser, wenn die Seite auf allen Auflösungen gut zu betrachten ist. Oft ist dies aber nicht ganz so einfach machbar, denn eine Ausrichtung der Seite mit prozentualen Angaben bringt andere Probleme mit sich.
Daher legen wir uns in diesem Fall auf eine Breite fest, die für uns nach einer Analyse der Ziel- und Altersgruppe am sinnvollsten erscheint.
Aber zurück zu unseren CSS-Angaben. Unser Layer soll keinen Rahmen bekommen, da er nur zur Ausrichtung der Seite dienen soll.
Dazu ist folgender Befehl sehr wichtig, der die Seite nun automatisch mittig zentriert ausrichtet:
CSS
Code:
Der erste Wert steht dabei für oben und unten, der zweite für links und rechts. Den zweiten Wert lassen wir daher automatisch berechnen, so dass dieser nach links, wie auch nach rechts immer gleich ist.
Zusätzlich verwenden wir im Body-Tag text-align: center;, damit unsere Seite auch in älteren Versionen des Internet Explorers (5 und 5.5) mittig ausgerichtet wird.
Tipp:
Es macht sehr oft Sinn, jedem div-Layer einen Rahmen, oder wie in unserem Fall, eine Hintergrundfarbe zuzuweisen. So sehen wir genau, wo sich unser Layer befindet und welche Ausmaße dieser annimmt. Oft lassen sich so kleinere Fehler im Quellcode sehr einfach finden.
Den Befehl text-align verwenden wir nun, damit sich der Text und alle untergeordneten Objekte linksbündig anordnen. Würden wir diesen Befehl vergessen, so würde sich alles mittig ausrichten. Der Grund dafür ist der sich im Body befindliche Ausrichtungs-Befehl.
Nun stellt sich die Frage, warum wir unserem Root-Div eine ID zuweisen und keine Klasse. Das machen wir, da wir unsere ID nur genau ein Mal verwenden können, was für unseren Fall ja vollkommen ausreicht. Ein HTML/CSS-Validator würde uns also eine Fehlermeldung ausgeben, falls wir diese ID mehrmals verwenden sollten. Die meisten Browser „missachten“ diesen Fehler jedoch, so dass die Seite im Normalfall richtig angezeigt wird.
Zusätzlich zu unseren Root-Einstellungen definieren wir den Stil für den a-Tag. Somit haben wir auf der gesamten Seite immer den gleichen Mouseover-Effekt, womit wir einen gewissen Erwartungswert bewahren, was heißen soll, dass der Benutzer als Link beispielsweise einen fett und unterstrichen geschriebenen Text erwartet. Wäre dieser nun nicht mehr unterstrichen, so würde der Benutzer diesen Link vermutlich nur schlecht erkennen.
Viel Text für ein wirklich kleines und simples Ergebnis. Ich hoffe dennoch, dass euch dieses Beispiel über den grundsätzlichen Aufbau ein wenig weitergeholfen hat. Prinzipiell beginne ich immer so, wobei die Werte natürlich variieren können.
Wir haben also nun unsere 982 Pixel breite, aber für den Benutzer unsichtbare Grundlage für den Seitenaufbau. Nun wollen wir mehrere Blöcke untereinander anordnen.
Wir erweitern unseren Quellcode nun also wie folgt:
HTML
Code:
CSS
Code:
Wir verwenden für unseren Kopfbereich wieder eine ID, da wir auch diesen Bereich nur einmalig verwenden wollen. Diesem Layer weisen wir nun einen Rahmen, sowie eine Höhe zu. Dort könnten wir nun unsere Bannergrafik positionieren, wie es beispielsweise bei der-Webdesigner.net der Fall ist.
Die nun erstellten Div-Layer passen sich automatisch an die Breite unseres Root-Layers an. Somit haben wir mit diesen Einstellungen keine Arbeit mehr.
Zu guter Letzt wollen wir natürlich auch Layer nebeneinander platzieren. Dazu gibt es ein paar wenige aber wichtige Befehle in CSS:
CSS
Code:
Der Befehl float sorgt dafür, dass andere Elemente um diesen Layer herumfließen. Das bedeutet für uns, dass wir so sehr einfach ein zwei- oder mehrspaltiges Layout entwerfen können.
Erweitern wir unseren Quellcode also wieder um ein paar Zeilen im Content-Bereich unserer Seite:
HTML
Code:
CSS
Code:
Schauen wir uns nun also unsere Seite an. Wir haben nun 2 nebeneinander positionierte Layer, die wir nun mit margin ausrichten können. Wollen wir also etwas Abstand zu unserem Banner-Layer haben, so können wir einfach margin-top: 5px; verwenden.
Mit diesem Befehl bestimmen wir also den äußeren Abstand zu anderen Elementen. Den inneren Abstand bestimmen wir mit padding. So erreichen wir, dass der Inhalt der Seite nicht direkt am Rand unseres Layers klebt. Beachtet dabei, dass der padding-Wert zur Breite des Layers addiert wird. Geben wir also einen 500 Pixel breiten Layer an, so wird dieser mit padding: 10px; 520 Pixel breit, da wir einen inneren Abstand von 10 Pixeln in alle Richtungen definiert haben.
Da wir die float-Befehle auch wieder aufheben wollen um beispielsweise einen über die komplette Breite der Seite gehenden Fußbereich zu definieren, verwenden wir den CSS-Befehl clear: both;.
Okay, machen wir nun aus unseren beiden Spalten zur Übung einfach mal 3 Spalten. Dazu erweitern wir unser Beispiel also wieder um ein paar wenige Zeilen Quellcode. Damit ihr nicht die Übersicht verliert, zeige ich euch nochmals den kompletten HTML/CSS-Quellcode unseres dreispaltigen Layouts.
HTML
Code:
CSS
Code:
Okay, schauen wir uns nun also an, was genau wir verändern müssen.
In unserer HTML-Datei haben wir lediglich einen weiteren Div-Layer hinzugefügt. Unsere CSS-Datei erweitern wir um eine weitere Klasse, die wir einfach mal content_left nennen. Diese schaut genauso aus wie unsere beiden anderen Klassen, jedoch weisen wir dieser ebenfalls als float-Wert links zu. Damit unser Layer nun nicht direkt am Layer für unsere Navigation klebt, weisen wir diesem noch einen margin-Wert zu, der den Abstand zum linken Layer, also unserer Navigation, angibt.
Und schon haben wir aus 2 Spalten ganz einfach 3 Spalten gemacht. Dazu habe ich natürlich auch die Breiten der einzelnen div-Layer verändert, da diese sonst nicht mehr nebeneinander passen würden.
Und, war es wirklich so schwierig? Probiert einfach ein wenig mit den oben genannten Möglichkeiten rum. Verschachtelt euer Layout beliebig, verwendet mehrere Spalten usw.
So versteht man sehr schnell, welche Befehle welche Wirkung auf das Layout haben.
Ich hoffe ich konnte euch die Möglichkeiten der Div-Layer ein wenig näher bringen.
Fragen werden selbstverständlich im Forum beantwortet.
Liebe Grüße,
Manuel
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
Da Viele scheinbar große Probleme im Umgang mit div-Tags haben und daher lieber zu Tabellen greifen, möchte ich mit euch mal ein paar einfache, aber typische und daher immer wieder auftretende Beispiele durchgehen. Diese Beispiele sind weitestgehend äquivalent zu komplexeren Modellierungen mit Div-Layern.
Die Umstellung von Tabellen ist auf jeden Fall nicht einfach, da man ganz anders vorgehen und planen muss. Dass sich dieser Umstieg aber lohnt, werde ich noch in einem weiteren Tutorial ansprechen, dass ich dann an dieser Stelle verlinken werde. Daher möchte ich nicht weiter auf die Gründe, warum man ausgerechnet Div-Layern Tabellen vorziehen sollte, eingehen.
Beispiel 1
Die einfachste Art der Homepage-Gestaltung ist ein einziger Div-Layer. Dieser ist auch meist der Anfang für verschachtelte Seiten, so auch der-Webdesigner.net.
Dieser Layer hat keinen Rahmen, macht aber durchaus Sinn, damit wir eine einheitliche Seitenbreite erhalten, mit der wir arbeiten können. Zudem können wir diesem Layer ganz einfach eine Position zuweisen. In unserem Beispiel, also der-Webdesigner.net, habe ich der gesamten Seite eine mittige Zentrierung zugewiesen.
Schauen wir uns dazu einfach mal den für uns relevanten Teil an.
HTMLCode:
<body>
<div id="root">
</div>
</body>
<div id="root">
</div>
</body>
CSSCode:
body
{
text-align: center;
font-size: 11px;
font-family: Arial;
}
#root
{
width:982px;
margin: 0px auto;
text-align: left;
color: #000000;
background-color: #BBBBBB;
}
#root a
{
color: #000000;
text-decoration: none;
font-weight: bold;
}
#root a:hover
{
color: #FF0000;
}
{
text-align: center;
font-size: 11px;
font-family: Arial;
}
#root
{
width:982px;
margin: 0px auto;
text-align: left;
color: #000000;
background-color: #BBBBBB;
}
#root a
{
color: #000000;
text-decoration: none;
font-weight: bold;
}
#root a:hover
{
color: #FF0000;
}
In der CSS-Datei definieren wir für den Body-Tag alle allgemeinen Dinge, die für die ganze Seite gelten sollen. So müssen wir diese nicht immer wieder definieren.
Unserem Root-Layer weisen wir nun eine bestimmte Breite zu. Da wir uns vorher im Body-Tag für eine mittige Ausrichtung entschieden haben, haben wir nun ein 982 Pixel breites „Quadrat“ in der Mitte unseres Bildschirms. Diese Breite macht natürlich nur dann Sinn, wenn wir uns für eine Ausrichtung der Seite auf eine Auflösung von 1024*768 Pixeln entschieden haben.
Hinweis:
Grundsätzlich ist es natürlich besser, wenn die Seite auf allen Auflösungen gut zu betrachten ist. Oft ist dies aber nicht ganz so einfach machbar, denn eine Ausrichtung der Seite mit prozentualen Angaben bringt andere Probleme mit sich.
Daher legen wir uns in diesem Fall auf eine Breite fest, die für uns nach einer Analyse der Ziel- und Altersgruppe am sinnvollsten erscheint.
Aber zurück zu unseren CSS-Angaben. Unser Layer soll keinen Rahmen bekommen, da er nur zur Ausrichtung der Seite dienen soll.
Dazu ist folgender Befehl sehr wichtig, der die Seite nun automatisch mittig zentriert ausrichtet:
CSSCode:
margin: 0px auto;
Der erste Wert steht dabei für oben und unten, der zweite für links und rechts. Den zweiten Wert lassen wir daher automatisch berechnen, so dass dieser nach links, wie auch nach rechts immer gleich ist.
Zusätzlich verwenden wir im Body-Tag text-align: center;, damit unsere Seite auch in älteren Versionen des Internet Explorers (5 und 5.5) mittig ausgerichtet wird.
Tipp:
Es macht sehr oft Sinn, jedem div-Layer einen Rahmen, oder wie in unserem Fall, eine Hintergrundfarbe zuzuweisen. So sehen wir genau, wo sich unser Layer befindet und welche Ausmaße dieser annimmt. Oft lassen sich so kleinere Fehler im Quellcode sehr einfach finden.
Den Befehl text-align verwenden wir nun, damit sich der Text und alle untergeordneten Objekte linksbündig anordnen. Würden wir diesen Befehl vergessen, so würde sich alles mittig ausrichten. Der Grund dafür ist der sich im Body befindliche Ausrichtungs-Befehl.
Nun stellt sich die Frage, warum wir unserem Root-Div eine ID zuweisen und keine Klasse. Das machen wir, da wir unsere ID nur genau ein Mal verwenden können, was für unseren Fall ja vollkommen ausreicht. Ein HTML/CSS-Validator würde uns also eine Fehlermeldung ausgeben, falls wir diese ID mehrmals verwenden sollten. Die meisten Browser „missachten“ diesen Fehler jedoch, so dass die Seite im Normalfall richtig angezeigt wird.
Zusätzlich zu unseren Root-Einstellungen definieren wir den Stil für den a-Tag. Somit haben wir auf der gesamten Seite immer den gleichen Mouseover-Effekt, womit wir einen gewissen Erwartungswert bewahren, was heißen soll, dass der Benutzer als Link beispielsweise einen fett und unterstrichen geschriebenen Text erwartet. Wäre dieser nun nicht mehr unterstrichen, so würde der Benutzer diesen Link vermutlich nur schlecht erkennen.
Viel Text für ein wirklich kleines und simples Ergebnis. Ich hoffe dennoch, dass euch dieses Beispiel über den grundsätzlichen Aufbau ein wenig weitergeholfen hat. Prinzipiell beginne ich immer so, wobei die Werte natürlich variieren können.
Beispiel 2
Wir haben also nun unsere 982 Pixel breite, aber für den Benutzer unsichtbare Grundlage für den Seitenaufbau. Nun wollen wir mehrere Blöcke untereinander anordnen.
Wir erweitern unseren Quellcode nun also wie folgt:
HTMLCode:
<body>
<div id="root">
<div id="head">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
<div id="root">
<div id="head">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
CSSCode:
#head
{
border: 1px solid #000000;
height:100px;
margin: 0px;
}
…
…
…
{
border: 1px solid #000000;
height:100px;
margin: 0px;
}
…
…
…
Wir verwenden für unseren Kopfbereich wieder eine ID, da wir auch diesen Bereich nur einmalig verwenden wollen. Diesem Layer weisen wir nun einen Rahmen, sowie eine Höhe zu. Dort könnten wir nun unsere Bannergrafik positionieren, wie es beispielsweise bei der-Webdesigner.net der Fall ist.
Die nun erstellten Div-Layer passen sich automatisch an die Breite unseres Root-Layers an. Somit haben wir mit diesen Einstellungen keine Arbeit mehr.
Beispiel 3
Zu guter Letzt wollen wir natürlich auch Layer nebeneinander platzieren. Dazu gibt es ein paar wenige aber wichtige Befehle in CSS:
CSSCode:
float: left;
float: right;
float: right;
Der Befehl float sorgt dafür, dass andere Elemente um diesen Layer herumfließen. Das bedeutet für uns, dass wir so sehr einfach ein zwei- oder mehrspaltiges Layout entwerfen können.
Erweitern wir unseren Quellcode also wieder um ein paar Zeilen im Content-Bereich unserer Seite:
HTMLCode:
<body>
<div id="root">
<div id="head">
</div>
<div id="content">
<div class="navi_left">
Navigation
</div>
<div class="content_right">
Inhalt
</div>
</div>
<div id="footer">
</div>
</div>
</body>
<div id="root">
<div id="head">
</div>
<div id="content">
<div class="navi_left">
Navigation
</div>
<div class="content_right">
Inhalt
</div>
</div>
<div id="footer">
</div>
</div>
</body>
CSSCode:
.navi_left
{
width: 140px;
float: left;
border: 1px solid #FF0000;
padding: 5px;
}
.content_right
{
width: 800px;
float: right;
border: 1px solid #FF0000;
padding: 10px;
}
{
width: 140px;
float: left;
border: 1px solid #FF0000;
padding: 5px;
}
.content_right
{
width: 800px;
float: right;
border: 1px solid #FF0000;
padding: 10px;
}
Schauen wir uns nun also unsere Seite an. Wir haben nun 2 nebeneinander positionierte Layer, die wir nun mit margin ausrichten können. Wollen wir also etwas Abstand zu unserem Banner-Layer haben, so können wir einfach margin-top: 5px; verwenden.
Mit diesem Befehl bestimmen wir also den äußeren Abstand zu anderen Elementen. Den inneren Abstand bestimmen wir mit padding. So erreichen wir, dass der Inhalt der Seite nicht direkt am Rand unseres Layers klebt. Beachtet dabei, dass der padding-Wert zur Breite des Layers addiert wird. Geben wir also einen 500 Pixel breiten Layer an, so wird dieser mit padding: 10px; 520 Pixel breit, da wir einen inneren Abstand von 10 Pixeln in alle Richtungen definiert haben.
Da wir die float-Befehle auch wieder aufheben wollen um beispielsweise einen über die komplette Breite der Seite gehenden Fußbereich zu definieren, verwenden wir den CSS-Befehl clear: both;.
Beispiel 4
Okay, machen wir nun aus unseren beiden Spalten zur Übung einfach mal 3 Spalten. Dazu erweitern wir unser Beispiel also wieder um ein paar wenige Zeilen Quellcode. Damit ihr nicht die Übersicht verliert, zeige ich euch nochmals den kompletten HTML/CSS-Quellcode unseres dreispaltigen Layouts.
HTMLCode:
<body>
<div id="root">
<div id="head">
</div>
<div id="content">
<div class="navi_left">
Navigation
</div>
<div class="content_left">
Inhalt links
</div>
<div class="content_right">
Inhalt rechts
</div>
</div>
<div id="footer">
</div>
</div>
</body>
<div id="root">
<div id="head">
</div>
<div id="content">
<div class="navi_left">
Navigation
</div>
<div class="content_left">
Inhalt links
</div>
<div class="content_right">
Inhalt rechts
</div>
</div>
<div id="footer">
</div>
</div>
</body>
CSSCode:
body
{
text-align: center;
font-size: 11px;
font-family: Arial;
}
#root
{
width:982px;
height: 100px;
margin: 0px auto;
text-align: left;
color: #000000;
background-color: #BBBBBB;
}
#root a
{
color: #000000;
text-decoration: none;
font-weight: bold;
}
#root a:hover
{
color: #FF0000;
}
#head
{
border: 1px solid #000000;
height:100px;
margin: 0px;
}
.navi_left
{
width: 140px;
float: left;
border: 1px solid #FF0000;
padding: 5px;
}
.content_left
{
width: 380px;
float: left;
border: 1px solid #FF0000;
padding: 10px;
margin-left: 10px;
}
.content_right
{
width: 380px;
float: right;
border: 1px solid #FF0000;
padding: 10px;
}
{
text-align: center;
font-size: 11px;
font-family: Arial;
}
#root
{
width:982px;
height: 100px;
margin: 0px auto;
text-align: left;
color: #000000;
background-color: #BBBBBB;
}
#root a
{
color: #000000;
text-decoration: none;
font-weight: bold;
}
#root a:hover
{
color: #FF0000;
}
#head
{
border: 1px solid #000000;
height:100px;
margin: 0px;
}
.navi_left
{
width: 140px;
float: left;
border: 1px solid #FF0000;
padding: 5px;
}
.content_left
{
width: 380px;
float: left;
border: 1px solid #FF0000;
padding: 10px;
margin-left: 10px;
}
.content_right
{
width: 380px;
float: right;
border: 1px solid #FF0000;
padding: 10px;
}
Okay, schauen wir uns nun also an, was genau wir verändern müssen.
In unserer HTML-Datei haben wir lediglich einen weiteren Div-Layer hinzugefügt. Unsere CSS-Datei erweitern wir um eine weitere Klasse, die wir einfach mal content_left nennen. Diese schaut genauso aus wie unsere beiden anderen Klassen, jedoch weisen wir dieser ebenfalls als float-Wert links zu. Damit unser Layer nun nicht direkt am Layer für unsere Navigation klebt, weisen wir diesem noch einen margin-Wert zu, der den Abstand zum linken Layer, also unserer Navigation, angibt.
Und schon haben wir aus 2 Spalten ganz einfach 3 Spalten gemacht. Dazu habe ich natürlich auch die Breiten der einzelnen div-Layer verändert, da diese sonst nicht mehr nebeneinander passen würden.
Hilfreiche Tipps
- Rückt eure div-Layer immer ein. So sieht man auch bei größeren Seiten schnell, wo ein Layer beginnt und wo er aufhört.
- Gebt euren Klassen und IDs immer sinnvolle Namen. Beispielsweise Navigation, wenn es sich dabei um eine Navigation handelt. So verliert ihr in eurer CSS-Datei nicht den Überblick, denn diese kann sehr schnell sehr groß werden.
- Definiert einmalige Layer auch wirklich mit einer ID, denn dafür sind diese gemacht. Klassen machen immer dann Sinn, wenn ihr den Stil auch auf andere Elemente übertragen könnt.
- Übung macht den Meister. Auch wenn es anfangs etwas umständlich ist, das Layouten mit div-Layern lohnt sich.
Und, war es wirklich so schwierig? Probiert einfach ein wenig mit den oben genannten Möglichkeiten rum. Verschachtelt euer Layout beliebig, verwendet mehrere Spalten usw.
So versteht man sehr schnell, welche Befehle welche Wirkung auf das Layout haben.
Ich hoffe ich konnte euch die Möglichkeiten der Div-Layer ein wenig näher bringen.
Fragen werden selbstverständlich im Forum beantwortet.
Liebe Grüße,
Manuel
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
