Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Mobilen Informationsbereich gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die grundsätzliche Gestaltung des Informationsbereichs und der darin enthaltenen Hyperlinks-Listen für die mobile Version erfolgt im Quellcode von CSS.

Transkript

Die Beispielseiten haben alle drei einen zusätzlichen Infobereich bekommen, einen zusätzlichen Layoutbereich, der innerhalb des Wrapper steht, aber unterhalb vom main-Inhaltsbereiche hier, und dieser Bereich soll jetzt gestaltet werden und zunächst für die mobile Version, die Sie hier in Firefox mit Bildschirmgröße testen sehen. Das ist der Befehl und der simuliert das ein bisschen, zum Testen der Grundgestaltung reicht das völlig aus. Ich gehe jetzt drüber in den Editor, öffne die Bildschirm-CSS für diese Beispielseiten und scrolle ein bisschen runter, ich möchte das hier einfügen im Bereich Styles für die Layout-Bereiche, dort soll das erstmal gestaltet werden. Los geht es hier mit aside und da ist da per Definition mehrere davon geben kann, schreibe ich die ID gleich dazu und mache hier die geschweifte Klammern und soll bekommen ein line-height von 1.5 und ein Padding von 20 Pixeln. So, dazu kommen hier noch etwas eingerückt dann die Gestaltung für die Überschriften, so, machen wir die Einrückung mal wieder rückgängig hier, so. color: #444 ein dunklerer Grauton, line-height für die Überschrift 1, damit mal sie in der Höhe später besser ausrichten kann, eine leichte Border-top von 1px solid#ddd, nehmen wir mal so einen hellen Grauton und ein klein bisschen padding-top von 0.5em. So, das ist die Überschrift, das muss ich im Selektor natürlich auch dazu sagen, h3 aside# infobereich h3, und jetzt kommt aside#infobereich die Liste. So, die soll list-style-type square, also eckige Aufzählungszeichen, kein Padding und ein bisschen Margin bekommen von 1em oben, rechts nichts, unten 2em und links auch 2em, das ist so die Grundgestaltung, die Einfärbung stimmt, das ist immer das erste Indiz das nirgendwo Semikola vergessen wurden oder andere Syntaxfehler eingebaut wurden und hier neu laden und Sie sehen, da sehen die Infobereiche auf allen drei Seiten hier schon etwas besser aus, als vorher und die Grundgestaltung ist damit schon gemacht. Da wir uns zuerst um die mobile Version kümmern und dann erst um die Desktopversion, spricht man da bei dieser Vorgehensweise auch von Mobile first.

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!