CSS-Trick: Kleiner Tipp bezüglich Sichtbarkeit von Elementen und der Höhe

(Last Updated On: 18. August 2015)

In diesem Post ein kleiner Trick zum (Un)sichtbarmachen von Objekten in Verbindung mit der Höheneinstellung. Sie werden als Webdesigner desöfteren das Bedürfnis haben, bestimmte Elemente an einer vordefinierten Stelle im Bildschirm zu platzieren, diese jedoch nur nach bestimmten Benutzeraktionen anzuzeigen. Dazu brauchen sie css-Klassen, die mit der Sichtbarkeit und Unsichtbarkeit dieser Objekte umgehen, die Sie mit der entsprechenden Klasse auszeichnen.

Wenn ein Objekt unsichtbar sein soll, wollen Sie, dass das Objekt weg ist – unter allen Umständen. Die grundsätzliche unsichtbarkeit eines Objektes bekommen Sie hin über

    .hidden {
	visibility: hidden;
}

das CSS-Attribut visibility funktioniert ohne Probleme auch bei älteren Browsern.

Property ChromeIEFirefoxSAFARIOpera
visibility1.04.01.01.04.0

Bei Ihrer visible-Klasse sieht es dann entsprechend umgekehrt aus

    .visible {
	visibility: visible;
}

Generell macht es Sinn, alle Objekte, die unsichtbar sein sollen, auf eine Höhe von 0 zu setzen. Denn entweder wollen Sie anstelle des unsichtbaren Objektes ein anderes Objekt anzeigen – oder das Objekt soll gar nicht vorhanden sein und daher keinen Platz in Anspruch nehmen. Um also zu verhindern, dass unsichtbare Elemente, die nicht absolut positioniert sind, einen Platz in Anspruch nehmen und dabei einen Einfluss auf das Seitenlayout nehmen, geben wir noch an

.hidden {
    visibility: hidden;
    height: 0;
}

.visible {
    visibility: visible;
    height: auto;
}

Beachten Sie, dass ich die Klasse visible in meiner .css unterhalb der klasse hidden geschrieben habe. Das führt dazu, dass die Klasse visible die Klasse hidden im Notfall überschreibt, wenn aus irgendeinem Grund einmal ein Element beide Klassen zugewiesen bekommt.  Eventuell wollen Sie, dass genau der umgekehrte Fall eintritt, wenn es einmal so weit kommt.

Das problem ist aber, dass wenn Sie jetzt neue Klassen für diese elemente definieren, welche Einfluss auf die Höhe nehmen, dass dann weiter unten stehende Definitionen das height-Attribut wieder überschreiben. Wenn Sie ein Element vom unsichtbaren in den sichtbaren Status überführen, überschreiben Sie mitunter mit der visible-Klasse die eigentliche Höheneigenschaft des Elements. Deswegen macht es grundsätzlich Sinn, diese Höhen-Eigenschaft in extra-klassen unterzubringen. Also:

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

.no-height {
    height: 0;
}

.restore-height {
    height: auto;
}

Nun bietet es sich in der Praxis an, die Höhen-Klassen immer mit den Sichtbarkeits-Klassen zu kombinieren. Wenn Sie die .css-Definitionen der klassen .no-height und .restore-height in Ihrem CSS weit oben deklarieren, überschreiben diese Klassen nie die expliziten Höheneinstellungen einer spezifischeren Definition.

Andreas Loibl ist SAP-Berater, Ethical Hacker und Online Marketing Manager und schreibt auf seinem Blog DaFRK Blog über verschiedene Themen in den Sektoren Projektmanagement, Informationstechnik, Persönlichkeitsentwicklung, Finanzen und Zeitmanagement.

DaFRK

Andreas Loibl ist SAP-Berater, Ethical Hacker und Online Marketing Manager und schreibt auf seinem Blog DaFRK Blog über verschiedene Themen in den Sektoren Projektmanagement, Informationstechnik, Persönlichkeitsentwicklung, Finanzen und Zeitmanagement.

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.