Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Website optimal anzeigen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Entfernung der festen Breite sowie die Definition einer passenden Anweisung dienen dazu, die Website auf einem Smartphone in der optimalen Größe darzustellen.

Transkript

Browser auf einem Smartphone zoomen die Seite mit einer festen Breite, also einfach klein, so das sie komplett hier drauf passt, aber das ist noch nicht der Weisheit letzter Schluss. Es gibt zwei Maßnahmen, die dabei helfen: Zum einen die Entfernung der festen Breite und zum anderen eine Anweisung Namens Meta Viewportan die mobilen Browser mit der Bitte, die Seite nicht klein zu zoomen, sondern einfach ganz normal darzustellen. Diese beiden Maßnahmen möchte ich Ihnen jetzt kurz vorstellen. Im Editor ist die Bildschirm CSS geöffnet im Übungsordner und die feste Breite wird geregelt durch div#wrapper. Dann nehme ich die 720px raus, beziehungsweise ich schreibe einfach darunter width:auto, das ist einfacher, denn so kann ich sehen, wie es vorher war und kann einfach ausprobieren, ob sich das dadurch verbessert und auch der Margin soll etwas angepasst werden margin: 0 auto, so das die Seite direkt ganz oben beginnt und oben nicht mehr 10px Abstand hat. Das ist die erste Maßnahme, also die Entfernung der festen Breite. Die zweite Maßnahme die Bitte an die Mobilen Browser, die Seite nicht klein zu zoomen, die kommt hier ins HTML. Meta Viewportan hatte ich das gennant. Der Viewportan ist der Bereich des Browserfensters in dem die Seite dargestellt wird. Und dieser Bereich, der wird kleingezoomt von den Browsern und deswegen gibt es jetzt eine Bitte, ein Metaelement name=viewport, das ist noch nicht standardisiert, das wird irgendwann im Zukunft auch mal in CSS wandern, denn dort gehört es eigentlich hin, aber Apple hat sich das hier so ausgedacht und momentan haben das alle übernommen, dann kommt content width=device-width. Das ist der eigentliche Clue. Also die Bitte an die Browser, es geht um den Viewport und ich möchte, dass die Breite der Seite, der Breite des Gerätes entspricht, also auf Gutdeutsch nicht klein, zumindest etwas kompliziert ausgedruckt, aber das hat sich so eingebürgert und durchaus bewehrt. Diese Zeile kopiere ich und füge sie auch auf den anderen beiden Seiten ein. Wo genau im Head das steht ist nicht wichtig, die Reihenfolge der Elemente ist hier unbedeutend, Aber nach dem anderen Metaelement passt das schon ganz gut. So und hier wieder rein und speichern, so das der kleine Punkt davor verschwindet. Das sind die beiden Maßnahmen, also zum einen die Entfernung der festen Breite und hier oben keinen Abstand mehr, keine 10px, sondern direkt oben anfangen und den Meta Viewport, die Anweisung. Die könnte auch noch ausführlicher sein, aber für den Anfang ist hier width=device-width völlig ausreichend. Im Browserfenster, im mobilen Browser ändert sich das daraufhin so. Ignorieren Sie mal eben den Slogan hier oben. Sie sehen es wird nicht mehr runtergezoomt. Die Seite passt genau in die Breite des Gerätes hier. Das ist wesentlich besser lesbar, wenn wir noch einmal ganz kurz zurückgehen hier, da sehen sie, das wird runtergezoomt, das Formular hier zum Beispiel ist wirklich nicht mehr bedienbar und hier wird das jetzt gut dargestellt, ist leicht lesbar, die Galerie sieht gut aus und auch das Formular, da kann man schon bisschen mehr erkennen, aber wir sehen hier zwei weitere Baustellen sind dadurch entstanden. Erstens der Slogan,jetzt ist er dran hier, der ist absolut positioniert, Er weiß nichts von irgendwelchen Flüssen im Dokument, er ist absolut positioniert und genau da ist er jetzt auch noch. Diese absolute Positionierung muss also raus, damit er hier wieder drunter steht. Und das Formular hat immer noch eine feste Breite und die Formularelemente müssen auch entsprechend angepasst werden.

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!