Layout

Positionierung von Elementen

position: Positionierung eines Elements

static : normaler Fluss
relative : Position relativ zur Umgebung
absolute : absolute Position
fixed : Feste Position

Angabe der Position

top : Abstand von oben
left : Abstand von links
right : Abstand von rechts
bottom : Abstand von unten

static: normaler Fluss, der sich aus dem Umbruch ergibt

Standardeinstellung
Abstandsangaben (top, bottom, left, right) werden ignoriert

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

position: static;

relative: relative Lage zum normalen Fluss

verändert Position relativ zur Lage, die sich aus normalem Fluss ergibt
ursprünglicher Platz für den Container bleibt erhalten

position: relative;
top: 60px;
left: 60px;

absolute: gibt eine absolute Position an

Position bezieht sich

auf den Rand des umgebenden Elements, wenn dieses selber positioniert wurde (relative, absolute oder fixed) oder
andernfalls auf das Browserfenster

ursprünglicher Platz wird freigegeben

position: absolute;
top: 60px;
left: 60px;

fixed: gibt eine absolute Position an

Position bezieht sich immer auf das Browserfenster
Element bleibt auch beim Scrollen stehen
ursprünglicher Platz wird freigegeben

Beispiel: Positionierung von Elementen

position: absolute; /* absolute | relative | static | fixed */
top: 60px; left: 60px;
background-color: black; color: white;
width: 160px;
height: 80px;

#box_1 { position: static; width: 150px; height: 100px }
#box_2 { position: static; width: 150px; height: 100px }
#box_3 { position: static; width: 150px; height: 100px }

Positionierung auf der Z-Achse

z-index: legt Reihenfolge bei Überlappung fest

wird als Ganzzahl angegeben
je größer die Zahl, desto weiter vorne das Element
relevant vor allem bei Positionierung per absolute und fixed

z-index: 1;

z-index: 2;

z-index: 3;

Zentrieren eines Elements

.container  { background-color: #C0C0C0; width: 100%;}
.content    {
    border: 3px solid blue;
    width: 30%;
    margin: auto;
    text-align: center;
}

<div class="container">
  <div class="content">
     Dies soll zentriert werden.
  </div>
</div>

Layout mit Floats

float: Block aus dem normalen Fluss herausnehmen

left: links positionieren
right: rechts positionieren
none: im normalen Textfluss einbetten (Standard)

float: left;
width: 160px;

float: right;
width: 160px;

float: none;
width: 160px;

clear: legt Positionierung nach Floats fest

left: unterhalb des letzten links ausgerückten Blocks
right: unterhalb des letzten rechts ausgerückten Blocks
both: unterhalb des letzten ausgerückten Blocks

Beispiel: Layout mit Floats

clear: both; /* left | right | both */

Dreispaltiges Layout mit Floats

Kopfzeile:Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

float: left; width: 15%;

float: right; width: 15%;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

clear: both;: Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Beispiel: Dreispaltiges Layout mit Floats

<div style="background-color: black; color:white;">
  <b>Kopfzeile</b>: ...
</div>

<div style="float: left; width: 15%; background-color: lightgrey;">
  <b>float: left; width: 15%;</b> ...
</div>

<div style="float: right; width: 15%; background-color: lightgrey;">
  <b>float: right; width: 15%;</b> ...
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...</p>
</div>

<div style="clear: both; background-color: black; color: white;">
  <b>clear: both;</b>: ...
</div>

Tipps für Barrierefreiheit

keine Tabellen als Layoutmanager einsetzen
Verwendung relativer Maßeinheiten damit die Browsereinstellungen berücksichtigt werden
keine Animationen oder Popups
Navigierbarkeit über „versteckte“ Menüs

direktes Anspringen und Selektieren von Hauptinhalt, Navigationsleiste, Header etc.
für den normalen Leser nicht sichtbar, aber vom Screenreader lesbar
über eine separate CSS-Datei für den Screenreader