Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Probleme bei flexiblen Layouts

Testen Sie unsere 1893 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das klassische Box-Modell von CSS eignet sich nur bedingt für den Einsatz von flexiblen Layouts. Dabei verursacht die Verwendung von unterschiedlichen Einheiten Probleme bei der Darstellung.

Transkript

Mehrspaltige Layouts mit flexibler Breite sind also gar nicht so kompliziert, zumindest solange eine Spalte noch in Pixeln angegeben wird. Die Gesamtbreite ist flexibel, aber die Navigationsspalte bleibt in Pixeln. Wenn man das jetzt auch noch flexibilisieren möchte und die Navigationsspalte in Prozent angibt, dann kommen neue Probleme dazu, denn das klassische Box-Modell in CSS. Das ist nicht für die Arbeit mit verschiedenen Einheiten ausgerichtet. Also, wenn ich jetzt zum Beispiel hier 20% sagen möchte, aber ein Padding von 20px behalten möchte, dann wird es schwierig, denn dann kann man die Gesamtbreite hier nicht mehr berechnen, um dem Inhaltsbereich hier links den Margin geben zu können. Dann kann man nicht sagen, wie breit muss der Margin sein, denn 20%+20px, das kann man nicht zuverlässig berechnen. Um das etwas praktischer zu zeigen, wechsle ich jetzt hier in den Editor, zeige noch kurz im Browser die Ausgangsposition hier, also noch hat die Navigationsspalte hier eine feste Breite, Untersuchen und Sie sehen hier die Navispalte mit 110 und 20px, das wird sich jetzt ändern hier im Editor. Ich bin in navi-float-vertikal.css und möchte zum einen hier die 110 Pixelbreite überschreiben, mit width, da haben wir es, width: 20%. Jetzt haben wir genau den Fall, dazu kommen ja noch hier 20px padding-left. Und der Inhaltsbereich, da passt dann ja auch der margin-left nicht mehr, um da Platz zu schaffen für die Spalte, aber ich schreibe hier jetzt erstmal genau wie oben die 20% hin. Also, width:20% für den Navibereich, der margin-left auf 20% und fraglich ist, was passiert mit diesen 20px padding-left hier. Rüber in den Browser, neu laden und Sie sehen, aha, da ist was passiert, also, ich rufe das mal eben auf hier, Navibereich 20% und Sie sehen, der ist dort zu sehen und der Inhaltsbereich, der steht hier und zeigt auch 20%. Das sieht gar nicht so schlecht aus, aber jetzt gebe ich mal den beiden Bereichen, vorübergehend zum Debugging, zum Fehlersuchen, eine Hintergrundfarbe, sage mal Lightyellow für den Navibereich und der Inhaltsbereich bekommt hier auch eine Hintergrungfarbe, da sagen wir mal Lightpink. Jetzt sieht man das sehr viel deutlicher, dass das reine Glücksache ist, dass das Layout noch funktioniert, denn die beiden Bereiche überlappen sich um genau die 20px padding-left hier. Das ist also ein Problem, potentiell zumindest, wenn das Layout etwas passgenauer zusammensitzt, als diese großezügige Variante hier, das kann ins Auge gehen. Damit flexible Layouts also nicht zu einer Lotterie vorkommen, kann man jetzt das Box-Modell umstellen von der normalen Contentbox, wo das Padding zur Breite, zu width hinzugeführt wird, umstellen auf ein anderes Box-Modell, bei dem die Gesamtbreite das Padding bereits enthält. Und dieses Modell nennt sich die Border-Box.

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!