Responsives Webdesign 2

Mittwoch 9. September 2020 von Torsten

Jetzt beginnen die Experimente mit dem Responsiven Webdesign. Die Ausgangsbasis bildet die Version 2 des Responsiven Webdesign…

Die Ausgangsbasis

Das zweispaltige Layout von Flex 2 wurde per link-Element zu einem responsiven Webdesign gestaltet.

  • <link rel=“stylesheet“ href=“01_CSS/600.css“ media=“screen and (max-width: 600px)“>

Bisher wird aber nur der body mit einer roten Hintergrundfarbe und der header mit einer grünen Hintergrundfarbe versehen. Das ist natürlich noch nicht wirklich eine Smartphone-freundliche Gestaltung der Webseite…

Textbereich anpassen

Bei einer Maximalbreite von 600 Pixeln soll der Textbereich die gesamte Breite des Bildschirms/Viewports ausfüllen. Im CSS wird dazu folgendes eingetragen beziehungsweise angepasst:

main {

margin-left: 5px; /*war 241*/

}

Der linke Außenabstand wird also von 241 Pixel auf nur noch 5 Pixel reduziert. Das klappt auch schon, doch jetzt braucht es nur noch eine vernünftige Lösung für die Navigation.

Für die weiteren Experimente erstelle ich eine neue Version für dieses Projekt (Responsiv-V-4)…

Lösung für die Navigation

Meine Idee besteht darin, die normale Navigation auszublenden und eine Droddown-Navigation im header-Bereich einzubauen…In einem ersten Schritt passe ich aber erstmal die Hintergrundfarben an.

Wie blenden wir nun die Navigation aus? Vielleicht so wie wir die zweite Ebene des Hover-Dropdowns ausgeblendet haben? Versuchen wir es also…

nav {

position: absolute;

left: -9999px;

top: -9999px;

}

Das Experiment hat geklappt und die Navigation ist verschwunden. Jetzt brauchen wir nur noch eine zweite horizontale Navigation…

In den header-Bereich wird dazu ein nav2-Element eingebaut und per CSS gestaltet. Sämtliche Details hier aufzuführen und zu erklären würde den Rahmen sprengen. Der Trick besteht darin, die beiden Navigationen an der richtigen Stelle auszublenden und einzublenden.

Wer mehr dazu erfahren möchte, kann auf den nächsten Artikel warten…

Dieser Beitrag wurde erstellt am Mittwoch 9. September 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

Kommentar schreiben