vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 5

Positionieren mit Stylesheets

Die Verwendung von Stylesheets bricht mit einem der Grundprinzipien des World Wide Webs und speziell des Designs von Webseiten: der Autor der Webseite gibt die Formatierung dezidiert vor, statt Empfehlungen auszusprechen, die clientseitig vom Webbrowser umgesetzt werden. Dies betrifft nicht nur das Erscheinungsbild der einzelnen Elemente (durch Festlegung einer Schriftart, einer Vorder- und Hintergrundfarbe, etc.), sondern auch die Positionierung der Elemente auf der Webseite.

Die Themen heute:

5.1 Vor- und Nachteile der traditionellen Positionierung

Die Grundidee des Webdesigns ist es, die verschiedenen Elemente (Textblöcke, Bilder, Linien, Applets, etc.) relativ zueinander zu positionieren und es dem Webbrowser zu überlassen, diese relative Anordnung soweit es geht sicherzustellen.

Vergegenwärtigt man sich, dass Sie als Webautor bei der Erstellung einer Webseite weder wissen, welchen Browser Ihre Leser verwenden, noch welche Layout-Techniken die Browser Ihrer Leser unterstützen (Grafik, Skriptsprachen, Java, CSS), noch wie groß der Anzeigebereich des Browsers ist, so ist der Entschluss, die endgültige Formatierung und das endgültige Layout dem jeweiligen Browser zu überlassen, leicht nachzuvollziehen.

Schauen Sie sich zum Beispiel die Seite aus Abbildung 5.1 an.

Die Webseite enthält einfach einen Textblock, gefolgt von einer Grafik. An sich nichts Aufregendes - ein normales Textdokument könnte genauso aussehen.

Interessant wird es aber, wenn man sich den HTML-Text dieser Seite anschaut. Im einfachsten Fall wird die Webseite im Editor in genau der gleichen Weise aufgesetzt, wie ein Textdokument. Sie nutzen dann automatisch die relative Positionierung durch den Browser. Sie hätten aber auch die Möglichkeit, die Position der eingebetteten Grafik durch ein Stylesheet absolut festzulegen. Sie brauchen dazu nur für das img-Tag die Stileigenschaft position auf absolute zu setzen und die x,y-Koordinate der linken oberen Bildecke anzugeben (Stileigenschaften left und top).

Abbildung 5.1:  Grafik unter einem Textblock

Relative Positionierung

Absolute Positionierung

<!DOCTYPE ...

<html>

<head>

<title>Traditionelle Positionierung</title>

<style type="text/css">

