Layoutgalerie

Auf dieser Seite werden einige Layoutbeispiele für HTMLfee vorgestellt. Anhand dieser Beispiele soll gezeigt werden, wie man mit Hilfe der HTMLfee-Konfiguration bestimmte Layouteffekte erzielen kann. Sie können alle Beispiele herunterladen.

Beispiel 1: Variationen des Standard-Layouts

Download (ZIP)

Dieses Beispiel enthält einige Abwandlungen des Standard-Stylesheets. Im Wesentlichen wurde nur die Farbgebung variiert. Es sind u.a. folgende Stylesheets vorhanden (kopieren Sie das gewünschte Stylesheet nach style.css, das Stylesheet basis.css wird ebenfalls benötigt):

style-blau.css	style-rot.css	style-gruen.css
style-var1-rot.css	style-var1-drot.css	style-var1-dblau.css
style-var2-blaugelb.css	style-var2-blaurot.css	style-var2-gelbrot.css

Beispiel 2: Aufklappnavigation

Download (ZIP)

Dieses Beispiel zeigt, wie Sie eine Aufklappnavigation konfigurieren. Wenn Sie die Maus über die einzelnen Unterpunkte der Navigation bewegen, werden diese auf- und zugeklappt. Dies kann man ganz einfach mit CSS bewerkstelligen. Die entsprechende Stelle im CSS-Stylesheet sieht so aus:

.nav li.normal ul 
            { display: none }
 .nav li:hover ul 
            { display: block }

Diese Definitionen blenden eine untergeordnete Liste aus, wenn das umschließende li-Element inaktiv ist, d.h. nicht die Klasse aktiv oder offen hat und wenn der Mauszeiger sich nicht darüber befindet.

Normalansicht

Aufgeklappt

Beispiel 3: Navigation mit Kategorien

Download (ZIP)

Dieses Beispiel zeigt, wie Sie eine etwas abgewandelte Navigation realisieren, wie sie z.B. oft bei Blogs anzutreffen ist. Auf der obersten Ebene befinden sich mehrere Kategorien, darunter die jeweiligen Einträge. Dafür muss nur die Darstellung des Wurzelelements in der Navigation unterdrückt werden:

.nav div.E0 { display: none }

Beispiel 4: Horizontale Hauptnavigation

Download (ZIP)

Dieses Beispiel illustriert, wie die Navigation in eine Haupt- und eine Unternavigation aufgeteilt werden kann. Die horizontale Hauptnavigation bleibt immer gleich und verweist auf die einzelnen Unterbereiche. Die Navigationsleiste links zeigt die Navigation für den aktiven Unterbereich.

Um dies zu realisieren, müssen Sie zunächst dafür sorgen, dass in der Navigation nur der aktive Unterbereich erscheint. Das erreichen Sie, indem Sie in jeden Unterbereich eine htf.kfg anlegen.

Um die Hauptnavigation zu konfigurieren, fügen Sie in die Hauptkonfiguration folgendes ein:

var.hauptnav.klasse = Navigation
var.hauptnav.dateien = index.php, Start/index.php, Bereich 1/index.php, Bereich 2/index.php
var.hauptnav.titel = Index, * Start, * Bereich 1, * Bereich2
var.hauptnav.index = index.php

Für jeden Punkt in der Hauptnavigation fügen Sie Titel und Datei in var.hauptnav.titel und var.hauptnav.dateien ein. Diese Navigation wird nun in der Seitenvorlage an der gewünschten Stelle referenziert:

<div class="nav_a">
{hauptnav.text}
</div>

Damit die Hauptnavigation horizontal dargestellt wird, sind noch ein paar Anpassungen im Stylesheet nötig:

.nav_a div,li { display: inline }
 .nav_a div.E0 { display: none }
 .nav_a ul { padding: 0.5em 1em; margin: 0 }
 .nav_a li { margin: 0 1em 0 0 }
 .nav_a { background-color: white; border-bottom: 1px solid black }

ist immer vorhanden. immerman In diesem Beispiel ist die Navigation eine aufgeteilte Navigation