Einen Augenblick Geduld...
Ebenen sind das A und O bei der Webseitenprogrammierung - auch wenn das früher mal anders war und man zu dieser Zeit viel mit sog. Frames gearbeitet hat um Textblöcke und Inhalte voneinander zu trennen. Anschließend blieben vordefinierte Inhalte starr und andere veränderten sich, bzw. scrollten mit dem Scrollvorgang der Seite nach unten.
Mit div-Ebenen lässt sich das viel präziser steuern und exakt positionieren - sowohl horizontal als auch vertikal, und das unabhängig vom verwendeten Browser. Das macht die Verfahrensweise wesentlich individueller, aber auch ökonomischer.
1. Ebenen, und wie man sie erzeugt
2. Zweite Ebene hinzufügen und diese überlagern
Wie immer ist es bei der Erstellung von Webseiten sinnvoll hinter die Kulissen zu schauen und sich den Quelltext der Webseite näher anzuschauen. In diesem Tutorial gehe ich davon aus, dass grundlegende Kenntnisse in HTML existieren. Anderfalls empfehle ich die Grundlagen, in denen es um HTML und die Erstellung von CSS geht durchzuarbeiten. Dazu habe ich bereits ein Tutorial verfasst (Grundlagen: HTML, CSS und Javascript).
Beginnen wir also mit den Ebenen. In HTML heißen sie "div". Das Großschreiben macht hier übrigens nicht so viel Sinn. Im Gegenteil, mancher Syntax macht es sogar erforderlich speziell auf die Groß-, bzw. Kleinschreibung zu achten - also, wir bleiben beim "klein schreiben".
Ich beginne wie immer mit einer leeren Seite, die ich hier zunächst mit einem Bereich für die Styles im Head-Bereich der Webseite vorbereite. Folgt später eine größere Menge Inhalt würde ich, um die Übersichtlichkeit in dem HTML-Dokument zu wahren, die Styles auslagern in eine eigene Datei (CSS).
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
</body>
</html>
Als nächstes lege ich eine Ebene im body-Teil (Zeile 12-13) an mit dem o.g. div-Befehl - wie immer in eckigen Klammern. Letztendlich soll die Ebene mit 200 x 200px (Quadrat) dargestellt werden. Damit ich sie sehe muss ich ihr eine Farbe verpassen. Ich entscheide mich für rot (als Hintergrundfarbe).
<body>
<div class="ebene1"></div>
</body>
Wir erinnern uns: jeder Befehl (in diesem Fall div class=''ebene1'') muss mit spitzen Klammern geöffnet und mit einem zusätzlichen / wieder geschlossen werden.
Das wars auch schon im html-Teil. Jetzt folgen die notwendigen Einträge im style-Teil des Quelltextes um diese Ebene zu formatieren, bzw. ihr einen Größe von 200 x 200 px zuzuweisen und sie rot einzufärben.
<style>
.ebene1 {
height: 200px;
width: 200px;
background-color: red;
position: relative;
}
</style>
Was habe ich hier gemacht?
Ich habe für die Zuordnung des Ebenenbefehls div mit ''ebene1'' die Einträge zunächst in eine geschweifte Klammer gesetzt. Damit die Ebene korrekt angesprochen wird muss sie mit einem Punkt davor gekennzeichnet werden, dann folgen die jeweiligen Formatierungen in geschweiften Klammern:
Alle Befehle werden am Zeilenende mit einem Semikolon ; versehen um sie voneinander zu trennen. Das ist wichtig. Letztendlich könnte man auch alle Befehle damit in eine Zeile schreiben, aber dann wird es schnell unübersichtlich. Deswegen befindet sich jeder Befehl in einer eigenen Zeile und ist entsprechend eingerückt dargestellt.
Hier ist das Ergebnis im Browser:
Um eine zweite Ebene (div-tag) zu erzeugen füge ich zunächst im html-Teil ein div class="ebene2" in eckigen Klammern unter die erste Ebene ein. Die Benennung in den Anführungszeichen ist natürlich frei wählbar - nur bitte keine Sonderzeichen.
<body>
<div class="ebene1"></div>
<div class="ebene2"></div>
</body>
Es folgt die entsprechende Ergänzung im style-Teil. Als Hintergrundfarbe wähle ich nun blau (blue).
<style>
.ebene1 {
height: 200px;
width: 200px;
background-color: red;
position: relative;
}
.ebene2 {
height: 200px;
width: 200px;
background-color: blue;
position: relative;
}
</style>
Bitte unbedingt an die gescheiften Klammern denken. Noch sind die Ebenen nicht überlagert, sondern werden untereinander dargestellt.
Damit der Hintergrund nicht so grell weiss ist, habe ich mit dem Befehl body hier in grau mit body { background-color: darkgrey; } im style-Teil oberhalb der beiden .div-Einträge eingefärbt. Auch hier könnte natürlich wieder ein Hex-Farbwert stehen.
Jetzt möchte ich die beiden Ebenen überlagern und die zweite (hier blaue) Ebene mit einem Versatz von 100px nach rechts und 100px nach oben versehen um die Überlagerung zu zeigen. Dazu nutze ich den margin-top Befehl zum Abstand von oben und entsprechend den margin-left Befehl um den Abstand von links vorzugeben. Im style-Teil sieht das dann so für die zweite Ebene aus.
<style>
.ebene2 {
height: 200px;
width: 200px;
background-color: blue;
margin-top: -100px;
margin-left: 100px;
position: relative;
}
</style>
Das Ergebnis sieht aus wie erwartet. Da der Wert von margin-top negativ ist wird also die Ebene entsprechend nach oben versetzt. Ein positiver Wert würde die Ebene nach unten schieben. Der Wert von margin-left ist positiv und wird damit entsprechen nach rechts versetzt. Ein negativer Wert würde hier die Ebene aus dem sichtbaren Bereich nach links verschieben.
Weitergedacht würde das also z.B. für einen negativen Wert bei margin-right bedeuten, dass sich die div-Ebene auch entsprechend nach rechts verschiebt.
Hier ist das Ergebnis im Browser:
Normaler Weise werden die Ebenen so überlagert dargestellt, wie sie im Quelltext einer Seite eingetragen sind. Somit ist die Ebene die oben liegt immer die zuletzt hinzugefügte Ebene im Quelltext.
Ich kann das aber steuerm durch den sog. z-index-Befehl in den styles. Einfach gesprochen: je negativer dieser Wert ist, desto weiter unten liegt die jeweilige Ebene. Je höher der Wert im positiven Bereich liegt desto weiter vorne liegt sie.
Die normale Ebene, wenn kein z-index Wert vorgegeben ist, hat den Wert 0. Ich würde hier nicht mit großen Zahlewerten operieren sondern im maximal-zweistelligen Bereich bleiben. Mehr ist i.d.R. auch nicht erforderlich.
Auf unser Beispiel heruntergebrochen würde das bedeuten wenn ich die rote div-Ebene nach vorne holen will, benötigt sie einen höheren z-index Wert, z.B. den Wert 2.
<style>
.ebene1 {
height: 200px;
width: 200px;
background-color: red;
z-index: 2;
position: relative;
}
</style>
Und korrekt gefolgert wird die rote Ebene nun vor der blauen dargestellt.
Um einen Ebene transparent zu machen dient der opacity-Befehl in den styles. Dabei ist ein Wert von 1 gleich voll deckend. Werte im Bereich von 0-1 beschreiben hier die unterschiedlichen Transparenzen. Ich würde da allerdings nicht mit 2 und drei Stellen hinter dem Komma experimentieren. Es reicht i.d.R. eine Wert zwischen 0,1 und 0,9.
Der Syntax in den styles lautet dazu so:
<style>
.ebene1 {
height: 200px;
width: 200px;
background-color: red;
z-index: 2;
position: relative;
opacity: 0.5;
}
</style>
Die rote Ebene wird nun um 50% ihrer Deckkraft reduziert. Damit ist sie nun nicht mehr kräftig rot sondern nur noch ein blasses rot - trotzdem, richtig eingesetzt - kein schlechter Effekt.
Ich möchte ein Bild darstellen und es mit einer halbtransparenten Bildbeschreibung versehen. Das erspart mir die aufwendige Bearbeitung in einem Bildbearbeitungsprogramm. Ich erstelle dazu lediglich eine Ebene, lege sie über ein Bild und mache sie halbtransparent. So brauche ich nur das Bild aufzurufen und anschl. den div-Befehl zu nutzen, der mir ja mit den styles im HTML-Dokument jederzeit zur Verfügung steht.
<body>
<img src="pic/bild_01.jpg" width="800" height="358" alt="Bildbezeichnung"/>
<div class="beschreibung">Echse im Weinberg</div>
</body>
In Zeile 3 befindet sich der Bildlink. In Zeile 4 habe ich eine Ebene beschreibung angelegt, die den Text zur Bildbeschreibung enthält.
Die eigentliche Arbeit beginnt im style-Teil:
<style>
.beschreibung {
background-color: hsla(0, 0%, 100%, 0.5);
z-index: 1;
position: absolute;
display: block;
left: 20px;
top: 20px;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
color: #000000;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
</style>
Die Befehle zu background-color sind essentiell um diese Ebene transparent zu machen und dafür zu sorgen, dass der Text auf dieser Ebene nicht ebenfalls halbtransparent dargestellt wird. Die Werte gelten also nur für die Ebene, nicht für den Text. Dabei können die Werte für hsla in Zeile 3 z.B. in dem bereits erwähnten Farbwähler ermittelt werden. Das letzte a steht dabei für den Wert der Transparenz (abweichend von der im Teil 4 gezeigten Transparenz der Ebenen mit opacity.)
Der hsl-Wert zeigt einen weissen Hintergrund mit einer Transparenz (a) von 0,5, also 50% Abdeckung.
Der z-index setzt sich mit dem Wert 1 über das Bild.
Die Angabe absolute bei position ist notwendig um mit den Einträgen bei left und top immer vom jeweiligen oberen, linken Bildrand aus zu rechnen.
Die padding-Werte left, right, top und bottom geben den Abstand vom Text zur Umrandung der weissen, halbtransparenten Ebene ebenfalls in Pixel an.
Ab dem Eintrag color: #000000; wird die Schriftformatierung vorgenommen. Der color-Wert #000000 ist die Farbe schwarz.
Die Angabe zur font-family ist emfehlenswert, damit das genutzte System nicht eine beliebige Systemschriftart nutzt, sondern eine der angegebenen serifenlosen Schriftarten, Helvetica oder Arial.
Dier Wert hinter font-size gibt die Schriftgröße in Pixel an. font-weight steht für Angaben von normal, bzw. bold(=fett).
Die Darstellung im Browser erscheint in folgender Form.
Das gute an der Ebenenmethode ist, dass der Abstand der halbtransparenten Fläche mit der Bildbeschreibung immer an derselben Stelle eines jeden angezeigten Bildes erscheint (man passt lediglich den Bildlink an).
Benötigt man zwei Zeilen ist das auch kein Problem. Die halbtransparente Fläche wird entsprechend vergrößert und sieht dabei immer ''gleich gut'' aus.
Um die Anwendung noch zu verfeinern habe ich den vorhandenen style-Teil geringfügig in punkto vertikaler Abstand von unten (padding-buttom) angepasst.
Zusätzlich habe ich für die zweite Zeile eine neue Ebene geschaffen, die in Abhängigkeit der Ebene beschreibung steht. Entsprechend werden im html-Teil der Webseite diese beiden Ebenen unterhalb des Bildlinks miteinander verschachtelt. So nutzt diese zweite Zeile lediglich eine Schriftgröße von 14px und wird normal und nicht bold in schwarzer Farbe dargestellt.
<body>
<img src="pic/bild_01.jpg" width="800" height="358" alt="Bildbezeichnung"/>
<div class="beschreibung">Echse im Weinberg<div class="untertitel">gesehen an der Moselschleife während einer Wanderung</div></div>
</body>
Entsprechend sieht nun der style-Teil dafür aus:
<style>
.beschreibung {
background-color: hsla(0, 0%, 100%, 0.5);
z-index: 1;
position: absolute;
font-weight: bold;
display: block;
left: 20px;
top: 20px;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 5px;
color: #000000;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
}
.untertitel {
color: #000000;
font-weight: normal;
font-size: 14px;
}
</style>
Ich hoffe, dieses Tutorial konnte Licht in das Kapitel der Ebenen bringen. Es ist zu Zeiten von HTML5 ein gängiger Standard und findet überall in webbasierten Dokumenten Anwendung.
Natürlich gibt es - wie man so schön sagt - viele Wege die nach Rom führen. So lässt sich als Alternative eine Bildbeschreibung auch mit einem sog. div span erzeugen, wenn die Bildbeschreibung zum Bild in ein span gepackt wird. Auch dazu gibt es im Web ein paar Hinweise.
Ich wünsche viel Erfolg mit den Ebenen... und ein bisschen Geduld beim auspobieren.