{"id":393,"date":"2023-02-08T08:00:00","date_gmt":"2023-02-08T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=393"},"modified":"2023-08-30T10:40:52","modified_gmt":"2023-08-30T08:40:52","slug":"responsives-webdesign-2","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2023\/02\/08\/responsives-webdesign-2\/","title":{"rendered":"Responsives Webdesign 2:"},"content":{"rendered":"\n<p>Jetzt beginnen die Experimente mit dem Responsiven Webdesign. Die Ausgangsbasis bildet die Version 2 des Responsiven Webdesign\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Die Ausgangsbasis<\/strong><\/p>\n\n\n\n<p>Das zweispaltige Layout von Flex 2 wurde per link-Element zu einem responsiven Webdesign gestaltet.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"01_CSS\/600.css\" media=\"screen and (max-width: 600px)\"&gt;<\/code><\/pre>\n\n\n\n<p>Bisher wird aber nur der body mit einer roten Hintergrundfarbe und der header mit einer gr\u00fcnen Hintergrundfarbe versehen. Das ist nat\u00fcrlich noch nicht wirklich eine Smartphone-freundliche Gestaltung der Webseite\u2026<\/p>\n\n\n\n<p><strong>Textbereich anpassen<\/strong><\/p>\n\n\n\n<p>Bei einer Maximalbreite von 600 Pixeln soll der Textbereich die gesamte Breite des Bildschirms\/Viewports ausf\u00fcllen. Im CSS wird dazu folgendes eingetragen beziehungsweise angepasst:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>main {\nmargin-left: 5px; \/*war 241*\/\n}<\/code><\/pre>\n\n\n\n<p>Der linke Au\u00dfenabstand wird also von 241 Pixel auf nur noch 5 Pixel reduziert. Das klappt auch schon, doch jetzt braucht es nur noch eine vern\u00fcnftige L\u00f6sung f\u00fcr die Navigation. F\u00fcr die weiteren Experimente erstelle ich eine neue Version f\u00fcr dieses Projekt (Responsiv-V-4)\u2026<\/p>\n\n\n\n<p><strong>L\u00f6sung f\u00fcr die Navigation<\/strong><\/p>\n\n\n\n<p>Meine Idee besteht darin, die normale Navigation auszublenden und eine Droddown-Navigation im header-Bereich einzubauen.<\/p>\n\n\n\n<p>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\u2026<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n}<\/code><\/pre>\n\n\n\n<p>Das Experiment hat geklappt und die Navigation ist verschwunden. Jetzt brauchen wir nur noch eine zweite horizontale Navigation.<\/p>\n\n\n\n<p>In den header-Bereich wird dazu ein nav2-Element eingebaut und per CSS gestaltet. S\u00e4mtliche Details hier aufzuf\u00fchren und zu erkl\u00e4ren w\u00fcrde den Rahmen sprengen. Der Trick besteht darin, die beiden Navigationen an der richtigen Stelle auszublenden und einzublenden. Wer mehr dazu erfahren m\u00f6chte, kann auf den n\u00e4chsten Artikel warten\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jetzt beginnen die Experimente mit dem Responsiven Webdesign. Die Ausgangsbasis bildet die Version 2 des Responsiven Webdesign\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-393","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=393"}],"version-history":[{"count":2,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/393\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/393\/revisions\/395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}