body { background-color: #cdcdcd }

</style>

</head>

<body>

<h1>Flekkefjord</h1>

<p>Flekkefjord ist eine kleine Hafenstadt an der Südküste Norwegens, ungefähr in der Mitte zwischen Kristiansand und Stavanger. Trotz des unermüdlichen Stroms an Pendlern und Touristen, die auf dem Weg von Kristiansand nach Stavanger durch das Städtchen ziehen, hat sich Flekkefjord den Charakter des verschlafenen Hafenstädtchens bewahrt.</p>

<img src="nor.jpg" alt="Strasse in Flekkefjord">

</body>

</html>

<!DOCTYPE ...

<html>

<head>

<title>Absolute Positionierung</title>

<style type="text/css">

body { background-color: #cdcdcd }

img {position: absolute; top: 150; left : 10}

</style>

</head>

<body>

<h1>Flekkefjord</h1>

<p>Flekkefjord ist eine kleine Hafenstadt an der Südküste Norwegens, ungefähr in der Mitte zwischen Kristiansand und Stavanger. Trotz des unermüdlichen Stroms an Pendlern und Touristen, die auf dem Weg von Kristiansand nach Stavanger durch das Städtchen ziehen, hat sich Flekkefjord den Charakter des verschlafenen Hafenstädtchens bewahrt.</p>

<img src="nor.jpg" alt="Strasse in Flekkefjord">

</body>

</html>

Tabelle 5.1: Traditionelle relative und absolute Positionierung

Solange Sie die Abmaße des Browsers (oder der Editorvorschau) nicht ändern, ist alles in Ordnung. Der Unterschied zwischen relativer und absoluter Positionierung macht sich aber bemerkbar, sowie Sie das Browser-Fenster verändern, es beispielsweise verschmälern.

Traditionelle Positionierung

Absolute Positionierung

Tabelle 5.2: Relative und absolute Positionierung

Wird das Browser-Fenster verschmälert, bricht der Browser den Text um, damit dieser ohne horizontales Scrollen gelesen werden kann. Bei der relativen Positionierung rückt der Browser automatisch die Grafik weiter nach unten, so dass sie nach wie vor unter dem Textblock angezeigt wird. Wurde die Position der Grafik dagegen absolut angegeben, bleibt Sie an dieser Position - Text und Grafik überlagern sich. Man kann dies korrigieren, indem man den Textblock in einen <div>-Block einfasst und diesen ebenfalls absolut positioniert oder indem man unter Zuhilfenahme einer Skriptsprache das <img>-Element dynamisch positioniert.

Absolute Positionierung einzelner Elemente kann zu unerwünschten Überlagerungen führen

Vorteile der absoluten Positionierung

Die absolute Positionierung kann aber auch sehr hilfreich sein - beispielsweise

5.2 Grundlagen der CSS-Positionierung

Bevor wir uns die einzelnen Attribute für die CSS-Positionierung anschauen, sollten wir uns mit den Grundideen der Positionierung von HTML-Elementen vertraut machen.

HTML-Positionierung

Der grundlegende Algorithmus zur Positionierung von HTML-Elemente ist an sich ganz einfach:

So wird beispielsweise aus dem folgenden HTML-Code:

...
<body>

<h1>HTML-Positionierung</h1>

<p>Erster Absatz mit Bild : <img src="frau.gif" alt="frau" /> und Textpassage: <em>Dies ist ein eingebettetes HTML-Element</em> </p>

<p>Zweiter Absatz </p>

</body>
...

die Webseite aus Abbildung 5.2.

Abbildung 5.2:  Positionierung nach Reihenfolge des Auftretens

HTML kennt nur wenige und zudem recht eingeschränkte Möglichkeiten, auf diese Form der Positionierung Einfluss zu nehmen: die Verwendung von Tabellen (siehe Kapitel 3.1) und das Herausreißen von Bildern aus dem Fluss der umliegenden HTML-Elemente (siehe Abschnitt 5.6).

Mit CSS-Positioning ist es dagegen möglich, zwischen vier Positionierungsschemas zu wählen. Sie müssen dazu nur der Stileigenschaft position einen der folgenden Werte zuweisen:

Beginnen wir mit dem Schema, dass Sie ohne Zweifel am meisten interessieren wird: der absoluten Positionierung.

Absolute Positionierung

Absolute Positionierung bedeutet, dass Sie die Koordinaten, an denen das Element eingeblendet werden soll, explizit angeben. Wenn Sie ein Element, beispielsweise ein Bild absolut positionieren wollen, gehen Sie wie folgt vor:

  1. Setzen Sie die position-Eigenschaft für das Element auf absolute (sie können dies über ein Stylesheet oder das style-Attribut tun).
    <img style="position: absolute"
  2. Dann positionieren Sie das Element, indem Sie den top- und left-Eigenschaften Werte zuweisen.
    <img style="position: absolute; top: 20px; left: 10px" src=... />

Der Netscape Navigator 4 erlaubt keine CSS-Positionierung ersetzter Elemente (im Falle des <img>-Tags wird das Element durch das Bild »ersetzt«, auf dessen Datei sein src-Attribut verweist).

Die Eigenschaften left und top

Wie genau erfolgt die Positionierung über left und top?

Erinnern Sie sich an das Box-Modell, das wir in Kapitel 4.3.2 besprochen haben? Jedes HTML-Element liegt aus Sicht des Browsers in einer unsichtbaren rechteckigen Box, die seinen Inhalt - inklusive Füllraum und Rand - einschließt. Wenn der Browser die verschiedenen HTML-Elemente auf der Webseite positioniert, positioniert er keine Textabsätze oder Bilder, sondern Boxen (mit verschiedenen Inhalten). Was dem Browser recht ist, kann uns nur billig sein - sprich, die Eigenschaften left und top beziehen sich auf die Box um das zu positionierende HTML-Element.

Neben left und top kann man noch die Stileigenschaften bottom und right zur Positionierung nutzen.

Abbildung 5.3:  Positionierung mit left und top

Jetzt müssen wir nur noch klären, was ein Positionierungskontext ist.

Der Positionierungskontext ist das Koordinatensystem, in dem HTML-Elemente durch explizite Positionsangaben (left, top = Position der linken oberen Ecke der Box des HTML-Elements) oder durch ihre Einbettung im Fluss des HTML-Codes ausgerichtet werden.

Jede Webseite verfügt über einen Standardpositionierungskontext, der an das <html>-Tag gebunden ist. Seine Koordinaten und Abmaße werden vom Browser definiert und können nicht verändert werden. Sofern man von der CSS-Positionierung keinen Gebrauch macht, gibt es nur diesen einen Positionierungskontext. Wird aber für ein HTML-Element die Stileigenschaft position auf absolute oder relative gesetzt, bildet dieses Element einen eigenen Positionierungskontext, der für alle eingebetteten Elemente (soweit vorhanden) gilt.

Betrachten Sie dazu das folgende Beispiel, in dem die Textpassage (<span>-Abschnitt) mit der Stil-ID aussen absolut positioniert wird. Der in dieser Textpassage eingebettete <span>- Abschnitt mit der ID innen wird ebenfalls absolut positioniert - und zwar mit genau den gleichen Werten für top und left. Trotzdem überlagern sich die beiden absolut positionierten Elemente nicht, denn der äußere Abschnitt wird im Positionierungskontext der HTML-Seite positioniert, während der innere Abschnitt im Positionierungskontext des umliegenden, absolut positionierten Abschnitts verschoben wird.

HTML-Code

Ansicht im Browser

...

<style type="text/css">

#aussen {position: absolute;

top: 2cm; left: 3cm;

width: 5cm; color: red}

#innen {position: absolute;

top: 2cm; left: 3cm;

width: 5cm; font-weight: bold}

