Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Informationsbereich hinzufügen

29,95
Ein spezielles HTML-Element dient dazu, einen Informationsbereich als Sidebar in der Desktop-Version einzufügen. Auf mobilen Websites fügt CSS diesen unterhalb des Inhaltsbereichs hinzu.

Die Beispielseiten sollen jetzt einen neuen Layoutbereich bekommen. Einen Info-Bereich, der in der Desktopversion hier als klassische Sidebar hier rechts am Rand erscheinen soll und in der mobilen Version unterhalb des Inhaltsbereiches und oberhalb des Footers hier, also hier zwischen. Im Editor habe ich hier schon etwas vorbereitet. Sie sehen hier den Übungsordner mit dem Quelltext für die Startseite und hier ist schon ein Bereich eingefügt. Ein zusätzlicher Bereich mit dem HTML-Element aside. Das ist ideal geeignet für Sidebars, da sind Dinge, die nicht zum Hauptinhalt der Seite gehören, die aber trotzdem nicht ganz unwichtig sind. Der hat die ID Infobereich bekommen und darin gibt es zwei h3 Überschriften und 2 Listen mit jeweils Links drin. Statt echter Links ist hier nur das Rautenzeichen, dann verhält er sich wie ein Link, führt aber nirgendwohin. Das Ganze speichere ich einmal ab und gehe rüber in den Browser. Ich möchte zuerst die mobile Version optimieren und dann kümmern wir uns um die Desktop-Version, das nennt man im Fachjargon mobile first und ist wahnsinnig in, es ist auch sinnvoll, deswegen ist es ja so in. Hier sehen Sie den eingefügten Bereich und jetzt muss ich diesen Bereich noch kopieren und auch auf den anderen Seiten einfügen, der soll da der Einfachheit halber gleich sein. So, innerhalb des Wrappers und unterhalb von Main, hier kommt der rein so, aside infobereich auf der Kontaktseite und auf der Galerieseite soll er auch sein. So, mit den weiterführenden Links, man könnte ihn natürlich inhaltlich auf den einzelnen Seiten anpassen, aber hier geht es mehr und die Layout-Technik. So, hier ist also die Galerieseite, wenn ich nach unten scrolle taucht der Infobereich hier auf und die Kontaktseite und auch da taucht der auf, wenn ich jetzt die Desktop-Version hier anzeigen lasse, dann sehen Sie, der steht unten drunter, der soll natürlich irgendwann hier daneben kommen. Im Menü Entwickler-Werkzeuge Bildschirmgrößen testen, unter Windows Strg+Umschalt+M, das ist eine Abkürzung, die sich lohnt, sobald man anfängt, mobile Seiten zu gestalten, dann kann man das hier in Firefox ganz wunderbar testen.

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)
Super
Stefan G.
Endlich habe ich Floats und Positionierungen verstanden
 

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!