~~NOCACHE~~
|[[:inf:web:elemente_mit_css_anordnen:Fragen]]|**Inhalte**|[[:inf:web:elemente_mit_css_anordnen:Arbeitsaufträge]]|
====== Elemente mit CSS anordnen ======
===== Weitergehende Möglichkeiten zur Anordnung von Elementen =====
In Abschnitt 2 haben Sie bereits erfahren, wie Sie ein zeitgemäßes Webseitenlayout mithilfe von ''div''-Containern realisieren. Aber auch alle anderen HTML-Elemente können Sie positionieren. Außerdem können Sie HTML-Elemente ausblenden und in Ebenen übereinanderschichten. Auf diese Möglichkeiten wird in diesem Kapitel eingegangen.
==== Überlauf festlegen ====
Mit der Eigenschaft ''overflow'' (überfließen) können Sie festlegen, wie der Inhalt eines Elements dargestellt werden soll, wenn die Größe des Elements nicht ausreicht.
overflow:Wert
==== Werte für overflow ====
^visible|Der Inhalt wird immer angezeigt, auch wenn er die angegebene Höhe überschreitet (Standard).|
^hidden|Die Höhe wird festgesetzt. Überlappende Bereiche werden abgeschnitten und nicht angezeigt.|
^auto|Der Inhalt wird abgeschnitten. Wenn nötig schaltet der Browser automatisch eine Bildlaufleiste zum Anzeigen des Inhalts ein. Kann der Inhalt innerhalb der verfügbaren Breite umbrechen, wird dabei eine vertikale Bildlaufleiste dargestellt. Ist dies nicht möglich, wird eine horizontale Bildlaufleiste angezeigt.|
^scroll|Lange Inhalte werden abgeschnitten. Der Browser zeigt immer eine vertikale und eine horizontale Bildlaufleiste an, auch wenn der Inhalt kürzer bzw. schmaler ist.|
Beispiel
Text
hl { width:50%; height:20pt; overflow:scroll; }
**Beispiel: Overflow ändern**
Drei Absätze erhalten bestimmte Breiten und Höhen. Mithilfe der Eigenschaft ''overflow'' werden Sie die möglichen Darstellungsformen verändern.
width, height, overflow
Höhe und Breite und die Eigenschaft overflow
overflow:auto; Dies ist ein Absatz von 150 Pixel Breite und 100 Pixel Höhe. Die Höhe ist zu klein, darum schaltet der Browser die Bildlaufleiste ein.
overflow:scroll; Dies ist ein Absatz von 10 Zentimeter Breite und 80 Pixel Höhe. Die Bildlaufleiste wird für das Element trotzdem eingeblendet.
overflow:hidden; Dies ist ein Absatz von 150 Pixel Breite und 50 Pixel Höhe. Die Höhe ist zu klein, der Text wird abgeschnitten.
==== Elemente unsichtbar machen ====
Mit Cascading Style Sheets können Sie einzelne Elemente Ihrer Webseite unsichtbar setzen. Unsichtbar bedeutet, dass die Elemente unsichtbar werden, jedoch der Platz trotzdem eingenommen wird.
Die Angabe ''visibility'' (Sichtbarkeit) lässt Elemente verschwinden, macht sie sichtbar oder lässt sie die Sichtbarkeit vom übergeordneten Element erben.
visibility:Wert
==== Werte für visibility ====
^visible|Das Element ist sichtbar (Standard).|
^hidden|Das Element verschwindet, benötigt aber trotzdem den entsprechenden Platz auf der Webseite.|
^inherit|Die Sichtbarkeit wird vom übergeordneten Element vererbt.|
**Beispiel: Grafik unsichtbar machen**
visibility
Fortune plango vulnera stilantibus ocellis. Mihi ad enarrandum hoc argumentum comit, si ad ausculandum vostra erit benignitas.
Das Einrücken des Textes wird mit Hilfe eines Bildes realisiert, das mit der Angabe visibility:visible; angezeigt wird.
Qui autem auscultare nolet, exsurgat foras, ut sit, ubi sedeat ile qui auscultare vult. Nunc qua ad enarrandum hoc argumentums comit, si ad auscultandum vostra erit benignitas.
Fortune plango vulnera stilantibus ocellis. Mihi ad enarrandum hoc argumentum comit, si ad ausculandum vostra erit benignitas.
Das Einrücken des Textes wird mit Hilfe eines Bildes realisiert, das mit der Angabe visibility:hidden; "versteckt" wurde.
Qui autem auscultare nolet, exsurgat foras, ut sit, ubi sedeat ile qui auscultare vult. Nunc qua ad enarrandum hoc argumentums comit, si ad auscultandum vostra erit benignitas.
{{:inf:web:hgblau.gif?linkonly|hgblau.gif}}
Mit dem Wert ''visible'' werden die Elemente innerhalb des Tags '''' angezeigt. Mit ''inherit'' legen Sie fest, dass der Text immer den Wert des übergeordneten Elements annehmen soll. Wenn Sie also den Wert von ''visible'' auf ''hidden'' ändern, wird auch das Wort Text verschwinden.
Im zweiten Teil des Beispiels wird eine Grafik unsichtbar gesetzt. Das Ergebnis können Sie in den beiden nachfolgenden Abbildungen sehen.
|{{:inf:web:ik-48-1.jpg?400|}}\\ Sichtbare Grafik|{{:inf:web:ik-48-2.jpg?400|}}\\ Unsichtbare Grafik|
==== Teile eines Elementes anzeigen ====
Sie können einen Anzeigebereich bestimmen, der nur einen Ausschnitt eines Elements anzeigt, unabhängig von der eigentlichen Größe des Elements. Wenn das Element größer ist als der definierte Anzeigebereich, wird dessen Inhalt an den entsprechenden Seiten abgeschnitten.
{{:inf:web:ik-48-3.jpg?700|}}
**Beispiel: Grafik zuschneiden**
clip
Einen Teil eines Elements anzeigen
{{:inf:web:clip.gif?linkonly|clip.gif}}
Diese Eigenschaft kann nur angewendet werden, wenn das Element über die Eigenschaften'' position:absolute'' oder ''position:fixed'' positioniert ist. Ansonsten wird der verkleinerte Anzeigebereich nicht umgesetzt.
Die Angabe der einzelnen Werte ist etwas gewöhnungsbedürftig, da sie in einer anderen Reihenfolge als sonst üblich angegeben werden. Der erste Wert entspricht der oberen Grenze des Elements. Der zweite Wert bezieht sich auf die rechte, der dritte auf die untere und der letzte Wert auf die linke Grenze. Die Werte beziehen sich dabei immer auf die linke obere Ecke des gewählten Elements.
Als Faustregel sollten Sie sich merken, dass der zweite Wert immer größer als der vierte Wert und der dritte Wert immer größer als der erste Wert sein muss, damit ein Teil des Elements angezeigt werden kann.
In der nachfolgenden Abbildung wurde eine Grafik mit einer Höhe und Breite von jeweils 300 Pixeln normal in eine Webseite eingefügt. Auf der rechten Seite wird die Grafik auf einen sichtbaren Teil reduziert.
{{:inf:web:ik-49-1.jpg?600|}}\\
Gegenüberstellung von normalem und abgeschnittenem Bild
In diesem Beispiel wurde die Grafik mit der Angabe von ''clip:rect(80px,250px,auto,5Opx)'' beschnitten. Dies bedeutet:
* Vom oberen Rand werden 80 Pixel abgeschnitten.
* Vom rechten Rand werden 50 Pixel abgeschnitten (Originalgröße 300 Pixel - 250 Pixel = 50 Pixel).
* Vom unteren Rand wird nichts abgeschnitten (''auto'').
* Vom linken Rand werden 50 Pixel abgeschnitten.
===== Ebenen anlegen =====
Stellen Sie sich Ebenen wie durchsichtige Folien vor, die übereinandergelegt werden.
Die erste (unterste) Folie ist die 1. Ebene, die zweite, darüber-liegende Folie ist die 2. Ebene usw. Da die Ebenen durchsichtig sind, sind die Elemente der einzelnen Ebenen sichtbar.
Dabei ist auch der Effekt möglich, dass ein Element einer Ebene ein Element einer anderen Ebene überlagert. Bisher war es in HTML nicht möglich, einzelne Elemente übereinander zu platzieren.
{{:inf:web:ik-49-2.jpg?300|}}\\
Aufbau von Ebenen
In CSS werden die Ebenen automatisch überlappend angelegt, wenn Sie Elemente absolut oder fixiert positionieren. Dabei wird jede neue Ebene automatisch über die bereits vorhandenen Ebenen gelegt. Diese Reihenfolge können Sie mit der folgenden CSS-Eigenschaft beeinflussen.
{{:inf:web:ik-49-3.jpg?700|}}
**Beispiel**
Text
hl { position:relative; left:20px; top:-5px; z-index:-5; }
**Beispiel: z-lndex ändern**
{{:inf:web:ik-50-1.jpg?700|}}
++++ Quellcode z-index.html|
Ebenen mit z-index
Ebenen mit z-index
1. als Ebene positioniertes Element: Ama me fiedeliter! Fidem meam nota: de corde totaliter et ex mente tota sum presentialiter absens in remota. Qui autem auscultare nolet, exsurgat foras, ut sit, ubi sedat ile qui auscultare vult.
2. als Ebene positioniertes Element:
Selbst ungewohnte Überschneidungen von einzelnen Elementen sind möglich.
3. als Ebene positioniertes Element.
++++
Verschiedene Blockelemente werden so angeordnet, dass sie sich teilweise überlappen. Die Reihenfolge der mit div festgelegten Elemente weicht dabei von der automatischen Zuweisung der Ebenen ab.
(1) Zu Beginn legen Sie fest, dass alle ''div''-Elemente absolut zu positionieren sind. Zur besseren Hervorhebung erhalten alle ''div''-Elemente einen weißen, 2 Pixel breiten Rand. Der Text wird ebenfalls weiß und fett formatiert. Zusätzlich besitzt er einen geringen Innenabstand zum Rahmen.
(2) Mit dem Klassenselektor ''nr1'' legen Sie die Position, die Höhe und die Breite des ersten Elements fest. Die Hintergrundfarbe ist Rot. Das Element, dem diese Klasse zugewiesen wird, erhält den Ebenenwert 10.
(3) Der Selektor nr2 formatiert das Element entsprechend den Positionswerten, setzt einen grünen Hintergrund und setzt das Element auf die Ebene 30. Somit liegt dieses Element über dem Element mit der Klasse ''nr1''.
(4)Die letzte Selektordefinition bewirkt einen blauen Hintergrund. Der Text wird rechts ausgerichtet. Mit dem z-index-Wert von 20 liegt das formatierte Element zwischen den beiden Elementen mit den Klassen ''nr1'' und ''nr2''. Es überlappt dann zwar das Element mit der Klasse ''nr1'', wird jedoch selbst teilweise vom Element mit der Klasse ''nr2'' überdeckt.
(5) Es folgt die Zuweisung der einzelnen Selektoren und somit der Formate.
{{:inf:web:ik-50-2.jpg?300|}}\\
Das Ergebnis der sich überlappenden Elemente