Ein DIV-Layout erstellen

Takeyo — Wed, 14 Oct 2009 15:24:02 +0000

Ein Layout mit DIVs anstatt Tabellen und iFrames?
Kein Problem! Mit diesem Tutorial und einer passenden Vorlage lernt ihr ganz schnell wie das geht.

Du möchtest also ein DIV Layout erstellen? Also gut, ich werde dir zeigen wie man eines Macht.
Zu nächsteinmal werde ich dir erklären was ein DIV ist und welche Vorteile ein DIV-Layout gegenüber ein Table-Layout’s hat.
Ich werde dann Schritt für Schritt erklären wie ich genau diese Webseite hier erstellt habe (übrigens, ich habe hierfür nur 20 Minuten gebraucht!)

Achtung!
Dieses Tutorial bezieht sich auf folgende Vorlage:
http://takeyo.de/div.html

Wieso DIVs?

Diese Frage musste ich mir am Anfang auch stellen, da ich dachte, dass man mit Tabellen viel besser Layouts aufbauen kann. Tatsächlich denken viele Leute so, doch Tabellen sind nicht für Layoutstrukturierungen gedacht. DIVs sind viel flexibler und man kann leicht ihre Größe ändern oder sie mit Javascript hin und herschieben.
Es wird am Anfang bestimmt schwer von Tabellen und iFrames loszulassen, aber mit DIVs bist du echt im Trend

Das DIV Objekt

Ein Div ist eine Art Box. Quadratisch, praktisch, gut! Ein Div wird in HTML so geschrieben:

1	<div>Inhalt</div>

Zunächst geben wir dem DIV eine ID oder eine Klasse.
ID: Eine ID ist ein einmaliges Objekt im Dokument. Man kann nicht mehrere Objekte mit der gleichen ID besetzen.
Klasse: Eine Klasse (Class) kann für unendlich viele Objekte im Dokument benutzt werden. Es gibt kein Limit.

Wir besetzen unser DIV also mit der ID “box”:

1
2
3
4
5

// Beispiel für eine ID
<div id="box"></div>

// Beispiel für eine Klasse
<div class="box"></div>

Bis jetzt hat sich aber noch nichts getan.
Nun müssen wir die ID in dem Stylesheet Bereich mit Eigenschaften belegen. Der Stylesheet Bereich kommt in den Head Bereich des Dokuments. Das ganze sollte dann so aussehen:

1
2
3
4
5
6
7
8
9
10
11

<head>
<style type="text/css">

// Beispiel für eine ID
#box { width: 50px; height: 50px; background-color: red; }

// Beispiel für eine Klasse
.box { width: 50px; height: 50px; background-color: red; }

</style>
</head>

Unser DIV sollte nun als roter quadratischer Kasten angezeigt werden.

Jeder mit Mensch mit Englischkenntnissen versteht was hier passiert ist.
Ich habe dem DIV folgende Eigenschaften Zugeteilt:

width: 50px; ← bedeutet, dass das DIV 50px breit ist.
height: 50px; ← bedeutet, dass das DIV 50px hoch ist.
background-color: red; ← bedeutet, dass das DIV eine rote Hintergrundfarbe hat.

Man kann ein DIV natürlich noch mit vielen weiteren Eigenschaften bearbeiten.
Nun, du solltest nun wissen was ein DIV ist und wie man es mit Eigenschaften sichtbar macht.

Ein Layout erstellen – Schritt 1

So, nun da du ungefähr weißt was DIVs sind können wir Anfang diese Webseite hier nachzubauen.
Dieses Layout besitzt einen Header, eine Navigation und einen Content.
Wir müssen nun diese 3 Bereiche als DIVs scheiben:

1
2
3

="header">Meine Homepage</div>
="navi">Inhalt</div>
="content">Inhalt</div>

Unglaublich aber war, mehr brauch man nicht für ein DIV Layout.
Nun müssen wir aber diese 3 DIVs natürlich noch in unserem Stylesheet Bereich bearbeiten. Doch bevor das passiert müssen wir erst etwas anderes bearbeiten. Und zwar den Body Tag. Der Body Tag schließt alles sichtbare auf der Webseite ein. Ich habe unsere Seite mal mit folgenden Eigenschaften belegt:

1
2
3
4
5
6
7
8

body {
width: 800px;/* Breite des Layouts */
margin-left: auto;/* Der Wert "auto" platzieren das Layout mittig. Vorraussetzung: width. */
margin-right: auto;
background-color: #5d5d5d;/* Hintergrundfarbe */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;/* Schriftart */
font-size: 12px;/* Schriftgröße */
}

Ich habe die einzelnen Eigenschaften mit Kommentaren versehen um ihre Auswirkungen zu beschreiben.
Nun kommt der Header:

1
2
3
4
5
6
7
8
9

#header {
height: 80px;/* Höhe des Headers */
max-width: 800px;/* Max. Breite, damit der Header das Layout nicht sprengt. */
background-color: #fff;/* Hintergrundfarbe */
text-align: center;/* Text wird mittig ("center") platziert. */
padding-top: 50px;/* 20px innerer Abstand vom Rand zum Text */
font-size: 24px;/* Schriftgröße soll 24px betragen. */
font-weight: bold;/* Schrift soll FETT erscheinen */
}

