Div-Container-Grundlagen

Hier sind nun einmal ein par Grundlagen zur Seitenerstellung mit Containern. Dieser Kurs richtet sich natürlich an Anfänger und solche, die es werden wollen.
Der Container ist, wie der Name schon sagt, ein Behälter, mit dem etwas transportiert wird. Hier in diesem Fall natürlich keine Waren, sondern ganz normale html-Befehle. Das heisst, in diese Container kann ich Texte, Bilder, Farben, Videos u.s.w. packen und damit eine Seite gestalten. Alles was ich in Tabellen packe, kann ich auch in einen Container packen. Aber warum Container - wenn man mit den herkömmlichen Tabellen das gleiche erreicht!? Der Hauptgrund ist natürlich die absolute Freiheit in der Positionierung von Containern. Man kann sie auf jeder Stelle des Bildschirmes anordnen - nebeneinander, übereinander und sogar aufeinander. Macht das mal mit Tabellen! Ganz klar, das geht einfach nicht. Ein weiterer Grund ist die einfache Schreibweise bei der Seitenerstellung. Es gibt keine kilometerlangen Kolonnen von ineinander verschachtelten Tabellen. Alles ist sehr viel kürzer und übersichtlicher, womit natürlich auch die Ladezeiten der Seiten sinken.
Mit ein par Grundkenntnissen in CSS ist jeder in der Lage, Seiten mit Containern zu erstellen. Uralt-Browser können Container übrigens nicht ohne weiteres darstellen.

Beispiele für Seiten, die nur aus Containern bestehen.
- natürlich diese Seite hier
- Ravinjas dunkle Seite
- Sarahlis Bude

Natürlich gibt es viele Methoden eine Seite ins Netz zu stellen und ich will auch keineswegs die "Tabellengestalter" runtermachen. Aber man sollte auch nicht die Augen vor neuem verschließen und ein Versuch kann nicht schaden.

Dann mal los !

Der Grundbefehl ist
<div></div>
Möglich wären auch
<p></p> oder <span></span>
Natürlich ist da noch nichts zu erkennen, deshalb geben wir dem Kind jetzt einen Namen, definieren einen Rahmen, die Position und Hintergrundfarbe.

<div id="Versuch1" style="position:absolute; width:300px; height:100px; z-index:1; background-color: #FF0000; border: 2px solid #FFFFFF; left: 200px; top: 50px"></div>
Das sieht dann in etwa so aus


div id="Name"
- ist praktisch der Name des Containers und frei wählbar

position:absolute
- bestimmt die absolute Positionierung des Containers. Möglich wäre auch "position:fixed" eine Alternative zu Frames. Da gibt es aber Probleme mit dem IE. Firefox stellt es richtig dar.

width:300px
- natürlich die Breite (Maßeinheiten frei wählbar).

height:200px
- richtig!! -die Höhe. (Maßeinheiten frei wählbar)- Gibt es in der Höhe und Breite keine Angaben, nimmt das Div immer die gesamte Breite ein und passt sich in der Höhe dem Inhalt an.

z-index:1
- Damit läßt sich die Reihenfolge beim übereinander legen besser bestimmen.

background-color: #FF0000
- Eine Hintergrundfarbe, falls benötigt. Wird keine definiert, ist der Container vorläufig nicht sichtbar.

border: 2px solid #FFFFFF
- Der Rahmen, Stärke und Farbe natürlich auch frei definierbar. Kann man auch weglassen.

left: 100px; top: 100px
Und das ist der Clou! Damit setzt man den Container an eine bestimmte Stelle, wobei der Wert "left" den Abstand vom linken Rand angibt und der Wert "top" den Abstand von oben.

<div id="Versuch2" style="position:absolute; width:120px; height:25px; z-index:3; background-color: #FF0000; border: 1px solid #FFFFFF; left: 50px; top: 50px; text-align:center;">Beispiel</div> <div id="Versuch3" style="position:absolute; width:120px; height:25px; z-index:1; background-color: #0A27B8; border: 1px solid #FFFFFF; left: 170px; top: 50px; text-align:center;">Beispiel</div> <div id="Versuch4" style="position:absolute; width:120px; height:25px; z-index:2; background-color: #A49B08; border: 1px solid #FFFFFF; left: 110px; top: 35px; text-align:center;">Beispiel</div>

In diesem Beispiel oben sehen wir drei Container, wobei alle auf unterschiedlichen Ebenen angeordnet sind.
<div id="Versuch5" style=" width:120px; height:20px; z-index:1; background-color: #FF0000; border: 1px solid #FFFFFF; float:left; text-align:center;">Navigation</div> <div id="Versuch6" style=" width:120px; height:20px; z-index:1; background-color: #FF0000; border: 1px solid #FFFFFF; float:left; text-align:center;">Navigation</div> <div id="Versuch7" style=" width:120px; height:20px; z-index:1; background-color: #FF0000; border: 1px solid #FFFFFF; float:left; text-align:center;">Navigation</div> <div style="clear: both;"></div>

Wie in diesem Beispiel zu sehen ist, können Container auch ohne den "position:absolute" Befehl ganz normal im Body angeordnet werden. Um sie hier nebeneinander zu bekommen, muß man den Befehl "float" benutzen. Das wäre zum Beispiel bei der Erstellung einer horizontalen Navigation interessant. Nach dem "floaten" muß man "clearen" - im Textbeispiel zu sehen!
Lässt man "float" im obigen Beispiel weg, ordnen sich die Container schön untereinander an, was dann wieder für eine vertikale Navigation zu verwenden wäre.

<div id="Versuch8" style=" width:120px; height:20px; z-index:1; background-color: #FF0000; border: 1px solid #FFFFFF; text-align:center;">Navigation</div> <div id="Versuch9" style=" width:120px; height:20px; z-index:1; background-color: #FF0000; border: 1px solid #FFFFFF; text-align:center;">Navigation</div> <div id="Versuch10" style=" width:120px; height:20px; z-index:1; background-color: #FF0000; border: 1px solid #FFFFFF; text-align:center;">Navigation</div>

Das war es schon in groben Zügen. Die "style"- Anweisungen kann man in eine extra CSS-Datei schreiben. Wer Fragen zu den Erklärungen hat, kann das Kontaktformular benutzen.

---

©GOTHIC HORROR HAUS

---