in Weblica kann man Websites ganz einfach mit CSS, HTML und Javascript erweitern und individualisieren
Herkules links oben fixiert
Herkules sepiafarben
Tipp:
Prüfen Sie immer mit einem Browser-Zoom, ob Ihr Seitenelement wie gewünscht positioniert ist:
Zoom out:  Ctrl –
Zoom in:    Ctrl +

Notationskonventionen

Code ist in in Lucida Console schwarz oder in Courier schwarz notiert, anpassungs­bedürftige Teile sind farbig.

Die Namen von Weblica- und Ressourcen­feldern beginnen mit dem $-Zeichen. Dieses ist hier so hervorgehoben: $. Beim Ver­wenden von Code müssen die Ressourcenfelder ersetzt werden.

W3C-Konformität

Unser Code ist standardkonform:
XHTML 1.0 transitional ist valide - zur Prüfung bitte klicken

Seite erstellt / geändert

e 16.02.12  /  update

Codeschnipsel 05: Positionierung von Elementen


Gegenstand dieser Codeschnipsel sind CSS und HTML für die Positionierung von Seitenelementen an beliebigen Stellen in der Webseite.

Die Positionierung von Seitenelementen

Einführung in die Aufgabenstellung "Positionierung"

Grundsätzlich braucht sich der Weblicaner um die Position von Seitenelementen nicht zu kümmern.
Nur dann, wenn ein Seitenelement - meistens ein Bild, manchmal auch Textabsätze - ausserhalb des normalen Textflusses angezeigt werden soll, muss eingegriffen und die Position mittels CSS vorgegeben werden.

Wird ein Element ausserhalb des Textflusses positioniert, so stehen mehrere Bezugsgrössen zur Wahl:
  • der Bildschirmrand (oben, unten, links, rechts) - genau genommen: Browserrand
  • der Seitenrand (oben, unten, links, rechts)
  • ein Spaltenrand (in der Regel links)
  • die Seitenmitte
  • ein vorangehendes oder übergeordnetes Element.

Beim Aufruf dieser Seite sieht man vier Seitenelemente (drei Bilder und nach 18 Sekunden eine zweite Textbox), die ausserhalb des normalen Textflusses positioniert sind.
Die möglichen Bezugsgrössen für die horizontale Positionierung dieser vier Seitenelemente werden in der folgenden Abbildung dargestellt (Klick ins Bild vergrössert die Darstellung):

Bildschirmaufbau und Bezugsgrössen für die Positionierung von Seitenelementen

Die Bezugsgrössen für die vertikale Positionierung sind analog.

Vor der Festlegung der Position eines Seitenelements müssen die folgenden drei Fragen beantwortet werden:

  • Was ist die Bezugsgrösse für die Positionsangabe: 
    • der Bildschirm- bzw. Browserrand
    • der Seitenrand
    • das Zentrum des Bildschirms bzw. der Seite (die Mitte?)
    • ein anderes Element auf meiner Seite?
  • Soll das Seitenelement beim Zoomen (Browser-Zoom)
    • an der gleichen Position stehen bleiben oder 
    • mit dem Seitenrahmen mitwandern? Diese Frage ist besonders bei zentrierten Layouts wichtig.
  • Soll das Seitenelement beim Scrollen
    • immer an der gleichen Position auf dem Bildschirm stehen bleiben (fixed) oder 
    • mit dem Seiteninhalt rollen (scoll, Defaulteinstellung)?

Die Ergebnisse verschiedener Test sind in der Testrubrik Positioniertests dokumentiert.

Im Folgenden werden
  • die Element-Eigenschaften, die die Position eines Seitenelements bestimmen,
  • die vier Positionsarten,
  • die vier Offsets (Abstandsarten oder Versatzarten),
  • das Vorgehen bei der Positionierung eines Seitenelements,
  • verschiedene Beispiele und die zugehörigen Codeschnipsel
beschrieben.


zurück   |   nach oben


Eigenschaften, die die Position eines Seitenelements bestimmen

Die folgenden Eigenschaften eines Seitenelements bestimmen die Anzeige und die Position des Elements:

