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
clearfix Float auflösen mit clearfix: http://h5c3.de/link-5-1