Responsives Webdesign 1 und 3 werden nun zu Responsives Webdesign 4 verbunden. Die Seite \u00e4ndert nun die Farben und den Navigationsbereich…<\/p>\n\n\n\n\n\n\n\n
Die Ausgangslage:<\/strong><\/p>\n\n\n\n Das Layout \u201cResponsives Webdesign 1\u201c \u00e4ndert beim Verkleinern den Hintergrund auf die Farbe rot und den Kopfbereich auf die Farbe gr\u00fcn. Die Navigation wurde dabei aber sehr unsch\u00f6n \u00fcber den Textbereich geschoben. Die L\u00f6sung wurde im letzten Artikel gezeigt und nun m\u00fcssen und sollen beide Ans\u00e4tze in einem einzigen Projekt verbunden werden.<\/p>\n\n\n\n Die Idee besteht nun darin, die normale Navigation auszublenden und eine Dropdown-Navigation im header-Bereich einzubauen.<\/p>\n\n\n\n Die index.html mit zwei Navigationen:<\/strong><\/p>\n\n\n\n Jetzt braucht es CSS um die erste Navigation (nav) auszublenden und die zweite Navigation (nav2) im Kopfbereich (header) einzublenden. Die Datei \u201c600.css\u201c soll daf\u00fcr zust\u00e4ndig sein und die bisher noch ungenutzte Datei \u201cgalaxy.css\u201c wird entfernt.<\/p>\n\n\n\n Der CSS Code f\u00fcr die Datei \u201c600.css\u201c:<\/strong><\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Responsives Webdesign 1 und 3 werden nun zu Responsives Webdesign 4 verbunden. Die Seite \u00e4ndert nun die Farben und den Navigationsbereich…<\/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-3043","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\/3043","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=3043"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/3043\/revisions"}],"predecessor-version":[{"id":3044,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/3043\/revisions\/3044"}],"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=3043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=3043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=3043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<header>\n<nav2>\n<ul>\n <li><a href=\"index.html\">Navigation<\/a>\n<ul>\n <li><a href=\"index.html\">Seite 1<\/a><\/li> \n <li><a href=\"index.html\">Seite 2<\/a><\/li> \n <li><a href=\"index.html\">Seite 3<\/a><\/li> \n <li><a href=\"index.html\">Seite 4<\/a><\/li> \n<\/ul> \n<\/li>\n<\/ul>\n<\/nav2> \n<\/header> <!-- Ende vom header-Element -->\n\n<nav>\n<ul>\n <li><a href=\"index.html\">Startseite 1<\/a><\/li>\n <li><a href=\"index.html\">Startseite 2<\/a><\/li>\n <li><a href=\"index.html\">Startseite 3<\/a><\/li>\n <li><a href=\"index.html\">Startseite 4<\/a><\/li>\n<\/ul>\n<\/nav><\/code><\/pre>\n\n\n\nbody {\nbackground-color: red;\ncolor: black;\n}\n\nheader {\nbackground-color: green;\n}\n\nnav {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n\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\nnav2{\nposition: absolute;\ntop: 10px;\nleft: 20px;\n}\n\nnav2 li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}\n\nnav2 li ul {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n}\n\nnav2 li:hover ul {\nleft: 10px;\ntop: auto;\ndisplay: block;\nwidth: 210px;\nheight: auto;\n\n}\n\nnav2 a:link {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav2 a:visited {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2 a:hover {\nbackground-color: red;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2 a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2 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;\nfont-family: Arial;\nfont-size: smaller;\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
Der CSS Code f\u00fcr die Datei \u201c06_navibereich.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nnav {\nposition: absolute;\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\nnav2 {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n