Ein Winkellayout mit float

Präsentation zum Thema: "Ein Winkellayout mit float"—  Präsentation transkript:

1 Ein Winkellayout mit float
CSS Ein Winkellayout mit float Von Anna Fischer

2 Gliederung Das Boxenmodell Floaten Winkellayout
Probleme und Lösungsmöglichkeiten Literaturverzeichnis

3 1. Boxenmodell Webseite besteht aus rechteckigen Kästchen
Kann vielseitig gesetzt und gestapelt werden HTML erstellt die Kästchen CSS gestaltet und positioniert HTML-Elemente bestehen aus drei Teilen: Anfangs-Tag, Inhalt, Ende-Tag HTML-Elemente bilden eine Element-Box Große Bereiche definieren durch Universalattribute wie id (Identität) und class (Klasse) ID nur einmal pro Seite Class mehrfach Container oder Boxen

4 1. Boxenmodell Aufbau einer Box:

5 1. Boxenmodell Inline-Elemente (strong, a, em) passen sich an und werden nur so breit und hoch wie nötig Block-Elemente (h1,h2…) werden so breit wie ihr umgebendes Element z.B. die Webseite, wenn nicht anders definiert HTML-Elemente folgen dem document flow (natürlichem Fluss des Dokuments) Ordnen sich von links oben nach rechts an usw. Positionierung von Elementen durch relative, absolute und fixed Relative: relative Verschiebung zum ursprünglichen Punkt im Flow Absolute: Elemente werden aus dem Fluss genommen, scrollen mit Fixed: bleiben an Position, scrollen nicht mit

6 2. Floaten float bedeutet schwebend Werte left und right
Elemente erheben sich aus dem Flow Schweben so weit wie möglich nach oben Schweben so weit wie möglich nach links oder rechts Umgebende Elemente umfließen das gefloatete Element Das Bild wird von der Schrift umflossen Gefloatete Elemente haben eine Blockbox „Float drop“: gefloatete Box fällt unter die andere, da nicht genügend Platz im Browserfenster ist Ohne Angaben der Breite nutzt Element nur so viel es benötigt

7 3. Winkellayout

8 4. Probleme und Lösungsmöglichkeiten
Gefloatete Elemente (Grafiken) werden nicht von den umgebenden div-Elementen umschlossen, sondern ragen nach unten heraus Umgebendes Element floaten Zuweisung overflow:hidden an umgebendes Element Zuweisung display:table an umgebendes Element Clearfix Methode Boxen gestalten und positionieren, aufgrund von mangelnden CSS-Kenntnissen des Seitenbauers oder des Browsers Abstände annullieren (padding und margin auf 0 setzen), anschließend neu definieren Bsp. *{padding: 0; margin: 0;} Deklarationen funktionieren nicht, wie man es sich vorgestellt hat Browser erstellt Stammbaum des Dokuments (DOM=Document Object Model) Verstehen von Kaskade (Wichtigkeit, Spezifität, Reihenfolge), Vererbung (von Elternelement, nicht alles kann vererbt werden) und Standartwert (in CSS-Spezifikation festgelegt) Kein Gefühl für Einheiten wie px, em und % Zunächst ausprobieren, px wird bei höherer Auflösung kleiner, 100% füllen ein Kästchen aus, em orientiert sich an der Schriftgröße Bilder als Hintergrund verwenden (Bild teilt sich) Background-image: url („bild.jpg“) Background-size: 100% Füllt Box vollkommen aus

9 5. Literaturverzeichnis
AUTOR/-IN der Seite (Jahr): Titel. Pfad (Zugriffsdatum). Mies, Daniel.Webseiten erstellen für Einsteiger.Auflage 2010, Bonn:Galileo Computing Müller, Peter. Einstieg in CSS.Webseiten gestalten mit HTML und CSS.Auflage1, 2014, Bonn:Galileo Computering Jendryschik, Michael, :Artikel, Gedanken und Einführungstexte zu Usability und Webstandarts