</style>

...

<body>

<p>o o o o o o o o o o o o o o o o o o o o o o o o o o o <span id="aussen">Beginn der äußeren Textpassage. <span id="innen">Innerer Text.</span> Ende der äußeren Textpassage. </span>o o o o o o o o o o o o o o o o o o o o o o o o o o o </p>

</body>

</html>

Tabelle 5.3: Absolute Positionierung

Wenn Sie Elemente absolut positionieren, achten Sie auf die verwendete Maßeinheit. Absolute Maßeinheiten wie cm, in oder pt sind nicht auf allen Systemen gleich. Konsistentere Ergebnisse erzielt man meist mit em, px oder %.

Überlagerung von Elementen

Wenn Sie HTML-Elemente absolut positionieren, kann es leicht passieren, dass sich die positionierten Elemente überlagern (unter Umständen ist dies überhaupt der Grund, warum Sie die Elemente absolut positionieren). Wenn sich zwei Elemente überlagern, stellt sich natürlich sofort die Frage, welches Element oben und welches unten liegt.

Wenn Sie Bilder mit grafischen Objekten überlagern, verwenden Sie GIF- oder PNG-Bilder mit transparentem Hintergrund.

Zusammenfassung

Absolut positionierte Elemente haben vier wichtige Eigenschaften:

Relative Positionierung

Die relative Positionierung (position: relative) kommt einer Verschiebung am nächsten. Man stellt sich das am besten so vor, dass die Webseite zuerst so angezeigt wird, als ob das Element überhaupt nicht positioniert würde. Dann wird das Element aus der formatierten Seite ausgeschnitten und von seiner Anfangsposition um die top- und left-Werte verschoben.

Relativ positionierte Elemente haben vier wichtige Eigenschaften:

HTML-Code

Ansicht im Browser

<style type="text/css">

#aussen {position: relative;

top: 3cm; left: 3cm;

width: 5cm; color: red}

#innen {font-weight: bold}

</style>

...

<body>

<p>o o o o o o o o o o o o o o o o o o o o o o o o o o o <span id="aussen">Beginn der äußeren Textpassage. <span id="innen">Innerer Text.</span> Ende der äußeren Textpassage. </span>o o o o o o o o o o o o o o o o o o o o o o o o o o o </p>

</body>

</html>

Tabelle 5.4: Relative Positionierung

Statische und fixierte Positionierung

Statische Positionierung (position: static) bedeutet, dass das HTML- Positionierungsschema verwendet wird. (Positionierung durch den Browser nach dem Ort der Definition; Werte für die Attribute left und top werden ignoriert.)

Fixierte Positionierung (position: fixed) bedeutet, dass ein Element absolut positioniert wird und im Browser nicht zusammen mit dem Webinhalt gescrollt wird (beim Ausdruck erscheint das Element an der entsprechenden Position auf jeder Seite). Die fixierte Positionierung wird derzeit noch von keinem Browser unterstützt.