Eigenschaft ("property")
Funktion
display
Art der Anzeige des Elements bzw. Unterdrückung der Anzeige eines Elements
position Art der Positionierung
Offset:
top, left, right, bottom
Versatz oder Abstand des Seitenelements in Bezug zum Viewport oder übergeordneten Seitenelement
float Umfluss folgender Seitenelemente um ein Element
clear Beenden der Umfluss-Eigenschaft
z-index Schichtung von übereinanderliegenden oder überlappenden Elementen
clip Anzeige nur eines Ausschnitts eines Seitenelements

"Viewport" = Darstellungsbereich, das ist der auf dem Bildschirm sichtbare Anzeigebereich des Browsers. Dieser Bereich ist durch den oberen und unteren sowie den linken und rechten Browserrand begrenzt, vgl. Abbildung oben.

Für unsere Aufgabenstellung genügen in der Praxis in der Regel die beiden Eigenschaften
  • position und 
  • Offset top, left, right, bottom.

Die clip-Eigenschaft ist in Ausschnitt eines Bildes anzeigen dokumentiert
z-index-Eigenschaft wird in verschiedenen anderen Code-Schnipseln angewandt.


zurück   |   nach oben

Festlegen der Art der Positionierung

Für die Positionierung stehen vier Positionsarten zur Verfügung:

Wert der Positionsart position
Funktion
static
normaler Elementfluss, Standardeinstellung;
die Offset-Eigenschaften gelten hier nicht
relative die relative Position wird vom sogenannten "normalen Fluss" der Seitenelemente bestimmt
absolute die absolute Position wird durch die Position des übergeordneten Elements bestimmt, sie wird durch den Offset top, left, right, bottom (Versatz zum übergeordneten Element) festgelegt;
das Seitenelement wandert beim Scrollen mit
fixed die fixe Position ist gleich wie absolute, aber das Seitenelement bleibt beim Scrollen stehen

Für unsere Zwecke sind die beiden Positionsarten absolute und fixed am besten geeignet. In seltenen Fällen kommt auch relative zum Einsatz.


zurück   |   nach oben

Festlegen des Versatzes (Offset) des Seitenelements

Mit den vier Offset-Angaben top, left, right, bottom wird die Position des oberen, linken, rechten und unteren Randes eines Seitenelements vorgegeben. Drei Arten von Wertangaben sind zulässig:

Offset:
top, left, right, bottom
Wert
Distanz als numerischer Wert
zusammen mit der Masseinheit, meistens in Pixel; auch negative Werte sind zulässig
Prozentangabe Prozent der Breite (für  left / right) bzw. der Höhe (für  top / bottom) des dem Element übergeordneten Elements, auch negative Werte sind zulässig;
der Wert 50% positioniert in der Mitte des übergeordneten Elements
auto "automatische" Positionierung - das liest man besser bei W3C nach

Der Versatz wird in der Regel paarweise angegeben:
top oder bottom  und  left oder right.


zurück   |   nach oben

Festlegen der Position eines Seitenelements

Die Positionierung von Elementen mit Bezug zum Bildschirmrand ist nun einfach:
  • Mit den Positionsarten absolut oder fixed wird das Verhalten des Elements beim Scrollen festgelegt,
  • mit den Offsets top oder bottom und left oder right wird das Element mit der gewünschten Distanz und Masseinheit vom Bildschirmrand platziert.

Diese Art der Positionierung hat einen Nachteil: beim Browserzoom wandern die Elemente nicht mit dem Seiteninhalt mit. Beim Zoom-out kleben Elemente, die sich vorher scheinbar links vom Seitenrand befunden haben, am linken Browserrand. In unzähligen Websites kann man beim Zoom-out diesen Fehler sehen.

Das Problem kann durch den Ersatz des Bezugs zum Bildschirmrand durch den Bezug auf den Seitenrand gelöst werden. Für den Bezug zum Seitenrand ist aber der Speicherort des Codeschnipsels im Quellcode massgebend. Wer die Seite Positioniertests bereits gelesen hat, hat gesehen, dass in zentrierten Layouts die Positionierung mit horizontalem Bezug zum Seiteninhalt einer Erweiterung bedarf: der "Vorpositionierung" auf die Seiten- bzw. Browser-Mitte.

