Seitenlayouts Info und CSS

Die Möglichkeit, Seitenlayouts mit CSS zu gestalten, gehört zu den größten Errungenschaften im Webdesign. CSS kann Ihnen eine Menge Arbeit abnehmen und bringt dabei noch eine Reihe von Vorteilen mit sich. Aussagekräftige Inhalte können in aussagekräftigen Überschriften- und Absatzelementen platziert werden - das macht den Code besser lesbar und kann...

Flexible zweispaltige Layouts erstellen mit div

Es soll ein zweispaltiges Layout erstellt werden, bei dem sich die Spaltenbreiten an der Breite des Browserfensters orientieren, wie in Abbildung gezeigt. Strukturieren Sie zunächst den Inhalt mit div-Elementen. Versehen Sie diese mit id-Attributen und passenden Werten. Der Hauptteil der Seite soll in diesem Beispiel links stehen, während die Seitenleiste rechts angeordnet wird...

Zweispaltige Layouts mit festen Breiten erstellen

Es soll ein zweispaltiges Layout erstellt werden, bei dem die Spalten feste Breiten besitzen. Zu Beginn umgeben Sie die Inhalte mit div-Elementen. Die einzelnen Elemente werden ihrerseits mit einem Container-div umgeben. Verwenden Sie nun die Eigenschaft float und legen Sie die Breite des Containers und der linken Spalte unter Verwendung einer festen Längeneinheit fest. Die...

Flexible mehrspaltige Layouts mit Floats erstellen

Es soll ein dreispaltiges Layout erstellt werden, in dem sich die Spaltenbreite an der Breite des Browserfensters orientiert. Es soll außerdem eine Kopf- und eine Fußzeile geben, die sich jeweils über die gesamte Breite des Browserfensters erstrecken. Definieren Sie die Elemente, die nebeneinander angeordnet werden sollen, als Floats. Geben Sie die Breite der Elemente in Prozent an...

Spalten mit Floats in beliebiger Reihenfolge

Es soll ein flexibles Layout erstellt werden, bei dem sich die Reihenfolge der Spalten nicht am HTML-Quellcode orientiert. Auf diese Weise kann der Hauptinhalt möglichst nah am Anfang des Dokuments stehen, gleichzeitig aber in der Reihenfolge der Spalten eine beliebige Position einnehmen. Definieren Sie Container für die einzelnen Teile der Seite (Kopfteil, Navigation, Hauptteil usw.)...

Faux Columns einsetzen mit Farbverläufen

Es wurde ein mehrspaltiges Layout mit Floats realisiert. Trotz unterschiedlich hoher Inhalte sollen die Spalten immer gleich hoch erscheinen. erwenden Sie die klassische "Faux Columns"-Technik. Definieren Sie hierfür bei Bedarf ein Containerelement, für das ein entsprechend präpariertes Hintergrundbild definiert wurde. Das Hintergrundbild für den Container können Sie in einem...

Den heiligen Gral verstehen mit div

Sie möchten den "heiligen Gral" finden. Das bedeutet in diesem Zusammenhang: ein dreispaltiges Layout mit zwei Seitenleisten mit fester Breite - eine zum Beispiel für die Navigation, die andere für Dinge wie die Liste Ihrer letzten Blogartikel oder Ähnliches - und einer Hauptspalte für den eigentlichen Inhalt, die sich an die Breite des verfügbaren Ansichtsbereichs anpasst...

Den Fußteil an der Unterkante des Browsers

Sie möchten einen Fußteil (Footer) fest an der Unterkante des Ansichtsbereichs verankern, wie in Abbildung gezeigt wird. Umgeben Sie den Fußteil mit einem eigenen div-Element, wie hier gezeigt. Danach können Sie den Fußteil per position: fixed im Ansichtsbereich verankern. Die Deklaration bottom: 0 gibt an, dass die Unterkante des Fußteils bündig mit der Unterkante...

Layouts mit einem Sticky Footer mit div versehen

Sie möchten Ihr Layout mit einem Fußteil versehen, der am unteren Teil des Ansichtsbereichs "haftet", auch wenn der übrige Inhalt nicht die gesamte Höhe des Browserfensters einnimmt. Benötigt der Inhalt dagegen mehr Platz, soll der Fußteil mit nach unten gescrollt werden. Umgeben Sie die Inhalte der Seite und den Fußteil mit eigenen div-Elementen. Ein Beispiel sehen Sie in der...