Erstellen eines mit fester Breite Layout mit CSS
Dieser Artikel erschien ursprünglich im Entwurf - Usability Tactics Newsletter. Klicken Sie hier automatisch abonnieren.
Mehrere meiner letzten Spalten bedeckt verschiedene Aspekte von Zwei- oder Drei-Säulen-Seitenlayouts mit XHTML und CSS ausgeführt wird. Bisher alle Beispiele wurden flüssige Layouts (d-Layout, die automatisch ausdehnen und zusammenziehen innerhalb der Breite des Browserfensters passen). Jetzt ist es Zeit, den anderen großen Seitenlayout Ansatz zu berücksichtigen: die mit fester Breite Layout.
Viele Web-Builder lieber mit fester Breite Seitenlayouts für Seitengestaltung, weil sie präzise und vorhersagbare Ergebnisse zu erzielen. Dieser Ansatz ahmt Drucklayout, was ein erheblicher Komfortfaktor für Designer und Besucher gleichermaßen; es ist auch der beste Weg, um Inhalte zu verarbeiten, die viele große Bilder und andere Elemente enthält, die in einem flüssigen Layout fließen nicht gut.
Seit Jahren würden Designer feste Breite Seitenlayouts mit Tabellen erstellen. Die Tabelle der Spalten und Zeilen sind eine passable analog des Layout-Raster des Designers, so ist es nicht verwunderlich, dass die Designer HTML-Tabellen für die Verwendung in Seitenlayout angepasst.
Allerdings tabellenbasierten Layouts haben erhebliche Probleme. Neben der Tatsache, dass es semantisch unangebrachter ist Tabellen für das Layout zu verwenden, ist der resultierende Code chaotisch, schwer zu lesen, und noch schwerer zu halten-vor allem, wenn es fusionieren Tabellenzellen und verschachtelte Tabellen enthält.
Mit divs für das Seitenlayout funktioniert viel besser. Neben der karmischen Güte nach den bewährten Methoden, schlankeren Code lädt schneller und einfacher zu arbeiten.
Die Formatierungsattribute von Tabellen und Tabellenzellen eignen sich für feste Breite Layout, indem es ziemlich einfach, die Größe dieser Elemente angeben. Aber man kann die gleiche Sache mit divs erreichen durch divs genaue Abmessungen zu geben und mit absoluter und relativer Positionierung diese divs auf der Seite zu platzieren.
Abbildung A zeigt ein typisches Layout fester Breite eines Headers an der Oberseite besteht, eine dreispaltiges Inhaltsbereich (ein Hauptinhaltsspalte flankiert von zwei Seitenleisten) und eine Fußzeile am unteren Rand der Seite. Alle Elemente sind feste Breiten; sie nicht mit Änderungen im Browser-Fenster ändern.
Hier ist der CSS-Code, der Stile, die Seite als feste Breite Layout.
Die div # Kopfform setzt eine explizite Höhe und Breite für den Header div. Der Header wird ausdrücklich mit der Position positioniert: absolut. top: 0px. und links: 0px Regeln, welche Position sie in der linken oberen Ecke der Seite. Die Position: absolute Regel ist wichtig, weil Positionierung Attribute (oben, links, rechts, unten) für Elemente mit normaler (statisch) Positionierung ignoriert werden. Beachten Sie jedoch, dass alle absolut positionierten Elemente aus dem normalen Seitenstrom entfernt werden, und Elemente, die Teil des Flusses sind, werden auf der Seite positioniert werden, als ob die absolut positionierten Elemente nicht existieren.
Der div # Spalten Stil formatiert die div, die für die drei Säulen als Behälter dient. Es verwendet position: relativen ein Element zu erstellen, den Teil des normalen Seitenflusses ist (er kann mit seinem Inhalt ausdehnen und zusammenziehen und beeinflusst die Positionierung anderer Elemente), aber es kann aus seiner normalen Position versetzt werden. Die oben: 100px Regel stellt der Offset, die den Spalten Behälter nach unten drückt, damit er nicht den Header überlappen.
Die div # side1 Regel Stile der erste Sidebar Spalte. Es setzt die Breite der Säule (Breite: 150 Pixel) und die absolute Positionierung verwendet die Säule an der oberen linken Ecke des übergeordneten Elements zu platzieren. Das übergeordnete Element ist die div-Säule, die die oben erklärt: 0px Regel statt der 100px Einstellung, die man erwarten könnte, wenn das Element relativ zu dem Körperelement positioniert wurde. Die div # side2 Regel macht das gleiche für die rechte Seitenleiste Spalte. Die einzigen Unterschiede sind die Hintergrundfarbe und die linke: 600px Regel, die die Spalte rechts von den beiden anderen Spalten positioniert.
Das Styling des Hauptinhaltsspalte in den div # content Stil ist ähnlich wie die beiden anderen Spalten. Es setzt eine explizite Breite (Breite: 450px) und verwendet die links: 150px und top: 0px Regeln für die Spalte innerhalb des übergeordneten Elements positionieren (die Spalten div). Der wesentliche Unterschied ist die position: relative Regel. Sie verwenden die relative Positionierung, so dass die Hauptinhaltsspalte die Größe seines Elternelements beeinflussen können (die Spalten div) und damit die Fußzeile Element.
Diese Technik funktioniert, weil alle Layout divs relativ zu ihrer übergeordneten Elemente positioniert sind. In Abbildung A, ist das Mutterelement für den Kopf, Spalten und Fuß divs der Körper-Tag, aber in Figur B ist es die Wrapper div. Diese Zentrierung Technik wird ausführlicher in erklärt „Erstellen einer zentrierten Seitenlayout mit CSS.“