5.3 Die Positionierungsattribute

In Tabelle 5.5 sind die verschiedenen Attribute aufgeführt, die Ihnen für die CSS- Positionierung zur Verfügung stehen.

Attribut

Werte

Beschreibung

position

static

erlaubt keine explizite Positionierung

absolute

erlaubt explizite Positionierung relativ zum übergeordneten Positionierungskontext und erzeugt einen eigenen Positionierungskontext für eingebettete Elemente.

relative

erlaubt explizite Positionierung relativ zur ursprünglichen Lage und erzeugt einen eigenen Positionierungskontext für eingebettete Elemente.

left

auto

Länge (em, px, cm, in...)

Prozent (%)

Abstand des linken Randes der Box vom linken Rand des Positionierungskontextes.

Der Ursprung der Verschiebung hängt von dem Wert von position ab.

top

auto

Länge (em, px, cm, in...)

Prozent (%)

Abstand des oberen Randes der Box vom oberen Rand des Positionierungskontextes.

Der Ursprung der Verschiebung hängt von dem Wert von position ab.

bottom

auto

Länge (em, px, cm, in...)

Prozent (%)

Abstand des unteren Randes der Box vom unteren Rand des Positionierungskontextes.

Der Ursprung der Verschiebung hängt von dem Wert von position ab.

right

auto

Länge (em, px, cm, in...)

Prozent (%)

Abstand des rechten Randes der Box vom rechten Rand des Positionierungskontextes.

Der Ursprung der Verschiebung hängt von dem Wert von position ab.

z-index

auto

Wert: 1, 2, 3...

Elemente mit höheren Werten werden bei Überlagerung über Elemente mit niedrigeren Werten gestapelt.

Elemente mit gleichem z-Index werden gemäß ihrer Position im HTML-Code von unten nach oben gestapelt.

Tabelle 5.5: Attribute für die CSS-Positionierung

5.4 Freies Webdesign dank CSS-Positionierung

Webseiten, die als Eintrittsseiten in größere Webs fungieren, sind oftmals so aufgebaut, dass sie zum einem das Thema der Website transportieren, zum anderen Links zu den Webseiten der nächsten Ebene bereitstellen.

Die Seite aus Abbildung 5.4 ist hierfür ein Beispiel. Sie lädt Sie ein, Lateinamerika zu besuchen, und bietet Ihnen verschiedene grafische Links an, über die Sie sich über Land und Leute informieren können.

Abbildung 5.4:  Webdesign mit Hilfe der CSS-Positionierung

Der Quelltext dieser Seite sehen Sie in Listing 5.1.

Listing 5.1: freiesDesign.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Freies Design</title>
<style type="text/css">
body { background-image: url(blaustreifen.jpg);
background-repeat: repeat-y;
background-color: white }
div { position : absolute }
#latin { margin-left: 110px}
#geschichte { top: 230px; left: 120px}
#leute { top: 330px; left: 60px}
#land { top: 330px; left: 220px}
#kultur { top: 150px; left: 576px}
#wirtschaft { top: 45px; left: 512px}
</style>
</head>

<body>

<h2>Willkommen in Lateinamerika</h2>

<img id="latin" src="LatinAm.gif" alt="Lateinamerika "
width="550" height="646" />

<div id="geschichte">
<img src="geschichte.jpg" alt="Geschichte" width="142" height="95" />
</div>

<div id="leute">
<img src="leute.jpg" alt="Leute" width="101" height="151"> </p>
</div>

<div id="land">
<img src="land.jpg" alt="Land" width="136" height="91">
</div>

<div id="kultur">
<img src="kultur.jpg" alt="Kultur" width="98" height="150">
</div>

<div id="wirtschaft">
<img src="wirtschaft.jpg" alt="Wirtschaft" width="96" height="143">
</div>

</body>
</html>

Wenn Sie sich den HTML-Code anschauen, werden Sie feststellen, dass alle absolut zu positionierenden <img>-Elemente in <div>-Elemente eingefasst wurden und dass es diese sind, die in Wirklichkeit absolut positioniert werden. Dies liegt daran, dass der Netscape Navigator 4 im Gegensatz zum Internet Explorer oder dem Netscape 6-Browser keine absolute Positionierung zu ersetzender Elemente (wie z.B. <img>-Elemente) erlaubt. Um auch den Netscape Navigator 4 zu unterstützen, wurden die <img>-Elemente daher in formatierungsneutrale <div>-Elemente eingeschlossen und mit diesen zusammen positioniert.

Der blaue Randstreifen ist ein Hintergrundbild, das entlang der y-Achse wiederholt wird:

     body { background-image: url(blaustreifen.jpg); 
background-repeat: repeat-y;
background-color: white }

Wenn Sie ein Hintergrundbild wählen, dass nicht das gesamte Browserfenster ausfüllt (wie in obigem Beispiel), sollte man unbedingt die gewünschte Hintergrundfarbe explizit setzen. Verlassen Sie sich keinesfalls darauf, dass die Websurfer Ihre Webbrowser so eingestellt haben, dass der Hintergrund immer Weiß ist.

Die Karte von Lateinamerika, die wie ein Hintergrundbild aussieht, ist in Wirklichkeit ein normal eingebettetes Bild, das um 110 Pixel nach rechts verschoben ist.

     #latin      { margin-left: 110px}

Das Einzige, was der Webseite noch fehlt, sind die Hyperlinks zu den positionierten Bildern.

CSS-Positionierung versus Tabellen

Bevor man die Möglichkeit der CSS-Positionierung in den großen Browsern nutzen konnte, wurden Layouts wie für die Lateinamerika-Seite aus dem vorangehenden Abschnitt meist mit Hilfe von Tabellen aufgebaut. Es stellt sich daher die Frage, ob uns die CSS-Positionierung hier überhaupt Vorteile bringt oder ob nicht doch die Verwendung von Tabellen einfacher wäre.

Vorteile der Tabellen

Vorteile der CSS-Positionierung

Der letzte Punkt wurde im Lateinamerika-Beispiel gleich zweimal ausgenutzt: einmal bei der Überlagerung der Bilder für Industrie und Kultur, zum anderen bei der Überlagerung der Landkarte. In einer Tabelle müssten Sie dazu die Landkarte als Hintergrundbild definieren. Hat man aber bereits wie in obigem Beispiel bereits ein anders Bild als Hintergrundbild ausgesucht, bleibt nur der Ausweg, die einzelnen Bilder zu einem großen Bild zu verschmelzen und dieses wieder in Teilbilder aufzubrechen, die man auf die Tabellenzellen verteilt (siehe auch Übung 3.2).

Tabellen und CSS-Positionierung gemeinsam nutzen

Schließlich besteht die Möglichkeit, Elemente innerhalb einer Tabelle absolut zu positionieren. Dabei sollten Sie folgende Empfehlungen beachten:

Aber nicht immer ist CSS-Positionierung die elegantere Lösung. Betrachten Sie zum Beispiel die Webseite aus Abbildung 5.5.

Abbildung 5.5:  Aufwendig positionierte Webseite

Ein Design wie in Abbildung 5.5 baut man am Besten mit Hilfe einer Tabelle auf, siehe Abbildung 5.6.

Abbildung 5.6:  Positionierung mit Tabellen und blinden GIFs

Die bogenförmige Ausrichtung der Hyperlinks (im Beispiel nur durch Text angedeutet) erreicht man am einfachsten durch die Einschaltung von blinden GIFs (hier spacer.gif).

spacer.gif ist ein einfaches GIF-Bild von genau einem Pixel in transparenter Farbe. Indem man dieses Bild den Hyperlink-Texten in der linken Zelle nachstellt (bzw. den Hyperlink- Texten in der rechten Zelle voranstellt) und dann die Weiten der GIFs für die untereinander liegenden Hyperlinks in gleichmäßigen Schritten erhöht und wieder erniedrigt, kann man ohne große Mühe einen perfekten Bogen erzeugen.

Als HTML-Code sieht das dann wie folgt aus.

Listing 5.2: Geologie.html - Positionierung mit Tabellen und GIFs

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Posiitonierung mit Tabellen und GIFs</title>
<style type="text/css">
body { margin-top: 2em; background-color: maroon; color: white}
h1 { margin-bottom: 1em }
div { margin-left: 50px }
</style>
</head>

<body text="white">

<h1>Geologisches Institut Neuwiedstätt</h1>

<div>
<table border="0" width="700">
<tr>
<td width="33%" align="right">
<p>&lt;Allgemeine Geologie&gt;
<img src="spacer.gif" width="5" height="5" alt="" />
</p>
<p>&lt;Dynamische Geologie&gt;
<img src="spacer.gif" width="30" height="5" alt="" />
</p>
<p>&lt;Historische Geologie&gt;
<img src="spacer.gif" width="45" height="5" alt="" />
</p>
<p>&lt;Angewandte Geologie&gt;
<img src="spacer.gif" width="30" height="5" alt="" />
</p>
<p>&lt;Regionale Geologie&gt;
<img src="spacer.gif" width="5" height="5" alt="" />
</p>
</td>
<td valign="middle" align="center">
<img src="welt.gif" alt="welt.gif (7 KByte)"
width="200" height="141" />
</td>
<td width="33%">
<p><img src="spacer.gif" width="5" height="5" alt="" />
&lt;Geophysik&gt;
</p>
<p><img src="spacer.gif" width="30" height="5" alt="" />
&lt;Mineralogie&gt;
</p>
<p><img src="spacer.gif" width="45" height="5" alt="" />
&lt;Petrographie&gt;
</p>
<p><img src="spacer.gif" width="30" height="5" alt="" />
&lt;Paläontologie&gt;
</p>
<p><img src="spacer.gif" width="5" height="5" alt="" />
&lt;Seismographie&gt;
</p>
</td>
</tr>
</table>
</div>

</body>
</html>

Warum Tabellen und blinde GIFs?

Nun, die Positionierung mit der Tabelle geht in diesem Fall natürlich viel schneller als die explizite CSS-Positionierung und ist zudem wesentlich wartungsfreundlicher. Statt der blinden GIFs hätte man auch auf die Stileigenschaft padding zurückgreifen können, doch wird diese von Navigator 4 nicht in Tabellenzellen unterstützt. Daher die etwas altmodische Einrückung mittels eines blinden GIFs.

Wenn Sie blinde GIFs verwenden, achten Sie darauf, dass diese transparent sind!

5.5 Sichtbarkeit und Clipping

Die CSS2-Spezifikation führte nicht nur das Positionieren mit Stylesheets ein, sie brachte auch Unterstützung für das Clipping und Ausblenden von HTML-Elementen. Von Clipping spricht man, wenn nur ein Teil eines HTML-Elements sichtbar bleibt.

Clipping

Mit Hilfe der Stileigenschaft overflow kann man den sichtbaren Bereich eines HTML- Elements beschneiden (und gegebenenfalls Bildlaufleisten zum Scrollen des sichtbaren Bereichs einrichten).

Zur Beschränkung des Anzeigebereichs reduziert man die Box-Abmaße. Mit Hilfe der Stileigenschaften width und height kann man für Blockelemente (und explizit positionierte Inline-Elemente) die Box-Abmaße festlegen:

style="width: 450px; height: 200px"

Dies allein führt aber noch nicht zu dem gewünschten Ergebnis, da der Inhalt eines HTML-Elements über die Box hinaus reichen kann. Will man erreichen, dass der Boxinhalt an den Grenzen der Box abgeschnitten wird, muss man noch die Eigenschaft overflow auf hidden setzen:

style="width: 450px; height: 200px; overflow: hidden"

Will man den Anzeigebereich mit Bildlaufleisten ausstatten, verwendet man scroll statt hidden.

style="width: 450px; height: 200px; overflow: scroll"

Will man selbst explizit vorgeben, welcher Ausschnitt des HTML-Elements sichtbar sein soll, legt man den Ausschnitt über die Stileigenschaft clip fest:

style="width: 450px; height: 200px; overflow: hidden;
clip: rect(50px 300px 100px 50px)"

Die Koordinaten für das Clipping-Rechteck werden in der Reihenfolge oben, rechts, unten, links angegeben.

Listing 5.3: clipping.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Overflow</title>
</head>

<body>

<h1>Gedichtesammlung</h1>