Nun sollte die Seite aus einem grauen Hintergrund und unserem Header bestehen.
Machen wir also weiter mit den anderen DIVs um das Layout zu vervollständigen. Hier kommt die Navigation:

1
2
3
4
5
6

#navi {
float: left;/* Div wird nach links ("left") ausgerichtet. */
width: 120px;/* Breite der Navigation */
background-color: #fff;/* Hintergrundfarbe */
padding: 3px;/* 3px innerer Abstand vom Rand zum Text */
}

Hier kommt jetzt die Eigenschaft “float” ins Spiel, welche sehr wichtig ist. Denn DIV’s haben die Angewohnheit sich untereinander zu Positionieren. Doch wenn wir alle DIVs untereinander machen würden, hätten wir keine Seitennavigation mehr. Also, “float” setzt das DIV in die angegebene Position, sodass das folgende DIV anstatt darunter, daneben gesetzt wird. Allerdings muss dieses nachfolgende DIV die gleiche Eigenschaft besitzen, so wie ich es hier beim Content gemacht habe:

1
2
3
4
5
6

#content {
float: left;/* Div wird nach links ("left") ausgerichtet. */
width: 668px;/* Breite des Contents */
background-color: #fff;/* Hintergrundfarbe */
padding: 3px;/* 3px innerer Abstand vom Rand zum Text */
}

So, nun solltest du schon eine Ähnlichkeit zu diesem Layout hier und dem, welches du gemacht hast erkennen.
Allerdings fehlt jetzt noch der Inhalt des Contents und der Navigation, also auf zu Schritt 2!

Ein Layout erstellen – Schritt 2

So, das Grundgerüst steht. Nun kümmern wir uns um den Inhalt. Angefangen im Content. Wir machen nun eine Überschrift, ebenfalls als DIV.
Wir schreiben also nun in das Content DIV folgendes:

1	<div class="titel">Titel</div>

Dieses DIV unterscheidet sich ein wenig von den anderen. Es hat anstatt einer ID eine Klasse. Wieso? Weil wir davon ausgehen, dass diese Titel mehrmals in einem Dokument vorkommen werden. Nun müssen wir es auch dementsprechend in dem Stylesheet Bereich bearbeiten:

1
2
3
4
5
6
7
8
9
10

>
.titel {
width:100%;>/* Breite des DIVs ("100%" = automatische max. Breite) */>
height: 17px;>/* Höhe des DIVs */>
background-color: #069;>/* Hintergrundfarbe */>
color: #fff;>/* Schriftfarbe */>
text-align: center;>/* Textausrichtung ("center" = mittig)*/>
padding-top: 3px;>/* 3px innerer Abstand zum Rand */>
margin-bottom: 10px;>/* 10px äußerer Abstand zum Rand */>
}

Diesen DIV kannst du immer dann einsetzen, wenn du einen neuen Titel brauchst.
Nun kommen wir zu der Navigation, hier kommen etwas mehr Eigenschaften auf uns zu.
Als erstes füllen wir unsere Navigation mit einem Titel und ein paar Links. Das kann dann so aussehen:

1
2
3
4
5
6

<div id="navi">
<div class="titel">Navigation</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

So und nun kommen wir zu dem Stylesheet Bereich. Die Links in dem Navi DIV werden so angesprochen:

1
2
3
4
5
6
7
8
9

#navi a {
color: black;/* Schriftfarbe */
text-decoration: none;/* Link wird nicht unterstrichen */
display: block;/* Setzt alle Links untereinander */
background-color: #DDD;/* Hintergrundfarbe */
max-width: 116px;/* Breite des Links */
margin-bottom: 3px;/* 3px äußerer Abstand zum Rand */
padding: 3px;/* 3px innerer Abstand zum Rand */
}

Nun sollten die Links in der Navigation aussehen wie in diesem Layout hier.
Doch wir müssen noch zwei kleine extras zu den Links einbauen.
Extra nr.1 ist ein “Hover”-Effekt, der erscheint, wenn man mit der Maus über einen Link fährt.
Und das machen wir so im Stylesheet Bereich:

1
2
3
4

#navi a:hover {
background-color: #CCC;/* Hintergrundfarbe */
color: #fff;/* Schriftfarbe */
}

So und jetzt noch als letztes eine Einstellung, die bereits besuchte Links nicht Lila verfärbt:

1
2
3

#navi a:visited {
color: black;/* Schriftfarbe */
}

So, nun ist alles Fertig!!

Du hast nun ein komplettes Layout aus DIVs erstellt und kannst es jetzt noch weiter bearbeiten.
Wenn du sehen willst, wie ich die DIVs mit dem HTML Code gemacht habe oder den Footer am unteren Rand, schau einfach im Quelltext.

Du kannst dieses Layout weiterhin verwenden wenn du magst.

Liebe Grüße Take!

Punkt . 16 » CSS

Ein DIV-Layout erstellen

Wieso DIVs?

Das DIV Objekt

Ein Layout erstellen – Schritt 1

Ein Layout erstellen – Schritt 2