Begriffe Grundgerüst Wichtige HTML-Tags CSS Arbeitsaufträge

Visibility

Die Eigenschaft visibility bestimmt, ob ein Element sichtbar ist oder nicht. Wichtig ist dabei zu beachten, dass ein unsichtbares Element die gleichen Auswirkungen auf nachfolgende Elemente hat, wie wenn es sichtbar wäre.

Es gibt folgende Eigenschaften:

visible
--> Das Element wird dargestellt (Standardwert).
hidden
--> Das Element wird unsichtbar dargestellt.
collapse
--> Bewirkt bei Tabellen, dass die entsprechende Zeile oder Spalte ausgeblendet wird. Bei anderen Elementen hat es den gleichen Effekt wie hidden.
inherit
--> Die Eigenschaft wird vom übergeordneten Element geerbt.

Unten siehst du zuerst ein generisches Beispiel, danach folgen zwei Anwendungen dieser Eigenschaft.

selector {
  visibility: hidden;
}

<p>Dieser Paragraph ist sichtbar.</p>.
<p style="visibility: hidden">Dieser Paragraph ist nicht sichtbar</p>
<p>Dieser Parapgraph ist wieder sichtbar.<p>

Dieser Paragraph ist sichtbar.

Dieser Paragraph ist nicht sichtbar

Dieser Parapgraph ist wieder sichtbar.

 <p><img src="/html/img/bg.jpg" style="visibility: visible; float: left; margin: 0 10px 0 0; width: 100px">Viel Text...</p>

 <p><img src="/html/img/bg.jpg" style="visibility: hidden; float: left; margin: 0 10px 0 0; width: 100px">Viel Text...</p>

Hier ist das Bild links sichtbar. Im unteren Beispiel wurde jedoch das Bild unsichtbar (hidden) gemacht.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Links von diesem Text sollte eigentlich ein Bild sein, jedoch ist es unsichtbar. Sichtbar ist jedoch die Auswirkung des Bildes auf diesen Text. Dieser fliesst um das Bild herum, obwohl das Bild nicht sichtbar ist.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.