Der Bezug zum Seiteninhalt in der Horizontalen ist mit der Erweiterung einfach möglich:
  • zuerst wird mit left:50%; oder right:50%; mittig positioniert,
  • anschliessend wird mit der Korrektur des Aussenabstands margin-left oder margin-right das Seitenelement an die gewünschte Position verschoben.

Mehr zu Aussenabständen in Abstände innen und aussen: padding und margin.

Alle übrigen Varianten von Positionswünschen lassen sich aus diesen beiden Grundvarianten ableiten.


zurück   |   nach oben

Die Eigenschaft 'display'

Die display-Eigenschaft legt die Anzeigeart eines Elements fest.
Die Bedeutung und Wirkung der Werte wird demnächst hier dokumentiert.

Zum Wert inline-block finden sich sehr lesenswerte Tipps bei Alsacréations. Mit inline-block lasssen sich Absätze (paragraphs) floaten.
Quelle: W3C CSS 2.1 display


zurück   |   nach oben

Beispiele für die Positionierung

Quellen zur Positionierung

Die Positionierung von Seitenelementen ist, wie gesehen, ein ziemlich leidiges Thema. Es empfiehlt sich immer, die Quellen zu Rate zu ziehen:

W3C - Positioning - Visual formatting model
W3C - Visual formatting model details
W3C - Colors and Backgrounds
SELFHTML - Positionierung und Anzeige von Elementen
SELFHTML - mittig zentrierte Inhalte


zurück   |   nach oben


 

einzelne Bilder an beliebiger Position

In den nächsten Abschnitten wird die Positionierung von Bildern anhand einiger Beispiel demonstriert. Die Codebeispiele lassen sich auch auf Textabsätze oder beliebige HTML-Objekte übertragen.

Vorgängig sind zusätzlich folgende Fragen zu klären:
  • Soll das Bild nur auf einer bestimmten Seite oder auf allen Seiten angezeigt werden?
  • Wo füge ich den HTML-Code ein: in einem HTML-Absatz, in Seitenkopf (in den Seiteneigenschaften) oder im CSS?


zurück   |   nach oben

einzelnes Hintergrundbild, am linken Bildschirmrand fixiert

Der Herkules Farnese auf dieser Seite links oben wird mit folgendem HTML-Code in den Seiteneigenschaften oder in einem HTML-Absatz eingefügt:

<style type="text/css">
/* fixiertes Hintergrundbild links */
body {
  background-image:      url($(res.235.Herkules_Farnese_png.path));
  background-position:   0px 60px;
  background-repeat:     no-repeat;
  background-attachment: fixed;  }
</style>


Pfad anpassen
0px 60px: Position links (0px vom linken Bildschirmrand), 60 Px von oben (experimentieren wg. Seitenkopfhöhe)
no-repeat: Einzelbildanzeige ohne Bildwiederholung
fixed: Bild bleibt beim Scrollen stehen

Demonstration: auf dieser Seite

Zu beachten:
  • Das Bild ist links positioniert und bleibt beim Zoomen links stehen.
  • Soll das Bild beim Zoomen "mitwandern", so ist fixed durch absolute zu ersetzen.
  • Dieses Bild wurde in Tat und Wahrheit nicht als Hintergrundbild background-image eingebaut, sondern genau gleich, wie die folgenden Herkules-Bilder. Grund: eine Seite kann nur ein Hintergrundbild haben - und das ist der Farbverlauf für den Seitenhintergrund.

Mehr zu Hintergrundbildern (Wallpaper) und Hintergrundfarben bei SelfHTML:
Hintergrundbild einbinden
Hintergrundfarben und -bilder


zurück   |   nach oben


Variante: am linken Bildschirmrand fixiertes Bild

Der zweite, sepiafarbene Herkules Farnese am linken Bildschirmrand wird mit folgendem Code in einem HTML-Absatz eingefügt:

