INFO + FRAGE + ANTWORT
Ausgewählt: INFO Nr. 335
zum Thema
MULTIMEDIA WEBDESIGN HTML CSS
Stichwörter: CSS, Positionierung
Inhalt: cadat info CSS - Positionierung
Mit Hilfe von CSS-Anweisungen können Elemente wie Bilder oder Ebenen in einem Browserfenster positioniert werden. Dabei werden die Attribute "id" für ID-Selektoren oder "style" für unmittelbare Anweisungen direkt im Beginn-Tag verwendet.
Für die Eigenschaft "position" sind folgende Möglichkeiten von praktischer Bedeutung:
[1] position:absolute --> die Lage des Elements ist fixiert durch Abstände zum Fensterrand, das Objekt wird jedoch beim Scrollen mitbewegt.
[2] position:relative --> die Lage des Elements wird durch die Abstände zum übergeordneten Element bestimmt.
[3] position:fixed --> die Lage des Elements ist fixiert durch Abstände zum Fensterrand, das Objekt wird jedoch beim Scrollen nicht mitbewegt. Nicht alle Browser-Versionen verstehen diese CSS-Anweisung.
Die Abstände werden durch folgende Eigenschaften festgelegt:
[1] top: Abstand von oben;
[2] left: Abstand von links
[3] bottom: Abstand von unten;
[4] right: Abstand von rechts;
Die Abstände können in Pixel (px) oder als Prozentzahlen (%) angegeben werden.
Beispiel:
Im Beginn-Tag mit "style":
<div style="position:absolute; left:20px; top:30px; width:120px; height:60px;">;
das gleiche Beispiel mit ID-Selektor (wird als "Ebene" bezeichnet):
<div id="layer1">;

In der CSS-Anweisung:
#layer1 {
position:absolute;
left:20px;
top:30px;
width:120px;
height:60px;
}

d.h. das DIV-Element (Ebene "layer1") mit einer Breite von 200 Pixel und einer Höhe von 100 Pixel wird 200 Pixel und 50 Pixel vom oberen Fensterrand fix positioniert.
??? FRAGE Nr. 181
zum Thema
MULTIMEDIA WEBDESIGN HTML CSS
Frage: Auf welche Arten können Ebenen in einer HTML-Datei positioniert werden?
  Welche Antwort / Antworten ist / sind richtig? (Mindestens 1 Antwort ist, maximal 6 Antworten sind richtig)
  absolut: Lage fix, wird beim Scrollen mit bewegt
  relativ: Lage abhängig von übergeordnetem Element
  dynamic: Lage abhängig von der Zeigerposition
  elementary: elementare (ursprüngliche) Ausgangsposition
  undefined: undefinierte Position (im Browser unsichtbar)
  fixed: Lage fix, wird beim Scrollen nicht mit bewegt
  max. 3 Punkte