<div style="margin-left: 50px">
<table border="0" width="700" cellspacing="10px" style="table-layout: fixed">
<colgroup span="2">
<col width="150">
<col width="500">
</colgroup>
<tr valign="top">
<td width="150">
<h3>Abschied</h3>
</td>
<td width="500">
<div style="padding: 2em; width: 450px; height: 200px;
overflow: scroll;
border-style:solid; border-width: 3px">
<p>Steig doch vom Pferd, komm, laß uns einen Becher leeren,<br />
Verrate mir, wohin die Reise geht!<br />
...</p>
<p>Wang Wei</p>
</div>
</td>
</tr>
<tr valign="top">
<td width="150">
<h3>Der Panther</h3>
</td>
<td width="500">
<div style="padding: 2em; width: 450px; height: 200px;
overflow: scroll;
border-style:solid; border-width: 3px">
<p>Sein Blick ist vom Vorübergehn der Stäbe<br />
so müd geworden, daß er nichts mehr hält.<br />
Ihm ist, als ob es tausend Stäbe gäbe<br />
...</p>
<p>Rilke</p>
</div>
</td>
</tr>
</table>
</div>

</body>
</html>

Abbildung 5.7:  Design mit Clipping-Bereichen

Das Design aus Abbildung 5.7 wird sowohl im Internet Explorer als auch im Netscape 6-Browser korrekt angezeigt. Der Navigator 4 unterstützt das Clipping nicht wie gewünscht. Er zeigt den Inhalt des geclippten Elements vollständig an, so dass wenigstens keine Information verloren geht.

Sichtbarkeit

Schließlich gibt es die Möglichkeit, ein Element durch Setzen der Stileigenschaft visibility gänzlich ein- und auszublenden. Sie brauchen die Eigenschaft dazu nur auf visible beziehungsweise hidden zu setzen.

Diese Eigenschaft hat nicht nur für die dynamische Gestaltung mittels JavaScript ein enormes Potential, sie kann auch bei der Einrichtung suchmaschinenfreundlicher Webseiten helfen. Viele Suchmaschinen kontrollieren nämlich, ob die im <head>- Abschnitt aufgelisteten Stichwörter auch wirklich im Text der Webseite vorkommen. Handelt es sich aber um eine rein grafische Eingangsseite, verfügt diese unter Umständen über gar keinen Text, weil dieser das Design stören würde. In solchen Fällen kann man sich damit behelfen, dass man am Ende der Webseite einen passenden Text, in dem die betreffenden Stichworte alle verwendet werden, als <p>-Absatz aufsetzt und dieses Absatz dann mittels <p style="visibility: hidden> unsichtbar werden lässt.

Die Eigenschaft visibility wird von älteren Browsern oder auch dem Navigator 4 nicht voll unterstützt. Gliedern Sie den Text also möglichst so in die Eingangsseite ein, dass er nicht zu sehr stört, sollte er doch angezeigt werden.

5.6 Textfluss um Bilder

Kommen wir noch einmal auf die Positionierung von HTML-Elementen zurück. Alte HTML-Hasen kennen noch die traditionelle Ausrichtung von Bildern mit Hilfe des align- Attributs.

