Aktuelles
- Home
- Aktuelles
- Unser Angebot
- Kontakt
- Impressum
Aktuelles: Ein interessanter Artikel
Interessanter Artikeltext
++++
{{:inf:web:ik-25-3.jpg?700|}}
{{:inf:web:ik-26-1b.jpg?700|}}
\\
===== div-Container mit CSS formatieren =====
Die in Ihrem Dokument definierten div-Bereiche können Sie mit CSS gestalten.
**Beispiel: Zwei div-Container mit CSS-Formatierung**
++++ Quelltext|
Div formatiert
Aktuelles: Ein interessanter Artikel
Interessanter Artikeltext
++++
* Öffnen Sie die Beispieldatei div-container.html.
* Definieren Sie innerhalb des Tagpaars '' ... '' die folgenden CSS-Stildefinitionen, um die Seite mit einem eingebetteten Stylesheet zu versehen:
{{:inf:web:ik-26-2.jpg?700|}}
(1) Erstellen Sie eine ID für die Navigation. Weisen Sie der ID die gewünschten CSS-Formatierungen zu.\\
(2) Erstellen Sie eine ID für den Seiteninhalt und weisen Sie der ID die gewünschten CSS-Formatierungen zu.
{{:inf:web:ik-26-3.jpg?700|}}
(3) Im body-Bereich des Dokuments weisen Sie dem ersten div-Container die ID Nav zu.\\
(4) Weisen Sie dem zweiten div-Container die ID Artikel zu.
Hier wurden für die Formatierung IDs verwendet, da die jeweiligen Elemente auf der Seite nur ein einziges Mal vorkommen. Wenn die Elemente auf der Seite mehrfach vorkommen, verwenden Sie stattdessen Klassen.
{{:inf:web:ik-27-1.jpg?400|}}
==== div-Containern eine Breite und eine Höhe zuweisen ====
Wenn Sie nichts anderes angeben, nehmen div-Container stets die gesamte Breite der Webseite oder des übergeordneten div-Containers ein. Dieses übergeordnete Element wird auch als Eltern-Element bezeichnet werden.
Damit Sie einen div-Container frei auf der Seite positionieren oder schweben lassen können (vgl. Abschnitt 2.4 und 2.5), müssen Sie per CSS auch seine Breite definieren.
{{:inf:web:ik-27-2.jpg?700|}}
\\
===== div-Container schweben lassen =====
Der normale Elementfluss sieht vor, dass div-Container in der Reihenfolge, wie sie im Quelltext auftreten, aufeinanderfolgen. Das heißt, die Absätze werden untereinander dargestellt. Mit der CSS-Eigenschaft ''float'' können Sie div-Container jedoch von Text umfließen lassen.
{{:inf:web:ik-27-3.jpg?700|}}
Damit die Eigenschaft float eine sichtbare Auswirkung hat, müssen Sie für den div-Container eine Breite festlegen (z. B. 50%). Nur wenn neben dem Element Platz ist, können daneben weitere Inhalte stehen.
Wie die Abbildung zeigt, befindet sich das umfließende Element (der durch das Tag p definierte Absatz) nicht neben dem Float, sondern dahinter. Lediglich die Inhalte des Absatzes werden verschoben: Der Float gibt den ihm zustehenden Platz komplett frei, die nachfolgenden Elemente rutschen entsprechend weit nach oben, die darin enthaltenen Texte und Bilder werden in den sichtbaren Bereich gedrückt.
**Beispiel: Schwebender div-Container**
++++ Quelltext|
Float links
Dieser Container besitzt die Eigenschaft "float:left;"
Dieser Text wird durch das links schwebende ("float:left;") Element nach rechts gedrückt.
++++
{{:inf:web:ik-28-1.jpg?700|}}
Im Beispiel definieren Sie einen div-Container mit Textinhalt. Sie lassen ihn dann über dem Rest des Dokumentinhalts schweben.
(1) Erstellen Sie im head des Dokuments eine ID für Ihren div-Container. Weisen Sie der ID die gewünschten CSS-Formatierungen inklusive der CSS-Eigenschaft ''float:left'' zu.
(2) Erstellen Sie im body des Dokuments einen div-Container, dem Sie die zuvor definierte ID zuweisen.
(3) Geben Sie nach dem div-Container weitere Inhalte ein.
{{:inf:web:ik-28-2.jpg?400|}}
\\
===== div-Container positionieren =====
Für die Positionierung gibt es seit der Version CSS2 (Cascading Style Sheets Level 2) über die CSS-Eigenschaft Position vier verschiedene Möglichkeiten, ein Element zu positionieren. Sie können damit div-Elemente (und andere) unabhängig von ihrer Position im Quelltext an einer beliebigen Stelle des Browserfensters anzeigen.
{{:inf:web:ik-29-1.jpg?700|}}
Wo der div-Container genau auf der Seite platziert werden soll, geben Sie über die vier Startpositionen an. Sie können hier Zahlenwerte mit der entsprechenden Maßeinheit oder prozentuale Angaben zur Höhe und Breite des Eltern-Elements verwenden. Mit auto stellen Sie eine automatische Positionierung ein.
{{:inf:web:ik-29-2.jpg?700|}}
Alle Dezimalstellen der Positionsangaben müssen mit einem Dezimalpunkt "." abgetrennt werden, beispielsweise ''top:3.2cm'' und ''left:6.2px''.
Haben Sie ein Element mit ''position:static'' oder keiner Positionsangabe zwischen die anderen Elemente fließen lassen, sind die Angaben der Eigenschaften ''left, top, right'' und ''bottom'' unwirksam.
==== Absolute Positionierung ====
Die absolute Positionierung bezieht sich auf ein Koordinatensystem, das über das HTML-Dokument gelegt wird. Der Nullpunkt liegt in der linken oberen Ecke. Von hier ab wird nach links (x-Achse) und nach unten (y-Achse) gemessen.
**Beispiel: Absolut positionierter div-Container**
++++ Quelltext|
Absolute Positionierung
Dieser Text hat mit dem positionierten Rahmen nichts zu tun. Er wird einfach hinter diesem dargestellt.
Dieser Rahmen ist absolut positioniert. Er liegt über allen anderen
Seitenelementen.
++++
Der folgende Code zeigt ein absolut positioniertes Element. Dieses stellt innerhalb der Seite eine absolut unabhängige Einheit dar, die in der Grundeinstellung einfach über allen anderen Seitenelementen platziert wird. Das Element wird also vollständig aus dem Fluss des Dokuments herausgenommen. Die übrigen Seitenelemente verhalten sich, als sei das Element nicht vorhanden.
{{:inf:web:ik-30-1.jpg?700|}}
(1) Erzeugen Sie eine CSS-Stildefinition für den zu positionierenden div-Container. Nehmen Sie in diese die absolute Positionierung mit auf (position:absolute).\\
(2) Geben Sie zur Verdeutlichung einen beliebigen -Absatz ein.\\
(3) Erzeugen Sie einen div-Container, den Sie mit der zuvor erstellten ID formatieren.
=== Relative Positionierung ===
Die absolute Positionierung ist nur dann sinnvoll, wenn Sie akzeptieren, dass der Bezugspunkt des Elements der Seitenrand bzw. der letzte Vorfahre mit einer relativen Positionierung ist. Für den Aufbau eines differenzierten Layouts ist die absolute Positionierung deshalb nur bedingt geeignet, weil dabei Elemente nicht nur an der Seite, sondern auch aneinander ausgerichtet werden.
Hier bietet sich eine relative Positionierung an. Das relativ positionierte Element wird nicht am HTML-Dokument selbst, sondern an seiner Position im HTML-Dokument ausgerichtet. Die Position wird ab der tatsächlichen Platzierung des div-Containers gemessen.
**Beispiel: Relativ positionierter div-Container**
++++ Quelltext|
Dieser Text hat mit dem positionierten Rahmen nichts zu tun. Er wird einfach hinter diesem dargestellt. Dieser Rahmen ist absolut positioniert. Er liegt über allen anderen
Seitenelementen. Der Inhalt kann beliebig lang werden; die Position der Fußzeile passt sich stets wegen ihrer relativen Positionierung stets an die Länge des Inhaltskastens an. Der Inhalt kann beliebig lang werden; die Position der Fußzeile passt sich stets wegen ihrer relativen Positionierung stets an die Länge des Inhaltskastens an. Der Inhalt kann beliebig lang werden; die Position der Fußzeile passt sich stets wegen ihrer relativen Positionierung stets an die Länge des Inhaltskastens an.
++++
Anhand eines praktischen Beispiels lässt sich dies schnell erfassen.
* Öffnen Sie die Beispieldatei div-container-absolut.html.
* Ändern Sie die Position in der Stildefinition für den Rahmen im oben stehenden Beispiel ab.
#rahmen {
position:relative;
/* ... */
}
Nun befindet sich der Ausgangspunkt für die Berechnung der Position des Rahmens nicht mehr in der linken oberen Dokumentecke, sondern unter dem vorhergehenden p-Absatz, weil der div-Container unter diesem Absatz eingefügt wurde.
{{:inf:web:ik-31-1.jpg?400|}}
\\
===== Seitenlayouts mit positionierten div-Containern aufbauen =====
Mit den vorgestellten Methoden zur Positionierung können Sie Ihre Seitenlayouts aufbauen. Nachfolgend sehen Sie drei Beispiele.
**Beispiel: Seitenlayout mit absoluter und relativer Positionierung**
++++ Quelltext|
++++
{{:inf:web:ik-31-2.jpg?700|}}
* Die Navigationsleiste kann absolut positioniert werden, weil sie sich immer an derselben Stelle des Dokuments befindet.
* Der Inhaltsteil hingegen muss eine relative Positionierung erhalten. Seine Länge kann unterschiedlich sein, und die Position der Fußzeile hängt von dieser Länge ab.
* Die Fußleiste muss ebenfalls relativ positioniert sein, weil sie unterhalb des Inhaltsteils mit seiner variablen Länge liegen soll.
{{:inf:web:ik-32-1a.jpg?700|}}\\
{{:inf:web:ik-32-1b.jpg?700|}}
Im abgebildeten Code fehlen die Formatierungseinstellungen für Rahmenfarbe und -stärke sowie Hintergrundfarben. Die Beispieldatei div-layout.html enthält den vollständigen Code.
(1) Damit die Container für Inhalt und Navigation auf der y-Achse an derselben Stelle beginnen, versehen Sie das body-Tag mit der Eigenschaft ''margin:0''.
Über die Eigenschaft margin wird der Rand des Browsers definiert. Dieser wird von der relativen Positionierung berücksichtigt, von der absoluten hingegen nicht. Da Sie im Folgenden sowohl relative als auch absolute Positionsangaben verwenden, ist diese Definition erforderlich.
(2) Definieren Sie die Eigenschaften der Navigation. Verwenden Sie dabei eine absolute Positionierung, so-dass die Navigation komplett aus der Abhängigkeit der Elemente von der Seitenposition herausgenommen wird.\\
(3) Definieren Sie die Eigenschaften für Inhalt und Fußzeile. Verwenden Sie für beide Elemente eine relative Positionierung.\\
(4) Erzeugen Sie jetzt die drei div-Container im Dokument.
Notieren Sie zuerst den absolut positionierten Container für die Navigation und erst danach die beiden relativ positionierten Container für Inhalt und Fußzeile, damit Sie eine korrekte Darstellung erhalten.
Wie die folgenden Abbildungen zeigen, handelt es sich um ein fließendes Layout, das sich einem breiteren oder schmaleren Browserfenster anpasst.
{{:inf:web:ik-33-1.jpg?700|}}
**Beispiel: Textspalten mit verschachtelten div-Containern**
++++ Quelltext|
++++
Wie erwähnt, lassen sich div-Container auch ineinander verschachteln. Sie können diese Technik verwenden, wenn Sie bestimmte Elemente wie etwa Textspalten oder Bilder samt Beschriftung zusammenhalten möchten. So fallen nachträgliche Layoutänderungen leichter.
Der folgende Code erzeugt eine zweispaltige Textbox:
{{:inf:web:ik-34-1.jpg?700|}}
Im abgebildeten Code fehlen die Formatierungseinstellungen für Farben, Rahmeneinstellungen usw. Die Beispieldatei textbox.html enthält den vollständigen Code.
Erzeugen Sie zunächst einen div-Container (1) mit relativer Positionierung (2).
Platzieren Sie innerhalb dieses Containers einen oder mehrere weitere div-Container (3) mit absoluter Positionierung (4).
Die Positionierung der eingefügten Elemente wird nicht mehr vom Koordinatensystem der Seite, sondern ab der Position des übergeordneten Elements gemessen.
Die beiden inneren Textcontainer sind ausschließlich mit Prozentangaben formatiert. Dadurch lässt sich nicht nur die Position, sondern auch die Größe des äußeren Containers beliebig ändern - die inneren Container werden entsprechend angepasst:
{{:inf:web:ik-34-2.jpg?400|}}
{{:inf:web:ik-35-1.jpg?700|}}
**Beispiel: Ein Layout im Browserfenster zentrieren**
++++ Quelltext|
... do be done.
++++
Mit der absoluten Positionierung lässt sich ein div-Container zentriert auf die Seite setzen. Unabhängig davon, wie klein oder groß das Browserfenster ist, wird die zentrierte Ausrichtung immer beibehalten.
Innerhalb dieses div-Containers können Sie dann beliebige Elemente, auch das gesamte Seitenlayout, unterbringen. Das Ergebnis ist ein vollständig zentriertes Seitenlayout.
{{:inf:web:ik-35-2.jpg?700|}}
Dazu müssen Sie lediglich die linke obere Ecke des div-Bereichs im Mittelpunkt der Bildschirmdarstellung anzeigen (1) und dann um die Hälfte der Breite des div-Bereichs nach links (2) und um die Hälfte der Höhe des Bereichs nach oben (3) setzen.
Im abgebildeten Code fehlen die Formatierungseinstellungen für Farben, Rahmeneinstellungen usw. Die Beispieldatei ''zentriert.html'' enthält den vollständigen Code.
{{:inf:web:ik-36-1.jpg?400|}}
\\
===== Bereiche mit semantischen Tags definieren =====
HTML5 sieht die Verwendung des div-Elements nur dann vor, wenn es kein anderes Element gibt, mit dem Sie den gewünschten Bereich exakter auszeichnen können. Es gibt semantische HTMLS-Elemente für Kopf-und Fußzeilen, Artikel, Seitenleisten und Abschnitte. Diese Tags funktionieren grundsätzlich wie div-Container, sorgen jedoch - richtig eingesetzt - für ein semantisch korrektes Dokument.
Zum Zeitpunkt der Erstellung des Buchs wurden die im Folgenden erläuterten Elemente nicht von allen Browsern unterstützt. Trotzdem ist es wichtig, dass Sie sich bereits mit den neuen HTML5-Tags vertraut machen.
{{:inf:web:ik-36-2.jpg?700|}}