<div style="position:fixed; left:0px; top:50%; ">
<img src="$(res.426.Herkules_Farnese_Sepia_png.path)"
alt="Herkules sepiafarben" title="Herkules sepiafarben"
width="140" height="300" border="0"  />
</div>


Pfad anpassen
left 0px: Position 0px vom linken Bildschirmrand
top:50%: der obere Rand des Bildes ist auf der Seitenmitte (vertikal) positioniert
no-repeat: Einzelbildanzeige ohne Bildwiederholung
fixed: Bild bleibt beim Scrollen stehen

Hinweise zur vertikalen mittigen Positionierung:
  • Zu beachten: der obere Rand des Herkulesbildes ist auf der Seitenmitte positioniert. Das Bild ist grösser als der Inhalt - es ist 300 Pixel hoch, um den Herkules herum ist also "viel Luft". Wollte man das Bild zentriert positionieren, so müsste man es mit margin-top:-150px; um 150 Pixel (= halbe Höhe des Bildes) nach oben verschieben.
  • Wegen der vertikalen Positionierung mit 50 Prozent ist der Abstand des Bildes vom oberen Bildschirmrand von der Höhe des Bildschirms abhängig. Auf meinem 1'200 Pixel hohen Bildschirm erscheint das Bild in der unteren Seitenhälfte und hat etwa 250 Pixel Abstand zum unteren Browserrand. Bei Bildschirmhöhen kleiner 700 Pixel schiebt sich der untere Herkules über den oberen. Empfehlung: Anzeige des Browserfensters verkleinern und Darstellung mit verschiedenen Varianten testen.


zurück   |   nach oben

einzelnes Hintergrundbild, am linken Seitenrand fixiert

Ziel dieser Variante ist es, z. B. ein Logo links neben dem Seiteninhalt fix zu positionieren. Beim Browser-Zoomen soll das Hintergrundbild mit dem Seitenrahmen horizontal wandern und nicht, wie in der Variante oben, am linken Bildrand stehen bleiben.

Hier bediene ich mich eines Tricks: ich erstelle ein leeres transparentes Bild, dessen Breite = Seitenbreite + 2 x Logobreite + 2 x Zwischenraum ist.
Das Logo wird nun am linken Rand dieses leeren Bildes eingefügt. Das kombinierte Bild wird als Background-Image ins CSS aufgenommen (da es auf allen Seiten angezeigt werden soll).

HTML-Code im globalen CSS:

/* fixiertes Hintergrundbild mit Logo links und Hintergrundfarbe */
body {
  background-color:       #B0C4DE;
  background-image:       url($(res.10.backGroundLogo_png.path));
  background-position:    center 132px;
  background-repeat:      no-repeat;
  background-attachment:  fixed;  }


Pfad anpassen
center: zentriert das Hintergrundbild
132 px: Abstand von oben
fixed: Bild bleibt beim Scrollen stehen

Demonstration: Habegger-Immobilien
Browser-Zoom (Verkleinern der Darstellung) zeigt den Effekt.

Variante:
Die Positionierung eines Logos (oder eines anderen Seitenelements) links neben dem Seiteninhalt kann natürlich auch ohne den obigen Trick als einzelnes Bild erfolgen.

Code:
<div style="position:fixed; top:172px; right:50%; margin-right:516px;">
<a href="#top"><img src="$(res.18.MietpunktB8F2S_jpg.path)" alt="miet-punkt.ch - nach oben" title="miet-punkt.ch - nach oben" border="0" width="100" height="100" /></a>
</div>


Demonstration: miet-punkt.ch (ebenfalls eine Website der Habegger-Immobilien)


zurück   |   nach oben


einzelnes Hintergrundbild, rechts, absolute, scrollt mit

Am rechten Rand dieser Seite (nicht: am rechten Bildschirmrand) wird ein graublauer Herkules eingefügt:

<div style="position:absolute; top:500px; left:50%; margin-left:460px; ">
<img src="$(res.348.Herkules_Farnese_gespiegelt_1_png.path)"
alt="Herkules 1 fährt Lift" title="Herkules 1 fährt Lift"
width="140" height="300" border="0"/>
</div>


