{"id":396,"date":"2023-02-15T08:00:00","date_gmt":"2023-02-15T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=396"},"modified":"2024-07-24T06:09:09","modified_gmt":"2024-07-24T04:09:09","slug":"responsives-webdesign-3","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2023\/02\/15\/responsives-webdesign-3\/","title":{"rendered":"Responsives Webdesign 3"},"content":{"rendered":"\n

Bei einer Maximalbreite von 600 Pixeln soll der Textbereich die gesamte Breite des Bildschirms\/Viewports ausf\u00fcllen und die Navigation soll per Dropdown eingeblendet werden\u2026<\/p>\n\n\n\n\n\n\n\n

Navigation x 2:<\/strong><\/p>\n\n\n\n

Bereits im vorherigen Webdesign-Artikel wurden die Grundlagen gelegt. Auf der Webseite werden jetzt einfach zwei Navigationsbereiche eingebaut und an der richtigen Stelle ausgeblendet und eingeblendet.<\/p>\n\n\n\n

<header> <!-- Anfang vom header-Element -->\n<nav2> <!-- Anfang vom nav-Element -->\n<ul>\n<li><a href=\"index.html\">Navigation<\/a>\n<ul>\n<li><a href=\"001.html\">Seite 1<\/a><\/li>\n<li><a href=\"002.html\">Seite 2<\/a><\/li>\n<li><a href=\"003.html\">Seite 3<\/a><\/li>\n<li><a href=\"004.html\">Seite 4<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/nav2> <!-- Ende vom nav-Element -->\n<\/header> <!-- Ende vom header-Element -->\n<nav> <!-- Anfang vom nav-Element -->\n<ul>\n<li><a href=\"index.html\">Startseite 1<\/a><\/li>\n<li><a href=\"index.html\">Startseite 2<\/a><\/li>\n<\/ul>\n<\/nav> <!-- Ende vom nav-Element -->\n<main>\n<\/code><\/pre>\n\n\n\n
Der zweite Navigationsbereich sitzt hier also im header-Bereich. Nun m\u00fcssen wir die beiden Navigationen an der richtigen Stelle ausblenden\u2026<\/p>\n\n\n\n
Navigation 1 ausblenden:<\/strong><\/p>\n\n\n\n
Die erste Navigation soll ja nur bei der Maximalbreite von 600 Pixel ausgeblendet werden. Es macht also Sinn diese CSS Anweisungen in die Datei \u201c600.css\u201c zu packen\u2026<\/p>\n\n\n\n
nav {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n\u2026\n}<\/code><\/pre>\n\n\n\n
Navigation 2 ausblenden:<\/strong><\/p>\n\n\n\n
Die zweite Navigation (die im header) wird in der Datei \u201c06_navibereich.css\u201c ausgeblendet.<\/p>\n\n\n\n
nav2 {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n}<\/code><\/pre>\n\n\n\n
Navigation 2 einblenden:<\/strong><\/p>\n\n\n\n
Die zweite Navigation wird nun in der Datei \u201c600.css\u201c eingeblendet.<\/p>\n\n\n\n
nav2{\nposition: absolute;\ntop: 10px;\nleft: 20px;\n}<\/code><\/pre>\n\n\n\n
Die Pixelwerte sind nat\u00fcrlich bei Bedarf anzupassen. Allerdings fehlt noch etwas, doch das gibt es erst im n\u00e4chsten Webdesign-Artikel\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"
Bei einer Maximalbreite von 600 Pixeln soll der Textbereich die gesamte Breite des Bildschirms\/Viewports ausf\u00fcllen und die Navigation soll per Dropdown eingeblendet werden\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-396","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\/396","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=396"}],"version-history":[{"count":2,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/396\/revisions"}],"predecessor-version":[{"id":1644,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/396\/revisions\/1644"}],"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=396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}