{"id":2981,"date":"2026-02-09T08:00:00","date_gmt":"2026-02-09T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=2981"},"modified":"2026-02-02T07:46:37","modified_gmt":"2026-02-02T06:46:37","slug":"responsives-webdesign-2-2","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2026\/02\/09\/responsives-webdesign-2-2\/","title":{"rendered":"Responsives Webdesign 2"},"content":{"rendered":"\n<p><br>Die responsiven Experimente gehen weiter&#8230;<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Die Ausgangslage:<\/strong><\/p>\n\n\n\n<p>Wer den letzten Artikel aufmerksam gelesen hat und die Webseite auch nachgebaut hat, konnte feststellen das einige CSS Anweisungen noch nicht wirksam werden.<\/p>\n\n\n\n<p>Das Ziel ist doch eine Webseite zu gestalten die bei einer Breite bis 600 Pixel einen roten Seitenhintergrund bekommt und einen gr\u00fcnen Kopfbereich. Ab 601 Pixel soll der Hintergrund die Farbe blau annehmen und der Kopfbereich gelb erstrahlen.<\/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)\">\n&lt;link rel=\"stylesheet\" href=\"01_CSS\/601.css\" media=\"screen and (min-width: 601px), (max-width: 1000px)><\/code><\/pre>\n\n\n\n<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c600.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\nbackground-color: red;\ncolor: black;\n}\n\nheader {\nbackground-color: green;\n}\n\nnav {\ntop: 97px;\nleft: 5px;\nwidth: 210px;\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 10px;\npadding-right: 10px;\npadding-bottom: 10px;\npadding-left: 10px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\nnav li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}\n\nnav a:link {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:visited {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:hover {\nbackground-color: red;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nmain {\n\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 3px;\nmargin-right: 5px;\nmargin-bottom:5px;\nmargin-left: 5px; \/*war 241*\/\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 20px;\npadding-right: 20px;\npadding-bottom: 20px;\npadding-left: 20px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\n\nmain a:link {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:visited {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:hover {\ncolor: black;\nbackground-color: white;\ntext-decoration: underline;\n}\n\nmain a:focus {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:active {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}<\/code><\/pre>\n\n\n\n<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c601.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\nbackground-color: blue;\ncolor: black;\n}\n\nheader {\nbackground-color: yellow;\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die responsiven Experimente gehen weiter&#8230;<\/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-2981","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\/2981","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=2981"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2981\/revisions"}],"predecessor-version":[{"id":2982,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2981\/revisions\/2982"}],"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=2981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=2981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=2981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}