Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Inhaltsbereich flexibel gestalten

29,95
Ein flexibles Layout orientiert sich an der Größe des Browserfensters. Hierfür definiert der Trainer die Breite des Inhaltsbereichs proportional zu den Displayabmessungen des jeweiligen Endgeräts.

Bis jetzt haben Sie alle Breitenangaben für das Layout in Pixel gemacht, weil das Layout mit CSS und Pixelangaben, besonders für den Einstieg leicht zu berechnen und einfacher zu verstehen ist. Jetzt gehen Sie langsam, aber sicher den ersten Schritt in Richtung flexible Layouts. Flexible Layout orientieren sich an der Größe des Browserfensters. Wenn Sie zum Beispiel sagen, width 80% für den Wrapper, dann hat dieser immer ein Breite von 80% des Browserfensters, egal, wie größ oder klein das gerade ist. Der Wert von 80% ist natürlich beliebig gewäht, als Beispiel, Layouts können auch weniger oder mehr Prozente haben, aber jetzt geht es einmal los mit dem ersten Schritt und zwar bleibt links der Navigationsbereich mit festen Pixeln, aber für den Inhaltsbereich und für den Wrapper drum herum, wird die feste Breite ein bisschen aufgehoben. Hier sieht das im Augenblick so aus. Es ist nach wie vor alles feste Breite, im Inspektor sehen wir das hier, der Wrapper hat 720px und der Navigationsbereich 110+20. Das ist der Ausgangspunkt und jetzt geht es rüber in den Editor, hier ist die Desktop.css geöffnet in der der Wrapper für Browserfenster festgelegt wird, wenn Sie breiter als 768px sind, oder genau genommen, wenn Sie mindenstens 768 Pixelbreite haben. Im ersten Schritt, und ich nehme wieder hier die Überschreibtechnik, wie ich sie manchmal nenne, 80% Überschreibtechnik, deswegen, weil die zweite Zeile die erste überschreibt, aber man den vorherigen Schritt noch wunderbar sehen kann, damit das auffällt, ist das ein bisschen links ausgerückt hier und steht auf 80%. Gleichzeitig kann ich jetzt hier noch weiter eine maximale Breite hinzugeben, die berechne ich mal in 70em, das ist also abhängig von der Schrifftgröße und min-width, die mache ich mal in 700px. Da haben wir fast alle drei Einheiten zusammen hier. width 80%, 70em maximale Breite, das ist dann in der Regel mal Schrifftgröße und min-width 700px soll es mindenstens breit sein, also schmaler wird es nicht am Desktop das ist nicht wirklich wichtig, weil wir hier oben 768px sowieso haben. Diese min-width-Angabe ist eigentlich nur zur Sicherheit, falls aus irgendwelchen Gründen die Media Query nicht funktioniert. So, drei Angaben und rüber geht es in den Browser und Sie sehen, das wird breiter. Hier hab ich jetzt einmal den Wrapper, da haben wir ihn mit width 80%, das würde sonst auch gar nicht werden, bei max-width ändert sich ein bisschen was wenn ich das jetzt mal auf 60 setze, dann sehen Sei den Unterschied schon größer, 60, wenn ich den jetzt auskommentiere hier oder deaktiviere, dann wird der Unterschied größer. Und hier kann man jetzt im Browserfenster direkt ein bisschen rumspielen mit den optimalen Werten, max-width 60em, das ist hier definitiv eigentlich gar nicht so schlecht und, wenn man das weglassen würde, dann würde es doch sehr breit werden, hier dieses Browserfenster ist im Moment etwa 1080px breit und dann ist die Zeilenlänge doch zu groß. Also, lassen wir das mal bei 60 oder ich lade nochmal neu, dann war es 70, das geht eigentlich auch noch und hier gucken wir uns einmal so durch und damit haben Sie ein halbwegs flexibles Layout, die Navigationsspalte nach wie vor in Pixel, aber der Rest ist flexibel gestaltet. Mit den Werten, wie gesagt, das sind einfach nur Orientierungswerte hier zum spielen, da muss man ein bisschen ausprobieren, was für das jeweilige Layout am besten funktioniert. Eine weitere Möglichkeit ist, dass Sie hier die 80% einfach rausnehmen, weil die kommen sowieso nicht richtig zur Geltung, sagen hier einfach width-auto und beschränken das dann nach unten auf 768 sinnvollerweise, weil da wählt die Media Query sowieso, und nach oben auf 70em oder was immer sich anbietet für das Layout, so sind sie noch ein wenig flexibler. Sie geben eigentlich nur eine Unter- und eine Obergrenze vor.

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!