Pfad anpassen

Zur Positionsangabe: die Positionsangabe ist absolut, das Bild ist deshalb 500 Px vom oberen Rand und 460 Px rechts von der Bildschirmmitte (left:50%) platziert.
Für die Platzierung links positioniert man einfach mit right:50% und margin-right:nnnpx.

Demonstration: auf dieser Seite, rechte Spalte. Um das Bild zu sehen, muss man nach oben rollen.


zurück   |   nach oben


Herkules 1 fährt Lift

einzelnes Hintergrundbild, rechts, relative, scrollt mit

Und nun wird rechts vom Seitenrand ein zweiter, weiss-grauer Herkules eingefügt:

<div style="position:relative; top:-40px; margin-left:666px; height:20px; overflow:visible;  ">
<img src="$(res.347.Herkules_Farnese_gespiegelt_2_png.path)"
alt="Herkules 2 fährt Lift" title="Herkules 2 fährt Lift"
width="140" height="300" border="0" />
</div>


Pfad anpassen

Zur Positionsangabe: die Positionsangabe ist relativ: das Bild ist -40 Pixel unterhalb des vorangehenden Elements - das ist dieser Textabsatz - und 666 Px rechts vom linken Rand der mittleren Spalte platziert.

height:20px; overflow:visible; bewirkt, dass der nachfolgende HTML-Absatz in der Höhe auf 20 Px begrenzt wird und das Bild dennoch in voller Grösse (overflow:visible) angezeigt wird

Demonstration: auf dieser Seite, rechts neben der mittleren Spalte.
Auf diese Zeile folgt der HTML-Absatz mit dem Code fürs Bild:
Herkules 2 fährt Lift
Der scheinbar leere, 20 Pixel hohe Platz vor dieser Zeile wird vom 20 Pixel hohen Div mit dem nach rechts verschobenen Bild belegt.


zurück   |   nach oben

einzelnes Bild genau in der Mitte der Seite

Positionierung eines einzelnen Bildes in der Bildschirmmmitte (ohne Scrollen, soll das Bild immer in der Bildschirmmitte stehen, position:fixed verwenden):

<div style="position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-45px;">
<img src="$(res.388.Duerer_Hase_png.path)" width="90" height="100" style="border:1px solid #ADADAD;" title="Feldhase von Albrecht Dürer 1502" alt="Feldhase von Albrecht Dürer 1502" />
</div>


Beispiel: Einzelnes Bild mittig positionieren


zurück   |   nach oben

Sprach-Button absolut in Breadcrumb-Zeile - beste Variante

Als krönenden Abschluss dieser Codeschnipsel zu Positionierung von Bildern und Grafiken nun noch eine weitere Variante zur Postionierung eines Sprachbuttons in der Breadcrumb-Zeile rechts aussen.
Der Vorteil dieser Variante ist, dass die Positionsangaben absolut und völlig unabhängig vom Ort des HTML-Codes (Head, HTML-Absatz) sind:

<div style="position:absolute; top:99px; left:50%; margin-left:415px;" >
<a href="http://www.babox.ch/weblica/codeschnipsel/index.html" target="_self">
<img border="0" src="$(res.236.FR14_gif.path)"
alt="pas de version française - saut à l'accueil" title="pas de version française - saut à l'accueil"
width="20" height="14" /></a>
</div>


Demonstration: auf dieser Seite oben rechts, mit Link auf die Startseite der Codeschnipsel
Der HTML-Code steht im nächsten Absatz nach diesem Textabsatz.

Bewertung: diese Variante der Positionierung von Sprachbuttons ist die beste. Ihr fehlt nur noch die Definiton einer Klasse für Sprachbuttons im globalen CSS, wie hier: Sprach-Button in Breadcrumb-Zeile dokumentiert.


zurück   |   nach oben


pas de version française - saut à l'accueil

Exkurs: Nebenaspekte dieser Seite

Diese Seite hat drei interessante Nebenaspekte:

