Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sidebar erstellen

Testen Sie unsere 1983 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Definition weiterer CSS-Anweisungen positioniert den Informationsbereich auf der rechten Seite der Desktop-Version und gestaltet diesen als ansehnliche Sidebar.

Transkript

Die drei Beispielseiten enthalten ein Aside-Element hier unten, das für die mobile Version schon gestaltet wurde und in der Desktopversion auch schon gestaltet wurde. Mobile first wird natürlich vererbt auch auf die Desktopversion, allerdings soll die Desktopversion noch ein paar zusätzliche CSS-Anweisungen bekommen, denn das Aside-Element soll rechts neben den Inhaltsbereich gefloatet werden und zwar auf allen 3 Seiten. Dazu wechsle ich natürlich wieder rüber in den Editor und gehe in die Desktop.css, die beginnt mit einer Media Query: screen and (min-width 768px), das heißt alles, was hier zwischen steht, zwischen diesen geschweiften Klammern, gilt erst ab einer Browserfensterbreite von mindenstens 768 Pixeln. Ich schreibe jetzt hier mal die main dazwischen, das ist der Hauptinhaltsbereich, da darf es nur einen davon geben, deswegen braucht er keine Zusätze hier, float:left soll der nach links gefloatet werden und eine Breite bekommen von 530 Pixel. Der hat nämlich hier in der Bildschirm.css, etwas weiter oben hier main ein Padding von 20 Pixel, da kommen dann noch links und rechts plus 2x20px padding schreibe ich nochmal dazu, damit man das beim Rechnen nachher nicht vergisst. So, da drunter kommt jetzt das Aside-Element, das hat die ID Infobereich und soll auch ein paar geschweifte Klammern bekommen und dieses Aside-Element soll nach rechts gefloatet werden, Float:right und eine Breite von 110px bekommen, sowie ein Padding von 20px ebenfalls. So, dann hat also alles zusammen eine Breite von 720px im Wrapper, dann kommt 570 dazu 530+20+20 links und rechts und dann hier nochmal 110+20 links sind 130+20 rechts sind 150, 570+150 sind 720. Das ist zum Rechnen ganz wunderbar aber mit Pixel-Angaben geht das noch. So, jetzt rüber hier in den Browser und die Seite einmal neu laden. Und Sie sehen, das sieht schon fast gut aus bis auf den Fussbereich, was ist hier passiert? Das hab ich einfach mal so gelassen, weil es typisch ist für Float Layouts, dass, wenn irgendwas hier ins Floaten kommt, dass irgendwas nicht ganz so floatet, wie er soll. Dieser Fussbereich ist nicht gecleart, deswegen floatet er neben den Inhaltsbereich und macht das konsistent, hier sehen Sie auch schon gleich den nächsten Effekt, denn der main-Bereich umschließt eigentlich hier gar nicht die Inhalte und im Kontaktbereich sehen Sie das ebenso, das Kontaktformular hier ragt nach unten heraus. Also, ich beginne hier mit dem Clearing für den Fussbereich. In Bildschirm.css wird der formatiert und da setzte ich das einfach dazu clear-both. So, und rüber und neu laden und schon sieht die Sache auf allen Seiten ganz anders aus. So, und das funktioniert hier. Genau genommen umschließen die Bereiche die gefloateten Elemente immer noch nicht, aber das ist auch nicht wichtig, solange die keine Hintergrungfarbe bekommen, ist das optisch nicht zu sehen.

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!