Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Layout flexibel gestalten

Testen Sie unsere 2014 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der nachfolgende Schritt besteht darin, den zweispaltigen Inhaltsbereich flexibel zu gestalten. Dazu verwendet der Trainer ein Border-Box-Modell und passt die Einheiten entsprechend an.

Transkript

Die Beispielseiten haben einen zweispaltigen Inhaltsbereich hier mit main links gefloatet und aside rechts gefloatet, auf ein-drei Seiten und unterhalb von 768 Pixeln hier wird das Ganze einspaltig. So, das funktioniert schon relativ gut, aber jetzt soll das Ganze noch etwas flexibilisiert werden. Dazu gehe ich rüber in die Desktop.css, denn flexibilisiert werden soll das nur an Desktop, gebe dem Wrapper eine Breite von 80%, das ist Pi mal Daumen und ausprobieren und gucken. Das ist nicht mathematisch begründet, dann gebe ich mal 70em in Schriftgrößeneinheiten, das entspricht etwa 980 Pixel bei einer Schriftgröße von 14 Pixel, 70x14 und eine min-width von, nehmen wir mal 720, das was oben vorher die normale Breite war. So, das ist jetzt im Browser hier einmal neu laden das wird ziemlich auseinander gerissen, weil die beiden Bereiche main und aside noch nicht flexibel sind. Hier sieht das ähnlich aus und das folgt jetzt im nächsten Schritt, so, da haben den main Bereich und das sehen wir schon, wenn ich jetzt die Einheit Prozent benutzte für die Breite, dann werden hier Pixel und Prozent gemischt und spätestens dann sollt man das Box-Modell wechseln, damit das noch berechenbar bleibt, denn jetzt mit der Border-Box werden die 20 Pixel von den 75% abgezogen. Ähnlich hier. Ich nehme für den Infobereich, für das aside die verbleibenden 25% und stellen diese Bereich ebenfalls mit Boxsizing auf die Border-Box. So, die Einfärbung stimmt überall, das ist immer ein Indiz, dass nirgendwo etwas vergessen wurde. 25%. Und jetzt einmal wieder im Browser und Sie sehen, das passt schon einigermaßen, hier könnte man noch nachbessern, denn ist gar nicht genug Inhalt. Dafür, wenn ich jetzt das Browserfenster verkleinere, so, dann sieht man schon, das passt schon ein bisschen besser, wenn das Browserfenster nicht ganz so breit wär, man könnte also die max-width zum Beispiel noch runtenziehen. So, jetzt nehme ich hier den Wrapper und sehe, der bleibt bei 720 Pixel, kleiner wird der nicht. 720, er wird erst kleiner, wenn es hier einspaltig wird. Wenn die sidebar runterrutscht, dann wird der auch weniger als 720, aber in der Desktopversion bleibt der so und viel breiter als so sollte es eigentlich gar nicht werden mit zu wenig Inhalt, also, man könnte die max-width durchaus runtersetzen auf weniger als 70em, das ist einfach ein bisschen trial and error. So, feintuning noch ein bisschen, die Überschriften könnte man hier noch ausrichten, das wird gemacht in der Bildschirm CSS, da sehen Sie das der Überschrift in der aside Seitenspalte line-height eins hat und die Überschrift in main hat das nicht, das ist eine h2. So, also geben wir der auch line-height 1 und schon werden die oben genau ausgerichtet. So, und schon passt das hier besser mit dem main, so, jetzt sieht man das, dann ist der obere Punkt von Startseite genau gleich mit der Linie. So, basteln kann man noch vieles weiter, aber die Techniken dazu haben Sie jetzt kennengelernt zur Flexibilisierung werden hier in der Desktopversion einfach Prozent-Angaben genommen mit entsprechenden Begrenzungen. Ich geh diesmal runter auf 60em und schaue mir das hier noch einmal an, nachdem ich eben schon erwähnt hatte. So das reicht, wenn es später mehr Inhalt geben sollte, kann man das natürlich wieder entsprechend anpassen. Hier könnt man das Formular noch flexibilisieren aber für den Anfang reicht das für ein mehrspaltiges Layout, was jetzt noch anliegt, ist ein Bäumchen wechsle dich, nämlich, dass man für main und aside die Reihenfolge ändert und dazu reicht es, wenn man für main hier das Float auf rechts setzt. float: right, so, und Sie sehen, hier ist jetzt der Bereich links, obwohl ich hier gar nichts geändert hatte und der Inhaltsbereich steht rechts. Das hängt mit der Art und Weise des Floatens zusammen. Im Quelltext kommt main hier zuerst, der floatet ganz links nach oben und geht dann rüber, aside kommt hinterher floatet auch nach ganz links und dann rüber, so reicht es also wenn beide nach rechs floaten das main rechts von der Seitenspalte steht. Also, nur ein einziges Wort geändert und das Layout ist komplett anders. Das ist floaten in Aktion beim Layouten und wir lassen das jetzt hier einmal auf links, soweit reicht das fürs erste.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!