1. Hintergrundbild
Wie oben bereits gesagt, wird der erste Herkules (oben links) nicht als background-image, sondern als "normales Bild" mit fixer Positionierung eingebaut. Man sieht es dem Bild nicht an.

2. Schichtung von Seitenelementen
Bitte beachten und ausprobieren: die Herkulesse rechts vom Seitenrand liegen über der ersten (oberen) Infobox rechts und unter der zweiten (unteren) Infobox. Grund: der zweiten Infobox ist die Klasse .infoBoxFiFo zugewiesen, und diese Klasse hat die Eigenschaft z-index: 1;.

3. Suchmaschinenindexierung
Die Bilder rechts vom Seitenrand haben eine einzigartige Beschreibung im alt-Tag: ein Held aus der griechischen Antike benutzt ein modernes Beförderungsmittel.
Sucht man die ersten drei Wörter der alt-Tags in G's Bildersuche, so wird man fündig. G indexiert jeden Mist. Bei Bing dagegen wird man nicht fündig - was auch richtig ist.
Die gleiche Beobachtung kann man für den alt-Tag des Sprach-Buttons machen. Die vollständige Beschreibung im alt-Tag ist einzigartig, und man wird sowohl bei G als auch bei Bing in der "normalen" Websuche sofort fündig. Damit kann man leben.


zurück   |   nach oben

 

Textabsätze an beliebiger Position

Infoboxen rechts von Seitenrand

Die Infoboxen am rechten Rand der Codeschnipsel-Seiten werden mit folgendem Code in den Seiteneigenschaften der Codeschnipsel-Hauptseite (mit Vererbung auf die untergeordneten Seiten) eingefügt:

<style type="text/css">
/* Infobox Codeschnipsel =========================== */
.infoBoxCs {
  background-color: ...; padding: ...; ... usw.
  position:fixed; top: 150px; left:50%; margin-left:445px;  }
/* Infobox fade in fade out ========================= */
.infoBoxFiFo {
  display: block; background-color: ...; ... usw.
  position:fixed; top: 350px; margin-left: 880px; z-index:1;  }
</style>


infoBoxCs ist 445 Pixel rechts von der Bildschirm- bzw. Seitenmitte platziert, infoBoxFiFo 880 Pixel rechts vom linken Seitenrand (Varianten nur zu Demonstrationszwecken). Beide Infoboxen werden in der Vertikalen mit Bezug zum oberen Browserrand positioniert.

Mit z-index:1; wird sichergestellt, dass bei überlangen Texten in infoBoxCs der Text in infoBoxFiFo über dem infoBoxCS-Text angezeigt wird.

Das Javascript für das Ein- und Ausblenden der Infoboxen findet sich in Absatz ein- und ausblenden - fade in / fade out.


zurück   |   nach oben

Textabsatz in linker Spalte überlagert das Kopfbild teilweise

Auf der Seite verschiedene Farben wird der erste Absatz in der linken Spalte zur Hälfte über das Kopfbild geschoben.

Der Code dafür lautet:

<style type="text/css">
#pa4353      /* zurück ... */
 {  background-color: ...;  border: ...;
    height: 60px;
    margin-left: 32px;
    padding: 20px 24px 10px 20px;
    position: absolute;
    top: 150px;
    width: 90px; }
</style>


Der "zurück zur Hauptseite ..."-Absatz wird absolut mit einem Abstand von 150 Pixeln vom oberen Rand positioniert, mit einem linken Aussenabstand von 32 Pixeln nach rechts verschoben und mit erweiterten Innenabständen versehen. Wegen der erweiterten Abstände und damit er schön auffällt wird seine Breite auf 90 Pixel begrenzt.


zurück   |   nach oben

Pager-Navigation linksbündig anordnen

Es gibt schon mal Situationen, in denen man die Pager-Navigation im Cycler linksbündig anordnen möchte. Warum auch immer ...

<style type="text/css">
.cyclerNav { text-align: left; }
</style>


Mit margin-top kann man auch den Abstand oben verändern ...
Beispiel: gibt's hier mal keines, es funktioniert, probiert's aus.


zurück   |   nach oben