Homepapa-Logo

Inhalt

Einleitung Voraussetzungen Pop Up, Pop down Flatter, flatter Vorhang auf! Klappe zu! Übersicht die HTML-Seite die Hyperlinks das Stylesheet Block-Elemente Gestaltung einrücken Script, Script, Hurrah einrichten zielen Schutt verschwindibus globale Werte Ereignisse wo bin ich? endlich ausklappen Moment noch! das ist die Höhe polieren Abschluss

Service

Kontakt & Feedback

CSS Anwendung

Klappe zu!

das Stylesheet

einrücken

Zwei grosse Unterschiede bestehen noch zu unserem Ziel:

Den ersten dieser beiden Punkte erledigen wir in unserem Stylesheet: Wir geben einfach den Klassen stufe1, stufe2 und stufe3 jeweils einen geeigneten margin-Wert vor allem für die linke Seite.

In unserem Beispiel sieht der Wert für die Klasse stufe2 so aus:

          margin-left: 178px ;
Die Breite der Einträge der ersten Stufe war 160px, dazu kam ein Rahmen (border-width: 4px) und nochmals 4px padding. Da diese beiden Werte sowohl links wie auch rechts des Elementes zur Anwendung kommen, kommen also nochmals 16px in der Breite dazu. Ich rücke nun die Einträge der Stufe 2 um 178px ein, damit erhalte ich zwischen den Menus noch einen kleinen horizontalen Abstand von 2px.

Nach demselben Muster komme ich auf einen Wert von 342px für margin-left bei den Einträgen der Stufe 3.

Das sieht nun so aus, aber du kannst hier natürlich gerne experimentieren und die Abstände vergrössern und verkleinern. Auf die Funktionsweise des Klappmenüs wird das keine Auswirkungen haben, lediglich auf die optische Erscheinung.


Homepapa
August 2004
Vorheriger Abschnitt:
Gestaltung
Nächster Abschnitt:
Script, Script, Hurrah