CSS sieht für die gleichen Aufgaben die Eigenschaften float und vertical-align vor (die im Übrigen auf beliebige Elemente, vertical-align allerdings nur auf Inline-Elemente, angewendet werden können.

Eigenschaft

Bedeutung

vertical-align

Ausrichtung von Inline-Elementen an der Grundlinie (baseline) der umgebenden Textzeile.

Werte: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <Prozentangabe>

float

Löst ein Element aus dem normalen Fluss der HTML-Elemente und positioniert es an den linken oder rechten Rand.

Werte: left | right | none

Tabelle 5.6: Die Stileigenschaften vertical-align und float

5.7 Zusammenfassung

Heute haben Sie gelernt, wie der Browser die HTML-Elemente einer Webseite zueinander ausrichtet und wie Sie in die Positionierung eingreifen können.

Am interessantesten ist sicherlich die absolute Positionierung (position: absolute; left: 10px; top: 20px), bei der Sie explizit angeben können, an welcher Stelle ein gegebenes HTML-Element angezeigt werden soll. Weniger interessant, aber hin und wieder auch ganz nützlich, sind die relative Positionierung (position: absolute; left: 10px; top: 20px), bei der ein Element nachträglich verschoben wird, und die Positionierung mit den Stileigenschaften vertical-align und float.

Durch absolute (oder relative) Positionierung kann man HTML-Elemente überlagern. Dies ist eine ganz neue Errungenschaft, die mit HTML alleine nicht möglich war. Bei der Überlagerung von Elementen spielt die z-Reihenfolge eine große Rolle. Sie legt fest, in welcher Reihenfolge die Elemente übereinander gestapelt werden. Um selbst den z-Wert eines Elements zu definieren, verwendet man die Stileigenschaft z-index.

Schließlich haben wir uns noch das Clipping von HTML-Elementen angeschaut.

5.8 Fragen und Antworten

Frage:
Wenn position: static die Standardeinstellung ist, wozu sollte ich dann je selbst einem HTML-Element die Stileigenschaft position: static zuweisen?

Antwort:
In den gleichen Fällen, in denen Sie auch andere Voreinstellungen für Stileigenschaften wiederherstellen. Stellen Sie sich vor, Sie wollen abgesehen von einer Ausnahme alle Bilder (<img>-Elemente) einer Webseite absolut positionieren. Statt einem Dutzend oder mehr Bildern einzeln die Stileigenschaft position: absolute zuzuweisen, ist es sinnvoller die Stileigenschaft position: absolute per Stylesheet-Definition (ausnahmslos) allen Bildern zuzuweisen und dann die Positionierung für das eine auszunehmende Bild mit Hilfe einer class- oder ID-Stildefinition auf position: static zurückzusetzen.

Frage:
Ich möchte nicht, dass der Absatz unter einem an den linken Rand verschobenen Bild (float: left) rechts von dem Bild beginnt. Kann ich das verhindern?

Antwort:
Ja, indem Sie dem nachfolgenden Absatz die Stileigenschaft clear: left zuweisen (alternativ clear: right, wenn rechts von dem Absatz keine float-Elemente erscheinen sollen). Der Absatz beginnt dann unter dem Bild.

Frage:
Kann man die Möglichkeiten der CSS-Positionierung nicht auch dazu verwenden, Bilder zu animieren, beispielsweise mit Hilfe eines JavaScripts von links nach rechts wandern zu lassen?

Antwort:
Ja, tatsächlich gibt es viele solcher Animationen. In Kapitel 16 werden wir zeigen, wie das geht.

Frage:
Kann man zum Clipping mit Hilfe der Stileigenschaft clip auch noch andere Clip- Formen als rect verwenden?

Antwort:
Nein, derzeit gibt es nur rechteckige Clipping-Bereiche.

Frage:
Beschreibt die CSS2-Spezifikation noch andere Techniken aus CSS Positioning und Clipping?

Antwort:
Die CSS2-Spezifikation birgt noch viele interessante Möglichkeiten, wie zum Beispiel die Unterstützung verschiedener Medien, alternative Stylesheets für Anzeige und Druckausgabe, Erzeugung hierarchisch nummerierter Listen, fortgeschrittene Tabellenformatierung. Leider werden diese Möglichkeiten aber noch kaum von den Browsern unterstützt werden. Wenn Sie sich für diese Techniken interessieren, laden Sie sich die Spezifikation von der W3C-Website (http://www.w3.org/) herunter.

5.9 Workshop

Der Workshop enthält Quizfragen, die Ihnen helfen sollen, Ihr Wissen zu festigen, und Übungen, die Sie anregen sollen, das eben Gelernte umzusetzen und eigene Erfahrungen zu sammeln. Versuchen Sie, das Quiz und die Übungen zu beantworten und zu verstehen, bevor Sie zur Lektion des nächsten Tages übergehen.

Quiz

  1. Mit welchen Stileigenschaften kann man ein HTML-Element absolut positionieren?
  2. Was ist das Besondere an der relativen Positionierung?
  3. Ist die absolute Positionierung der Positionierung mit Tabellen oder Rändern (margin) grundsätzlich vorzuziehen?
  4. Welche beiden Stileigenschaften dienen als Ersatz für das deprecated align-Attribute für <img>-Bilder?

Übungen

  1. Auf der Buch-CD finden Sie im Unterverzeichnis zu diesem Kapitel zwei GIF-Bilder sonne.gif und erde.gif. Erstellen Sie mit Hilfe dieser beiden Bilder eine pechschwarze Webseite, in der man die Erde sieht, wie sie die Sonne umkreist (d.h. die Erde soll halb vor der Sonne stehen).
  2. Stellen Sie Abbildung 5.8 mit Hilfe der Stileigenschaften float und vertical-align nach. (Hinweis: der Seitenaufbau ist dabei nicht so wichtig, auch nicht welches Bild Sie verwenden. Wichtig ist die Demonstration der verschiedenen Positionierungsbefehle.) Freunde des Navigators 4 sind von dieser Aufgabe befreit.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


1

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH