Webseite mit YAML erstellen – Teil 2

In Webseite mit YAML erstellen – Teil 1 haben wir bereits eine optimale Ausgangsposition geschaffen, um mit der eigentlichen Arbeit zu beginnen. Im Folgenden möchte ich erleutern, worauf noch zu achten ist und welche Tricks es gibt, das Layout an seine Bedürfnisse anzupassen.


Änderungen an der mylayout.css
Da wir uns alle wichtigen CSS-Dateien in den Ordner css/screen kopiert haben, müssen wir die Pfade noch anpassen. Dafür gehen wir in die Datei mylayout.css, welche sich im Ordner css/ befindet und passen die Pfade entsprechend an. Möchten wir wir die nav_vlist.css benutzen für ein vertikales Menü, müssen wir diese dort zusätzlich einbinden.

Das Basislayout vorbereiten
Vorerst benötigen wir vor Allem die Datei mylayout.html und basemod.css. Alle wichtigen Änderungen des Layouts werden hier vorgenommen. Die content.css gibt und eine gute Möglichkeiten, designspezifische Deklarationen dort hinein zu schreiben – das macht die ganze Sache übersichtlicher.

Die width-Angaben der page-margins bestimmten die Seitenbreite der kompletten Seite, da der div-container page-margins alle anderen Container umschließt. Dies hat den Vorteil, dass die Seitenbreite zentral und übersichtlich gesteuert werden kann und den Nachteil, das wir hinsichtlich der Grafiken Flexibilität einbüßen müssen. Warum ist das so?

Geben wir den einzelnen Containern innerhalb von page-margins einen Hintergrund, so erstreckt sich dieser nicht über die gesamte Seitenbreite sondern nur innerhalb der vorher definierten width-Angabe der page-margins. Manchmal kann es aber von Vorteil sein, nicht nur den body, sondern auch einzelne Container zu nutzen, um Grafiken über den kompletten Viewport zu legen. Wir können uns mit folgendem abhelfen.

Wir ändern die Grundstruktur von

<page-margins><containerinnnerhalbvonpagemargins></page-margins>

zu

<container<page-margins></page-margins>><page-margins><containerinnerhalbvonpagemargins></pagemargins>

In Worten: Wir schließen einzelne Container aus dem Klammergriff der page-margins aus. Aber nur den umschließenden Container, alle Elemente innerhalb des Containers müssen sich innerhalb eines zweiten page-margins befinden.

Folgendes Bild soll diesen Umstand verdeutlichen.

YAML Quellcode der page-margins

Quellcode YAML page-margins

Diese Schreibweise ermöglicht flexiblere Gestaltung. Probiert es aus! Neues gibts im nächsten Teil.

Ähnliche Artikel

  • Keine Ähnlichen Artikel vorhanden.

1 comment

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>