Der Stil für den Aufbau unterscheidet sich nicht von dem auf Tabellen beruhenden Design. Hier werden lediglich die Hintergrundfarbe, die Standardschrift und die Standard-Schriftgröße festgelegt.
Der Schlüssel zu dieser Technik liegt in den Stilvorgaben für das div#outer. Dieses sind die Stilvorgaben für das div, das den zentrierten Kasten erzeugt, der als Behälter für den Rest des Seiteninhalts dient – das div, das die Tabelle ersetzt. Die Regel width: 80% legt die Breite des div fest, genau wie der entsprechende Zusatz des Tabellen-Tags die Breite der Tabelle festlegte. Ähnlich erzeugt die Regel background-color:#FFFFFF einen weißen Hintergrund für das div, so wie es der Zusatz bgcolor=“#FFFFFF“ bei der Tabelle tat. Die Regeln margin-top: 50px und margin-bottom: 50px ersetzen die leeren Absätze durch Seitenränder für das div selbst.
Der Schlüssel zu dieser Technik ist das korrekte Zentrieren des div outer. Die Schwierigkeit besteht darin, dass es für ein div nicht wie für eine Tabelle einen Zusatz align=“center“ gibt. Man könnte für das Ausgangselement des div (in diesem Fall der Tag <body>) text-align: center verwenden, um das div outer zu zentrieren. Allerdings stellt dies, obgleich die meisten Browser diese Form der Ausrichtung nicht nur für Text, sondern auch für Elemente auf Block-Ebene wie divs anwenden, im Grunde einen Missbrauch des Zusatzes text-align dar, der zu Komplikationen führt, wenn man weitere Gestaltungselemente erstellt, die den Text wieder linksbündig ausrichten.
Die korrekte Vorgehensweise, um unter CSS ein Element auf Block-Ebene zu zentrieren, besteht in der Verwendung von margin-left: auto und margin-right: auto. Hierdurch wird der Browser angewiesen, automatisch gleich große Ränder für beide Seiten zu berechnen und somit das div zu zentrieren. Mit der Regel border: thin solid #000000 zieht man einen Rand um das äußere div, weil dies unter CSS leicht zu bewerkstelligen ist und mit Tabellen nur schwer zu erreichen wäre. Der übrige CSS-Code gestaltet die divs für Header und Footer, Seitenleiste und Hauptinhalt.
Die Gestaltungselemente div#header und div#footer setzen Ränder und Füllungen für diese divs. Darüber hinaus enthält div#header die Regel text-align: center, um den Text im Header zu zentrieren, während div#footer die Regel border-top: thin solid #000000 enthält, um einen Rand an der Oberkante des div zu erzeugen, der die im Tabellen-Layout enthaltene Horizontal-Regel über dem Footer ersetzt.
Die Gestaltungselemente div#nav and div#main erzeugen die beiden Spalten in der Mitte des zentrierten Kastens. Im Gestaltungselement div#nav schiebt die Regel float: left das div an die linke Seite des übergeordneten Elements (das äußere div) und die Regel width: 25% legt die Breite des div auf 25 Prozent der Breite des übergeordneten Elements fest. Wenn das div für die Navigationsleiste nach links gerückt und auf eine voreingestellte Breite beschränkt ist, bleibt für das div mit dem Haupttext Platz, um sich rechts neben das div für die Seitenleiste zu schieben, wodurch sich zwei Spalten ergeben. Das Gestaltungselement div#main enthält die Regel margin-left: 30%, damit der Haupttext sauber in einer Spalte bleibt statt sich unterhalb der Navigationsleiste zu verbreitern. Der linke Rand des divs für den Haupttext ist auf einen Wert gesetzt, der die Breite des divs für die Navigationsleiste geringfügig übersteigt. Das Verfahren zum Erstellen von Spalten mit schwimmenden Elementen ist eingehender in meiner Kolumne „Use CSS floats to create a three-column page layout.“ erläutert.
Im Rahmen der umfassenden Digitalisierung der Bundeswehr ersetzen Electronic Knee Boards die herkömmlichen Handbücher von…
Sie betreffen Windows 10, 11 und Windows Server. In SharePoint Server steckt zudem eine kritische…
Mozilla verteilt insgesamt 16 Patches für Firefox 125 und älter. Zudem entfernt der Browser nun…
Einziger Neueinsteiger ist das Alps-System in der Schweiz. Die weiteren Top-Ten-Systeme aus Europa stehen in…
Im vergangenen Jahr steigt ihre Zahl um 32 Prozent. Die Zahl der betroffenen PC-Nutzer sinkt…
Die App satellite wird künftig Telefongespräche in Echtzeit datenschutzkonform mit Hilfe von KI zusammenfassen.