Informatik :: CSS :: Bereiche
Sie sind bei Verwendung entsprechender Attribute mit CSS in der Lage,
Elemente innerhalb einer Webseite beliebig zu positionieren. Ob unter,
neben oder übereinander, Sie haben wirklich die freie Auswahl.
Um ein oder mehrere Elemente innerhalb einer Seite zu positionieren,
müssen Sie zuerst mit <div> oder <span> einen
Bereich erstellen, der diese Elemente aufnimmt. Innerhalb dieses Bereiches
können nun verschiedene CSS-Formate für alle Elemente gültig
sein.
Beim Arbeiten mit DHTML und JavaScript benötigen
Sie eine Möglichkeit, um auf solche Bereiche zuzugreifen. Um einen
solchen Bereich für einen Zugriff eindeutig identifizieren zu können,
verwenden Sie das Attribut id. Ihm übergeben Sie einen Namen
in Form einer Zeichenkette.
Durch das Attribut position wird die Positionierung eines Bereiches
eingeleitet. Ihm muss einer der in der folgenden Tabelle aufgeführten
Werte übergeben werden.
| Wert | Beschreibung |
|---|---|
| absolute | absolute Position, die beim Scrollen der Seite erhalten bleibt |
| fixed | absolute Position, die beim Scrollen der Seite nicht erhalten bleibt |
| relative | Positionierung relativ zum vorhergehenden Element |
| static | keine bestimmte Positionierung |
Mit den Attributen top, left, right und bottom
und einem numerischen Wert können Sie eine beliebige Position eines
Bereiches festlegen. Der Bereich kann Elemente beliebiger Art enthalten,
also Schrift, Grafiken oder auch Tabellen. Außerdem können Sie
absolute oder relative Angaben verwenden.
Sie können auch mit dem Attribut width die Breite eines
Bereiches festlegen. Wenn der in diesem Bereich enthaltene Text die Breite
überschreitet, dann erfolgt ein automatischer Zeilenumbruch.
Beispiele:
<div id="Ebene1" style="position:absolute; left:200; top:160; font-family:Impact; font-size:5cm; color:red">CSS</div>
<div id="Ebene2" style="position:absolute; left:140; top:110"> <img src="anibird.gif"> </div>
<div id="Ebene3" style="position:absolute; left:80; top:195; font-size:1.5cm; color:blue">Nichts ist unmöglich ...</div>
Das Beispiel hat im Browser folgendes Aussehen.
Aufgabe: