[HTML/CSS] [TUT; HTML/CSS]Wie nutze ich Divs für Layouts?

Soo, da das alte Tutorial wohl nicht so der Kracher war hier das Neue.

Vorwort: Wieso xHTML?

Da wir in diesem Tutorial mit xHTML abreiten werden, sollten euch die Unterschiede zum normalen HTML bekannt sein.

Diese sind im Allgemeinen:

- die aufgeräumte Art von xHTML. Schriftarten, -größen usw. werden nicht mehr in der HTML Datei verpackt sondern in eine externe CSS Datei geschrieben, das verleiht xHTML den Vorteil, dass die spätere Website schneller läd und viel einfacher zu bearbeiten ist.
- die Strengheit gegenüber dem alt bekannten HTML. So werden Fehler wie das vergessen des Schließtags oder Ähnliches nicht mehr genehmigt und daher auch nicht korrekt vom Browser angezeigt.
- die veränderte Schließform einiger Tags. img, embed und andere Tags in denen sozusagen kein schriftlicher Inhalt enthalten sein kann werden mit einem Slash am Ende des Öffnungstags geschlossen (Beispiel <img src="images/...png" .. />).

Zudem sind noch einige andere Änderungen vorhanden die vorerst aber nicht von Interesse sind oder im späteren Verlauf des Tutorials noch folgen werden.

Schritt 1: Die richtige Deklaration

Da xHTML auf der Programmiertsprache XML basiert, muss am Anfang jedes xHTML Dokuments eine Deklaration dazu stehen. Natürlich darf die Doctype Deklaration nicht fehlen und auch im <html> Tag muss einiges eingetragen werden.
Das ganze sieht dann so aus:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

<?xml version="1.0" ?> # Die XML Deklaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  # Die Doctype Deklaration
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> # Und schließlich der Eintrag in den <html> Tag
<head>
<title>Titel der Seite</title>
</head>
<body>

</body>
</html>

Momentan bin ich mir nicht ganz sicher welche xHTML Version am gegeignetesten ist daher nehme ich einfach die Neueste xHTML 1.1.

Schritt 2: Der <head></head> Tag

In ihm werden so einige Informationen gespeichert. Z.B. über Meta Tags oder Links zu externen Dateien wie CSS Files oder Javascripts.
Da ich Meta Tags für vollkommen unnütz halte, verweise ich hier nur auf eine andere Seite in der die Anwednung von diesen erklärt wird: klick hier!

Neben den Meta-Tags gehören die Einbindungen in den Head-Bereich. Wir möchten eine externe CSS Datei einbinden, dies sieht dann so aus:

code:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12:	<html> <head> <title>Titel der Seite</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html>

rel="stylesheet" steht für den Bezug zu einer Style-Definiton, die zur Darstellung deiner Seite benötigt wird. type="text/css" zeigt dem Browser den MIME Typ an, dabei sagt text aus, dass es eine Textdatei ist und css eben, dass es einen Stylesheet beinhaltet. href="style.css" zeigt dem Browser dann schließlich welche Datei er denn laden soll.

Schritt 3: Vorarbeit

Für den weiteren Verlauf benötigen wir nun also 2 Dateien. Eine HTML Datei und eine Stylesheet Datei. Die HTML Datei sollte nach dem obigen konzept aufgebaut sein d.h. sie sollte so aussehen:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel der Seite</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

</body>
</html>

Beide Dateien könnt ihr erstellen indem ihr unter "Start -> Programme -> Zubehör" den Editor öffnet. Für die HTML Datei fügt ihr den Code ein klickt auf "Datei -> Speichern Unter..." wählt euren Speicherort und schaut dabei, dass unter Dateiname index.html steht und der Dateityp auf "Alle Dateien" gesetzt ist. Klickt nun auf "Speichern". Bei der CSS Datei müsst ihr das selbe tun nur, dass ihr statt index.html, style.css in die Dateinamen Zeile eingebt. Beide Dateien müssen im selben Verzeichnis gespeichert sein!

Schritt 4: Das Layout

Nun kommen wir zum eigentlichen Layout der Seite. In diesem Tutorial zeige ich euch wie ihr das am öftesten genutzte Layout hinbekommt: Das 3 Spalten Layout. (Es dient nur zur Einführung, für weitere Layouttypen könnt ihr unten unter dem Beitrag einen Link zur weiteren Layout Möglichkeiteiten finden.) Wie der Name schon sagt besteht es aus 3 Spalten, 2 Navis links und rechts für Links und nebensächliche Informationen und einem Inhaltsbereich in der Mitte.

Zuerst öffnet ihr die kürzlich erstellte HTML Datei mit eurem Editor (dazu Rechtsklick auf die Datei -> Öffnen mit -> Editor) und ergänzt zwischen <body></body> Tags den folgenden Code.

code:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10:	<div id="container"> <div id="links"></div> <div id="mitte"></div> <div id="rechts"></div> <div id="clearing"></div> </div>

id="..." verweist dabei auf die CSS Datei in denen diese ID's für den Browser erläutert werden.

Nun öffnet ihr mit einem Doppelklick die style.css Datei. Ihr fügt folgenden Code ein.

code:

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:
27:
28:

#container {
  margin: 50px auto;
  width: 800px;
}
#links {
  float: left;
  width: 20%;
  height: 100px;
  background-color: #BFBFBF;
}
#mitte {
  float: left;
  width: 55%;
  height: 200px;
  background-color: #BFBFBF;
  margin-right: 5px;
  margin-left: 5px;
}
#rechts {
  float: left;
  width: 20%;
  height: 100px;
  background-color: #BFBFBF;
}
clearing {
 clear: both;
}

Durch float: left; verhindert man, dass die Divs sich untereinander stapeln. Die Begriffe width und height sollten bekannt sein, sie bestimmen die Höhe und die Breite der Divs. background-color bestimmt einfach nur die Hintergrundfarbe. Mit margin-left und margin-right bewirkt man, dass die Divs nicht aneinander kleben sondern zu 3 Kästen werden. Mit clear: both; stoppt man den Befehl float: left; dies ist nötig damit wirklich alles klappt. Außerdem haben wir durch den Div der alles umschließt (#container) alles in eine bestimmte Größe verpackt und mit margin: 50px auto; alles ersteinmal 50px vom oberen Rand wegbewegt und in die in der Vertikalen alles in die Mitte gesetzt.

Nun könnt ihr das Ganze noch euren Wünschen nach aufpeppeln z.B. mit Bordern oder mit euren Lieblingsfarben. Außerdem könnt ihr noch einen Innenabstand durch padding: Xpx; einbauen. Das ist ganz euch überlassen.

Schriftarten, -größen und -farben

Da die meißten Browser als Standartschriftart Times New Roman haben, müssen in eurer CSS Datei explizit genannt werden welche Schriftart, welche Schriftgröße und welche Farbe genutzt werden soll. Das erreicht man mit folgendem Code:

code:
1: 2: 3: 4: 5: 6:	body { font-family: Arial, Verdana, Helvetica; font-size: 12px; color: #424242; }

Durch font-family: Arial, Verdana, Helvetica; stellen wir die Schriftart auf Arial ein. Verdana und Helvetica stehen dann noch dort um zu gewährleisten, dass irgendeine deiner ausgewählten Schriftarten genommen wird, falls Arial auf dem Computer des Besuchers nicht zur Verfügung steht. Wenn dies der Fall ist wird Verdana genutzt usw. font-size: 12px; stellt die Schriftgroße ein, die ich auf 12px gesetzt habe. Die Schriftfarbe wird dann schließlich mit color: #424242; festgelegt.

Durch die gleiche Methode kann man dann auch eigene Hintergründe für das Navi oder den Inhaltsbereich verwenden. background-color muss durch background-image: url(); und dem Dateipfad des Hintergrundbildes in den beiden Klammern ersetzt werden. Außerdem ist es bei Hintergrundbildern von Vorteil mit Pixelangaben statt mit Prozenten zu arbeiten.

Falls ihr noch Fragen zum ganzen Thema habt und hilfe braucht dann postet sie hier. Ich denke einige Leute wie z.B. CrAc, der sich in diesem Thema sehr gut auskennt, können euch weitere Tipps geben. Ich stehe natürlich auch zur Verfügung

http://www.stichpunkt.de/css/bereiche.html Hier noch der versprochene Link.

http://www.colorschemer.com/online.html Ein toller Link für Farben. Ihr könnt dort passende Farben herrausfinden um das Layout aufzupeppen. Ihr könnt euch alle Farben als Hex Zahlen anzeigen lassen und sie so in euer Layout einarbeiten.

Das ist so das was ich euch zum Thema Sagen kann. Alles weitere basiert eigentlich auf dem selben Prinzip ist nur etwas verschachtelter usw.

Gruß,
Greckoe

PS: Einwenig Text zum Thema Schriftarten für das Ganze Zeug hier wird noch folgen.

Thanks for this thread by the author

Until now 9 users have thanked

This post has been edited 2 time(s), it was last edited by PearlyGates: 23.04.2011 23:25.

GFX-Sector - HTML & CSS Tutorials

HTML & CSS Tutorials

[TUT; HTML/CSS]Wie nutze ich Divs für Layouts?

[TUT; HTML/CSS]Wie nutze ich Divs für Layouts?

Have you enjoyed this topic?