6.2.1.3 Exakte absolute Positionierung mit "Formatcontainern": CSS-IDs
Es gibt noch einen weitere interessante Formatiermöglichkeit mit StyleSheets, den sog. IDs, die ich hier mal Formatcontainer nennen möchte (Sie sind auch als Schweberahmen bekannt, müssen jedoch nicht immer "schweben"). Sie eignen sich zum Einen sehr gut, um nur wenige Teile einer Seite mit einem definierten Format zu versehen (und sollten den im vorherigen Kapitel erwähnten body-Element-Klassendefinitionen vorgezogen werden), zum Anderen sind sie essenziell, um pixelgenaue Positionierung aller Elemente auf einer Seite zu definieren. Darüberhinaus können diese Formatcontainer als dhtml animiert werden (siehe Modul 6.2.2). Also Grund genug, sich etwas genauer damit zu beschäftigen.
Das zugrundeliegende Prinzip ist, dass wir Inhalte einer html-Seite in kleine Container packen, die in der Regel eine definierte Größe (width, height) in Pixeln (oder anderen Maßeinheiten) haben und exakt relativ zueinander oder auch absolut auf der Seite (in Beziehung zur linken oberen Ecke der html-Seite) positioniert werden können. Jeder dieser Container hat einen festen Namen (ID), so dass für jeden dieser Container die gewünschten typografischen und sonstigen Formate zugeordnet werden können (daher meine Namensschöpfung Formatcontainer).
Die Container können sämtliche html-Inhaltstypen beinhalten (z.B. Text, Abbildungen, Links, Tabellen, horizontale Linien, ja sogar Animationen und Videos), man könnte fast sagen, es sind eigene kleine Seiten. Prinzipiell kann auch nur ein Container eine ganze html-Seite einnehmen, aber dies ist nicht unbedingt Sinn der Sache.
Diese Container können damit, in sehr viel geeigneteren Weise, die "Layouthilfe" ungerahmte Tabelle ersetzen. Es können nur einer oder wenige Formatcontainer zusätzlich zu "klassischem" html-Inhalt auf einer html-Seite definiert werden (Abbildung links unten) oder aber das ganze Layout der betreffenden Seite kann auschließlich mit Formatcontainern gestaltet werden (Abb. rechts unten). Die gestrichelten Rechtecke auf den beiden nachfolgenden Abbildungen sollen die Ausdehnung der einzelnen Container veranschaulichen. Die Ränder sind aber auf der html-Seite nicht zu sehen, es sei denn sie werden ausdrücklich definiert.
 |
 |
