HTML und CSS

Plan erstellen

Weitere Differenzierung

Varianten

Inhaltliche Klärung

Mögliche Erweiterungen

Abstände und Farben

HTML-Gerüst anlegen

Das Wurzelelement html hat zwei Kindelemente: head und body. Alle sind in öffnende und schließende Tags gepackt.

Drei Grundelemente

Detailliertere Darstellung

Navigationen

id- und class-Attribute

Schreibweisen

Verwende möglichst sprechende Namen!

Grundstruktur einer CSS-Datei

Seitenbreite

Seitenbreite ausmessen

Grafik einbinden

Grafik verlinken

Breite und Höhe

Diese Angaben sind optional, werde sie nicht gemacht, wird die Grafik in ihrer Originalgröße dargestellt.

Grafikformate

Komprimierung

Block-Elemente

Im Gegensatz dazu reichen Inline-Elemente so lange die Zeile reicht.

Margin und Padding

Farbbeispiel

Darstellung

Margin

Darstellung

float

Darstellung

Darstellung

Positionierung

Alles fließt

Darstellung

float-Problem

clear

clear-div

Umschließende Elemente verlieren ihre Höhe durch darin gefloatete Elemente. Um die Höhe wieder herzustellen, verwendet man ein clear-div, dieses löst das float-Verhalten nicht hinter, sondern innerhalb des betroffenen Blocks auf. Realisiert wird das über zwei Bestandteile:Den einen Teil repräsentiert ein div im HTML-Code, das mit einem Klassennamen, wie zum Beispiel float-ende versehen wird. Das <div class=„float-ende“></div> muss vor dem schließenden Tag des <div id=„kopf-oben“> stehen.Der andere Teil ist die CSS-Regel, über welche die float auflösende clear-Eigenschaft definiert wird. Das div mit der class=„float-ende“ löst das Fließverhalten noch innerhalb des div=„kopf-oben“ auf und sorgt dafür, dass die Höhe wieder eingenommen wird.

clear-div

clearfixFloat auflösen mit clearfix: http://h5c3.de/link-5-1