HTML5-Handbuch - die neuen Features von HTML5

Reset ist im Webdesign üblich. Jeder Designer hat hier seine eigenen Vorlieben. Aber allen gleich ist das kontrollierte Zurücksetzen von vorher definierten Stilen. Beispielsweise könnte dies so aussehen:
.reset {
    padding: 0px;
    margin: 0px;
    font-size: 1px;
    height: 1px;
    float: none;
    clear: both;
    }
    Der Wrapper-Bereich hat die Aufgabe, das Layout im Anzeigebereich zu zentrieren und auf eine feste Gesamtbreite von 960 Pixeln zu bringen. Damit wird ein sogenanntes fixes Layout mit fester Breite realisiert. Außerdem bekommt der
wrap
-Bereich folgende Hintergrundgrafik zugewiesen (hier eingerahmt, um es besser sichtbar zu machen):
    Bild 14.37: Hintergrundgrafik für den wrap-Bereich
    Die Grafik hat im Original eine Breite von 960 Pixeln, also genau die fixe Breite des Gesamtlayouts. Sie wird vertikal wiederholt. Dadurch wird eine wichtige Tatsache verschleiert. Denn in Wirklichkeit sind Inhaltsbereich und Navigationsbereich nicht gleich lang. Würde man anstelle der Hintergrundgrafik etwa mit Hintergrundfarben und Rahmen im Navigationsbereich arbeiten, würde der dadurch erzeugte Block nicht bis zum Footer reichen, wenn der Inhaltsbereich länger ist.
    Dies alles sind gängige Tricks, die derzeit üblich sind, um auch Layoutwünsche mit
float
-basierten Seitenlayouts zu realisieren, für die
float
eigentlich gar nicht gedacht ist.
Wrapper zentrieren
    Oft ist es im Webdesign gewünscht, den Inhalt einer Webseite zentriert im Viewport anzuzeigen. Genau für diese Aufgabe ist auch das sogenannte Wrapper-Element – wie es im Beispiel verwendet wird – gedacht. Dabei wird der gesamte Inhalt der Webseite in ein
div
-Element mit der
id="wrapper"
»eingewickelt«. Zusätzlich wird ein eigener Stil definiert:
 
div.wrapper {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 960px;
    height: 500px;
    margin: 0px auto 0px -480px;
    }
Natürlich können die Werte für
width
und
height
angepasst werden. Der Trick liegt hier in der festen Breite des
div
-Elements. Die Positionierung erfolgt über die Eigenschaft
left
, welche das Element in die Mitte des Viewports positioniert. Danach wird es mit
margin
genau um die Hälfte der Breite nach links verschoben. Damit ist das Element, und auch dessen Inhalt, exakt in der Mitte des Viewport positioniert.
Weitere Hinweise
    Wenn Sie für ein Element eine Angabe zu
float
notieren, mussten Sie bisher gemäß der CSS2-Spezifikation auch zwingend eine Angabe zu
width
definieren. Gemäß CSS 2.1 (und der tatsächlichen Umsetzung in den Browsern) ist dies nicht mehr erforderlich; die Breite richtet sich in diesem Fall nach dem Inhalt.
Referenzinformationen
    CSS-Eigenschaften
float
,
    CSS-Eigenschaften
clear:

14.13    Anzeigesteuerung von Elementen
    Mit Hilfe von CSS können Sie auch bewirken, dass Elemente samt Inhalt und untergeordneten Elementen überhaupt nicht angezeigt werden, oder explizit angeben, dass sie angezeigt werden. Gedacht ist dies vor allem für das Zusammenspiel mit Scripting. Ferner können Sie das Content-Modell von Elementen umdefinieren. So können Sie beispielsweise aus Überschriften Phrasing-Elemente (Inline-Elemente) machen, die sich auch so verhalten.
14.13.1  Sichtbarkeit von Inhalten
    Es gibt insgesamt zwei CSS-Eigenschaften, um Elemente unsichtbar oder sichtbar zu machen:
display
und
visiblity
. Dabei ist
display
die allgemeinere Eigenschaft, die auch andere Aspekte der Anzeige-Steuerung abdeckt. Es gibt jedoch auch einen wichtigen optischen Unterschied zwischen beiden Eigenschaften. Was Sie mit
display
unsichtbar machen, wird vollständig aus dem sichtbaren HTML-Output und dem Textfluss entfernt. Was Sie dagegen mit
visibility
unsichtbar machen, hinterlässt einfach nur einen Leerraum in dem Erstreckungsraum, den das Element normalerweise einnehmen würde.
    Das nachfolgende Beispiel verwendet JavaScript, um die Möglichkeiten der beiden Eigenschaften zu demonstrieren. Auf das JavaScript wird in den Erläuterungen jedoch nicht weiter eingegangen.
Beispiel