Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Kopfbereich und Formular anpassen

Testen Sie unsere 1957 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Darstellung der Website auf einem Smartphone erfordert zusätzlich die Anpassung der Positionierung des Slogans im Kopfbereich sowie der Breite des Formulars.

Transkript

Die Beispielseiten haben keine feste Breite mehr fließen, also von links bis nach rechts egal, wie breit das Browserfenster ist und mit der Anweisung Meta Viewport im Head der drei HTML-Seiten wurde bewirkt, dass hier der Browser die Seiten nicht mehr kleinzoomt. Es gibt noch zwei kleine Baustellen, hier der Slogan sollte wieder unterhalb des Logos stehen und das Formular sollte hier keine feste Breite mehr haben und das kommt jetzt an die Reihe. Ab in den Editor, in der bildschirm.css ist hier der Wrapper mit der automatischen Breite und dem geänderten Margin und etwas weiter unten steht der Slogan mit der absoluten Positionierung. Da sehen Sie, absolute Positionierung, da hatte ich schon gesagt, dann ist der Webdesigner dafür verantwortlich, dass das alles passt und jetzt ist so ein Fall eingetreten, denn mit dieser absoluten Positionierung steht der Slogan direkt auf dem Logo. Ich möchte es nicht löschen, denn vielleicht brauchen wir das irgendwann nochmal wieder, deswegen kommentiere ich das einfach aus, dann ist es für die Browser nicht mehr da, aber ich kann es nochmal nachschlagen. Das sind also zwei nützliche Techniken hier oben, zum ein, ich schreibe der nächsten Zeile einfach das neu, was in der Zeile dadrüber geschrieben wird und ändere das kann, aber so noch sehen, wie es vorher war. Und hier die Auskommentierung ist ein Schritt weiter, ich hätte auch alles neu definieren können, aber die Auskommentierung ist in diesem Fall einfacher. Soweit hierzu, in der bildschirm.css gespeichert ist, und ich gehe ins Formular Stylesheet. Dort hat das Formular eine Breite von 320px und auch da schreibe ich davor width auto. Dass das etwas nach links kommt, ist einfach Geschmackssache, so kann ich die Änderung leichter erkennen, das funktioniert genauso, als wenn das so steht, aber so ragt es etwas raus und ich kann leichter sehen, wo ich was geändert habe. Das ist also für das Formular selbst, width auto, und jetzt für die drei Eingabeelemente, die haben 280 Pixelbreite, da möchte ich jetzt mal nicht auto sagen, sondern einfach mal in Prozent arbeiten. Ich sag mal 80%, das ist Pi mal Daumen, das muss man einfach ausprobieren, was einem am besten gefällt. Hier sehen Sie auch gleich noch eine Nebenwirkung: je mobiler, je flexibler die Webseiten werden, desto weniger werden Sie noch mit der Einheit px, also Pixel, arbeiten. Die ist für die Einstieg wunderbar, weil sie sehr leicht zu verstehen ist und keinen Nebenwirkungen hat, aber sie ist oft nicht so richtig flexibel, besonders bei Breitenangaben. Hier haben Sie Prozent und hier überlassen Sie es einfach dem Browser. So, das ist soweit hier alles angepasst und im mobilen Browser würde das jetzt so aussehen. Die absolute Positionierung ist entfernt, also fließt der Slogan im Fluss des Dokumentes mit und steht unterhalb des Logos. Gegebenenfalls kann man hier noch ein bisschen Fine-tuning betreiben. Bei der Galerie hatten wir nichts geändert. Das sieht es auch so gut aus und das Formular passt sich jetzt an, width auto, also, automatische Breite, hier steht das einfach drin, da ragt nichts mehr über und die Formularfelder nehmen etwa 80% vom Formular abzüglich des Paddings ein hier. So weit sind diese Seiten auf mobilen Geräten jetzt doch schon sehr viel besser bedienbar, als vorher. Zum Vergleich noch einmal hier die Ausgangsposition. So sahen die Beispielseiten ohne Nachbearbeitung aus, also mit fester Breite und ohne Meta Viewport, sodass die mobilen Browser das da runterzoomen und jetzt sieht das doch schon etwas verträglicher aus auf mobilen Geräten. Die Frage ist jetzt, was macht ein Browser am Desktop? Und die Antwort auf diese Frage ist natürlich nicht ganz weit weg. Sie sehen hier, width auto, das fließt von links nach rechts, breit durch, egal wie groß das ist. Die Galerie geht noch, die Kontaktseite, des Formular, ebenso width auto, also, wäre es jetzt ideal, wenn man dem Browser am Desktop sagen könnte, dass ab einer gewissen Browserfensterbreite doch ein paar andere Regel gelten sollen, da war es vorher eindeutig besser und dazu gibt es Media Queries.

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!