Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Webdesign – Grundlagen

Erleichterte Rechnungen mit box-sizing

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Berechnungen von Breiten sind mühsam, wenn man neben width auch Innenabstände (padding) berücksichtigen muss. Einfacher wird’s mit der Eigenschaft box-sizing. Die ist besonders nützlich, wenn feste Pixelwerte mit Prozentangaben kombiniert werden sollen.

Transkript

Layout-Berechnungen können mühsam sein, wenn man neben den Breitenangaben auch noch Innenabstände berücksichtigen muss. Einfacher wird es mit der Eigenschaft Box-sizing, die besonders nützlich ist, falls Sie einmal feste Pixelwerte mit Prozentangaben kombinieren möchten. Das Box-Modell in CSS ist so gestrickt, dass normalerweise sich die Gesamtbreite eines Elementes ergibt, aus der eigentlichen Width- Angabe, also der eigentlichen Breite, plus Padding an beiden Seiten und plus Border-Width, sofern ein Border vorhanden ist. Ich habe jetzt hier mal ein Element, die Navigation. Die hat im Code eine Breite von 300 Pixel bekommen. Außerdem wurde Padding - 30 Pixel festgelegt. Und die Gesamtbreite wäre in diesem Fall hier 360 Pixel. Diesen Wert, die 360 Pixel, muss ich in manchen Fällen berechnen. Beispielsweise, wenn ich einen weiteren Inhaltsbereich hier habe, der genau daneben passen soll. Und ich habe hier eine Gesamtbreite von 960 Pixel für das Ganze. Ich habe hier eben 300+30+30, das sind 360 Und habe hier den Inhaltsbereich, der soll daneben passen. Dann muss ich den Wert errechnen, um zu wissen, wie viel Platz mir noch zur Verfügung steht. Im Beispiel ist die Navigation insgesamt 360 Pixel breit. Das heißt, der Inhaltsbereich kann insgesamt 600 Pixel breit sein. Wenn ich hier auch wieder ein Padding von 30 Pixeln will, dann muss ich als Width-Angabe entsprechend dann 540 nehmen, weil 540+30+30 macht wieder die Gesamtbreite. Ganz schön viel Rechenarbeit. Besonders auch da dieses System hier nicht so ganz flexibel ist, was man besonders merkt, wenn man mit verschiedenen Angaben arbeiten möchte. Beispielsweise mal Prozent mit Pixel kombinieren. Glücklicherweise gibt es aber auch eine Möglichkeit auf ein anderes Box-Modell umzuschalten. Und das können Sie... Also, hier sehen Sie zum einen mal das eine Layout, was wir uns eben im Browser angeschaut haben. Jetzt gibt es die Möglichkeit auf das andere Box-Modell umzuschalten, wo als Breite nicht mehr nur der innere Bereich genommen wird, sondern wo Width die Gesamtbreite ist. Und das bedeutet, wenn Sie jetzt dieses Box-Modell verwenden und dann beispielsweise To Width noch ein Padding dazu ergänzen, dann wird das Padding nicht addiert. Ich habe in diesem Beispiel dieses andere Box-Modell einmal für alle Elemente aktiviert durch dieses Sternchen, weil es einfach doch manchmal praktisch ist auf diese andere Art zu rechnen. Und dieses andere Box-Modell aktivieren Sie durch box-sizing: border-box. Das heißt, es ist wirklich der Border, der Rahmen ist der Endpunkt. Und Width bezieht sich auf dieses Ganze dadurch. Die Angabe müssen Sie für Firefox auch zusätzlich mit dem moz-Präfix schreiben und für ältere Webkit-Browser auch mit dem webkit-Präfix. Wenn Sie das haben, dann können wir wieder ganz einfach rechnen. Wir haben wieder ein Beispiel hier: 960 Pixel Gesamtbreite. Wir haben eine Navigation, die soll 360 Pixel haben. Die hat zusätzlich ein Padding, aber da müssen wir gar nichts machen. Weil das in diesem Fall nicht addiert wird. Und wir haben hier beim Inhaltsbereich eine Gesamtbreite von 600 Pixel. Da soll auch Padding dabei sein. Aber auch wieder müssen wir uns nicht besonders drum kümmern, weil das hier jetzt beides mal die Gesamtbreite ist, von der das Andere sozusagen nach innen abgeht. Wenn wir dieses Beispiel anschauen, dann sieht das genauso aus, wie das Beispiel von eben auch. Aber dieses Mal haben wir einfach eine einfachere Art das Ganze zu berechnen. Box-sizing ist eine CSS 3-Eigenschaft, die aber sehr gut unterstützt wird. Wie es immer mit der Unterstützung aussieht, verrät Can I Use. Und da habe ich mal die Web-Seite hier bei dem Punkt Box-sizing. Und Sie sehen grün ist immer "wird unterstützt". Wird unterstützt das heißt, das ist wunderbar grün. Sie kriegen aber auch den Hinweis beispielsweise, dass Sie in bestimmten Firefox- Versionen noch das moz-Präfix brauchen. Und für bestimmte Webkit- Browser auch noch das webkit-Präfix. Und Sie sehen auch im Internet Explorer sieht das ganz wunderbar aus, weil nämlich sogar der Internet Explorer 8 das Ganze noch unterstützt. Bei den normalen Projekten genügt es, dass der Internet Explorer 8 das Feature kann. Sollten Sie aus irgendeinem Grund aber auch noch den Internet Explorer 7 berücksichtigen müssen, so könnten Sie nachbessern. Da gibt es eine .htc-Datei. Die sieht folgendermaßen aus. Die können Sie auf dieser Web-Seite herunterladen. Diese .htc-Dateien sind so Behavior-Sachen. Das ist auch wieder so eine Proprietary Internet Explorer-Geschichte. Hier sehen Sie aber auch sehr schön dann direkt, wie Sie das anwenden. Das heißt, da, wo Sie Box-sizing und Border-box verwenden, ergänzen Sie noch *behavior. Das verhindert, dass andere normale vernünftige Browser das lesen. Und bei Url dann der Pfad zu der Box-sizing-Datei, die Sie vorher heruntergeladen haben. Damit diese .htc-Datei dann richtig interpretiert wird, falls es eben da Probleme geben sollte, müssten Sie noch den Content-Type entsprechend setzen. Und das machen Sie am besten über eine .htaccess-Datei. Die .htaccess-Dateien sind immer so Steuerdateien für den Web-Server. Und das heißt, wenn das eben nicht klappen sollte, weil das mit dem falschen, in meinem Typ ausgeliefert wird, dann würden Sie entweder eine .htaccess-Datei erstellen. Das ist eine Datei, die wirklich einfach .htaccess heißt. Oder Sie würden, wenn Sie schon haben eine bestehende .htaccess-Datei - durch diese Zeile hier ergänzen. Aber im Normalfall sollten Sie darauf verzichten können. Ich erzähle Ihnen auch nur, was hier auch ganz groß steht. Die .htc-Dateien müssen immer relativ zum HTML-Dokument, nicht zur CSS-Datei sein. Deswegen ist es am besten hier absolute Pfade zu verwenden. Was ist denn jetzt aber wirklich gewonnen durch dieses Box-sizing? Da wollen wir uns jetzt mal ein Beispiel anschauen, wenn wir das Ganze flüssig machen. Ich habe jetzt sowohl das erste Beispiel, als auch das zweite Beispiel umgerechnet, von Pixeln in Prozentwerte, immer nach der Formel: Zielbreite durch Kontext ist das gewünschte Ergebnis. Und das funktioniert bei beiden Beispielen gleich gut. Und wir haben beides mal dann eben ein flüssiges Layout. Die Werte sind natürlich im Detail unterschiedlich, je nachdem, ob ich jetzt eben diese 300 Pixel umrechne, oder bei dem anders aktivierten Box-Modell die 360 Pixel, kriege ich natürlich hier im Detail ein bisschen andere Werte. Beides funktioniert. Also, wenn ich mal hier dieses eine anschaue, dann ist das natürlich ein flüssiges Layout. Genau... ich deaktiviere mal hier diese 960, die praktisch sind zum Testen. Aber Sie sehen hier genau. Also, das ist ein flüssiges Layout. Und wenn ich das Ganze hier kleiner mache, dann passt das sich an. Und genauso ist es hier auch bei dem anderen. Hier hatte ich auch mal testweise die 960 Pixel noch drin. Die kann ich hier rausmachen. Und ebenfalls hier haben wir auch ein flüssiges Layout und das funktioniert soweit ganz gut. Jetzt kann uns bei diesen flüssigen Layouts aber auch passieren, dass Sie an einer bestimmten Stelle einmal Pixelwerte brauchen, weil Sie irgendeinen Mindestabstand irgendwo brauchen und der muss einfach diesen Wert haben. Dann ist das ganz problemlos bei unserem Fall, wo wir jetzt auf das andere Box-Modell umgeschaltet haben. Ich zeige das hier einmal. Ich kann jetzt mal davon ausgehen: ich möchte jetzt hier mal... Padding brauche ich nicht, irgendein Prozentwert, sondern im Beispiel nehme ich einmal hier 50 Pixel. Wenn ich das dann hier im Browser anschaue, dann klappt das Ganze trotzdem noch. Also, das Layout ist jetzt dadurch nicht zerhauen, weil eben ja trotzdem sichergestellt ist, dass 37,5 die Gesamtbreite ist. Wenn ich hier in dem anderen Fall hingegen, wo ich das normale Box-Modell habe, das Standard-Box-Modell, einfach mal hier einen Pixelwert eingebe. Also, hier auch 50 Pixel soll mal bei der Navigation - Innenabstand sein. Und ich rufe das jetzt auf. Dann sehen Sie: es zerhaut das Layout, weil natürlich das jetzt hier von den Angaben nicht mehr passt. Wir könnten natürlich jetzt dann tricksen und könnten mit verschachtelten Elementen arbeiten, aber es ist natürlich immer unschön, wenn wir zu Layoutzwecken bestimmte Elemente einfügen müssen. Zusammengefasst: Box-sizing, Border-box. Ich zeige jetzt hier nochmal den Code. Wenn man das auf alle Elemente anwendet, verändert das Box-Modell und deklariert Width zu Gesamtbreite. Das ist praktisch, wenn Sie bei einem flüssigen Layout doch einmal auch feste Werte brauchen. Box-sizing müssen Sie mit den Präfixen für Firefox moz und webkit für ältere Webkit-Browser schreiben. Ansonsten hat es eine sehr gute Browser-Unterstützung, da es sogar im IE8 funktioniert. Sollten Sie wirklich noch ältere IEs berücksichtigen müssen, können Sie hier über eine .htc-Datei nachbessern.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 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!