Auf der obigen Abbildung rechts sehen Sie, dass Container farbige oder transparente Hintergründe haben. Container können auch überlappen, was besonders interessante Gestaltungsmöglichkeiten hervorruft. Je nach Formatdefinition, kann bei Überlappung dann ein Container den anderen beschneiden oder aber über bzw. unter dem anderen Container liegen (was nichts anderes heißt, als dass die Container verschiedenen Ebenen zugeordnet werden können. Sie heißen in diesem Fall auch Floating Boxes (Schwebrahmen).
Schauen wir uns hierzu gleich mal ein Beispiel an: In dieser Beispielseite ist nicht etwa eine Grafik geladen, sondern normaler html-Text in drei überlappenden Formatcontainern.
Der Quellcode hierzu lautet:
--------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Floating Boxes 1</title>
<style media="screen" type="text/css">
<!--
#box_a { color: maroon; font-size: 18px; line-height: 40px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; padding: 10px; position: absolute; top: 96px; left: 16px; width: 351px; height: 60px; visibility: visible }
#box_b { color: olive; font-size: 30px; line-height: 50px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; word-spacing: 5px; letter-spacing: 3px; margin: 30px; padding: 30px; border: 2px olive; position: absolute; top: 11px; left: 78px; width: 251px; height: 260px; visibility: visible }
#box_c { color: #666; font-weight: 800; font-size: 26px; font-family: "Courier New", Arial, Helvetica, Geneva, Swiss, SunSans-Regular, Courier, Monaco; text-align: right; position: absolute; top: 190px; left: 161px; width: 169px; height: 96px; visibility: visible }
-->
</style>
</head>
<body bgcolor="#ffffff">
<p></p>
<div id="Ebene2">Floating Boxes are Great !</div>
<div id="Ebene1">Floating Boxes are Great !</div>
<div id="Ebene3">Floating Boxes are Great !</div>
</body>
</html>
----------------------
Wie Sie sehen, hat das zugrundeliegende (hier interne) Stylesheet (in Rot wiedergegeben) wieder Ähnlichkeiten mit den Vorhergehenden. Die Style-Definitionen beginnen nun aber mit #, was das Zeichen für CSS-IDs ist.
Wollen wir dazu nochmals zusammenfassen:
- Element-Selektorennamen beginnen mit dem entsprechenden Tag (ohne spitze Klammern). Element-CSS-Definitionen lauten also z.B.
b {definitionen...}
- Klassennamen sind beliebig und beginnen mit . Klassen-CSS-Definitionen lauten also z.B.:
.lieblingsstil {definitionen...}
- ID-Namen sind beliebig und beginnen mit #. ID-Definitionen lauten also z.B.:
#coolcontainer {definitionen...}
Die jeweiligen Formatcontainer werden durch den Divider-Tag definiert, was wir ja schon von den Class-Definitionen kennen. Hier gibt es also gewisse Überlappungen und tatsächlich kann nicht uneingeschränkt empfohlen werden, Klassen und IDs in StyleSheets zu mischen.
Wie aber legen wir nun in GoLive derartige ID-Definitionen an? Hierzu gibt es zwei Möglichkeiten.
1. Die naheliegendere Methode ist zugleich die weniger empfehlenswerte:
- Legen Sie ein StyleSheet (in diesem Fall am besten intern) an, falls Sie dies noch nicht getan haben (Klick auf das Treppensymbol rechts oben im Layoutfenster.
Definieren Sie ID-Elemente mit dem entsprechenden Icon in der Werkzeugleiste (Abb. rechts).- Wählen Sie im StyleSheet-Inspektor die gewünschten Optionen aus. Wichtig bzw. sinnvoll dabei ist, dass Sie eine absolute Position des definierten ID (berechnet von Links, sowie Oben) sowie dessen Größe (Breite/Höhe) angeben. Den Modus sollten Sie auf Absolut setzen. (Abb. unten). Die sonstigen Formatierungen nehmen Sie wie von Element- und Klassenselektoren gewohnt vor. Wenn Sie einen Z-Index angeben, definieren Sie eine bestimmte Ebene für den Container. 1 liegt unterhalb 2 usw. Dies ist ggf. wichtig, wenn Sie überlappende IDs definieren (sowie bei der Animation dieser Container, siehe nächster Modul).
Wie ordnen Sie nun die soeben definierten Stile den jeweiligen Inhalten zu? GoLive unterstützt dies leider nicht im Layout-Modus. Sie müssen in den Quellcode-Modus gehen, dort -sofern nicht schon generiert (z.B. durch Zentrierung) - ggf. die in einen Container aufzunehmenden Inhalte mit <div> bis </div> ummanteln und dann von Hand als Div-Attribut eingeben (vgl. mit obigem Syntax-Beispiel):
<div id="name1">inhalt</div>
Ziemlich umständlich für einen professionellen Editor, nicht wahr? Aber keine Angst, GoLive hat da eine zweite, viel einfachere Möglichkeit vorgesehen. Obige Methode haben wir vor allem durchgespielt, um uns mit Prinzip und Syntax von CSS-IDs vertraut zu machen.
Möglichkeit 2: Einfügen von Floating Boxes aus der Objekte-Palette
Sofern Sie IDs mit definierter Größe (Breite/Höhe) sowie in absoluter Positionierung verwenden wollen, was ich dringend empfehle (ansonsten verwenden Sie zur CSS-Formatierung lieber Klassen- oder Element-Selektoren), haben Sie mit GoLive leichtes Spiel:
Gehen Sie in die Objekte-Palette (Reiter Allgemein, d.h. body-Tags) und ziehen das Floating-Box-Objekt (in der deutschen Version missverständlich als "Rahmen" bezeichnet; Abb. rechts)auf Ihr Layout-Fenster:
- Ziehen Sie den Floating-Box-Rahmen in die gewünschte Größe auf und positionieren Sie ihn mit Drag and Drop auf die gewünschte absolute Position.
- Wenn Sie den Hilfs-Rahmen (oder das kleine gelbe Anfasser-Icon (dessen Beschriftung ich nicht lesen kann, evtl. SB?) der Floating Box im Layoutfenster mit der Maus aktivieren, können Sie im Inspektor den von GoLive-generierten ID-Namen (EbeneSoundso) ändern, eine Hintergrundfarbe oder Hintergrundbild einfügen, ggf. eine Tiefe (entspricht dem Z-Index von oben) angeben und auch die Positionierung und Größe des Formatcontainers in Pixelwerten ändern (zur Sichtbarkeit und Animationsmöglichkeit kommen wir im nächsten Modul) (Abb. unten)
- Wenn Sie vorhaben, Text in diesem Formatcontainer wiederzugeben, machen Sie unbedingt nähere Angaben zur Formatierung. Klicken Sie dazu auf das StyleSheet-Icon. Im sich daraufhin öffnenden Fenster finden Sie einen Stylesheet-Neuantrag zu Ihrer Floating Box als CSS-ID (#EbeneSoundso bzw. #IhrName). Definieren Sie in der unter Möglichkeit 1 beschriebenen Weise die Formate.
- Füllen Sie Ihre Floating Box mit Inhalt. Dies kann Text sein (der dann im definierten Format erscheint), aber auch Abbildungen, Links, Tabellen oder sonstige html-Elemente.
- Erstellen Sie die nächste Floating Box in der geschilderten Weise.
Haben Sie das Extra-Fenster wieder geschlossen?
Heißer Tipp: Verwenden Sie Floating Boxes nie für "untere" Teile einer html-Seite, wenn der darüberliegende Inhalt nicht via CSS mit absoluten Textgrößen und absoluten Zeilenabständen definiert wurde. Je nach Browser liegt sonst Ihre absolute Position der Floating Box zwar immer an der gleichen Stelle, aber der jeweilige dort befindliche Inhalt ist je nach Benutzereinstellungen und verwendetem Browser sehr unterschiedlich. Wenn Floating Boxes am Anfang einer Seite zu liegen kommen oder die Seite ausschließlich aus Floating-Boxes aufgebaut ist, gibt es diese Probleme nicht.
Heißer Tipp: Wenn Sie Text in Floating Boxes unterbringen, formatieren Sie diesen via CSS-IDs unbedingt in absoluter Größe, Zeilenabstand und Rand zur Box. Ansonsten erleben Benutzer ggf. ihr blaues Wunder, da je nach Benutzereinstellungen, Browser- und Plattformtyp die Größe der Textbox vielleicht nicht ausreicht und damit die Positionierung nicht mehr stimmt oder der Text in Minischrift dargestellt wird.
Tipp und Hinweis: Selbst wenn Sie nach Möglichkeit A ein ID-anlegen, welches exakt der Syntax einer Floating Box entspricht, zeigt GoLive im Layout-Modus keine Floating-Box-Hilfsbegrenzung an. Diese erscheint nur, wenn das entsprechende Objekt aus der Objektepalette gezogen wurde (GoLive "merkt "sich dies in der Website-Datei). Überhaupt vermag GoLive IDs, die via StyleSheet-Fenster eingerichtet wurden, nicht richtig im Layout- und Vorschau-Modus anzuzeigen. Sie müssen dazu eine Browservorschau aufrufen. Floating Boxes, die mit dem entsprechenden Palettenobjekt generiert wurden, zeigt aber GoLive richtig in Layout- und Vorschaumodus an. Ein weiterer Grund, ausschließlich dieses Palettenobjekt zu verwenden, wenn in GoLive ID-Container erstellt werden sollen.
Cool: Fixierte, nichtscrollende Floating Boxes: Für Netscape-Benutzer ist es auch möglich, eine Floating Box fixiert darzustellen. Dies bedeutet, dass anderer Seiteninhalt (darunter ggf. auch anderer Floating Boxen) wie üblich gescrollt werden kann, die fixierte Floating Box dabei aber nicht wegscrollt, sondern auf ihrer bezüglich zur Fenstergröße (nicht zum Seiteninhalt) absoluten Position fixiert bleibt und der Rest darunter (bei Vorhandensein anderer Floating Boxen auf Wunsch auch darüber) hinwegscrollt.
Nachfolgend ein Beispiel mit zwei fixierten Floating Boxen. Funktioniert aber bislang meines Wissens nur bei manchen Browsern (z.B. Netscape >6.0, Internet-Explorer 5.0). Je nach Subversion und Plattform gibt es aber auch bei diesen Versionen falsche bzw. keine entsprechende Darstellung (so z.b. unter NN 6.0 für Mac, IE 5.0 für PC; NN6.2 für PC funktioniert, IE 5.0 für Mac ebenso).
- Beispiel mit zwei fixierten Floating Boxen einem getrennten Fenster.
- Falls Sie sich nicht sicher sind, ob Sie den Effekt mit Ihrem Browser richtig sehen, hier zwei Screenshots davon, wie es aussehen sollte.
- Extra-Fenster hier wieder schließen
Wie funktioniert dies? Ein bisschen Handarbeit ist notwendig.
Wenn Sie eine Floating Box-Angelegt haben, haben Sie ja ein Style-Sheet generiert (bzw. von Hand angelegt). Im Header steht dann z.B.
<style media="screen" type="text/css"><!--
#Ebene1 { color: olive; font-size: 30px; line-height: 50px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; word-spacing: 5px; letter-spacing: 3px; margin: 30px; padding: 30px; border: 2px olive; position: absolute; top: 11px; left: 78px; width: 251px; height: 260px; visibility: visible }
--></style>
Wenn Sie position: absolute; ersetzen durch position: fixed; haben Sie das das ID-Element #Ebene1, d.h. unsere Floating Box fixiert.
Für Techies: "position: fixed" ist ein Attribut der Cascading Style Sheet-Definition, Level 2. In den allermeisten Browsern (und dies auch erst ab Browserversionen 4) ist aber erst CSS Level 1 integriert. Einen Ausblick auf die neuen CSS-Spezifikationen geben wir im Anhang.
Gratulation, nun sind Sie wirklich fit in Cascading Style Sheets! Weitere Zusatzinfos für diejenigen, die noch tiefer in die Syntax der zukunfsträchtigen Stylesheets einsteigen wollen, finden Sie im Anhang 5.
Apropos, haben Sie eigentlich herausgefunden, warum Cascading Style Sheets als "kaskadierend" bezeichnet werden?
Nun, bei verschachtelten StyleSheets (- bleiben wir hier mal bei Element-Selektoren und Klassen-Selektoren-Stylesheets -) gilt bei fixer Definition von Stilen zwar immer nur der Innerste, wenn aber eine "äußerer" Stylesheet_Formatierbefehl den Stil Schrift-Monaco rot definiert und ein "innerer", d.h. darin verschachtelter Stylesheet-Befehl nur Schriftfarbe grün definiert, dann wird de facto der Schrifttyp Monaco geeerbt und mit Grün versehen, also Monaco grün. Diese "Inheritance" wird von außen nach innen, wie bei untereinanderliegenden Stromschnellen abgearbeitet und führte zu dem "Kaskaden"-Namen (ein paar zusätzliche Hinweise hierzu finden Sie in Anhang 5)
Im nächsten Kapitel erfahren Sie, wie als Floating-Boxes in GoLive angelegte IDs ganz einfach und sehr effektiv animiert werden können, womit wir in Dynamic html (dhtml) und Script-Actions einsteigen.
