Jetzt geht es an die Version 3 des Multi Div Layouts mit Klick Dropdown\u2026<\/p>\n\n\n\n\n\n\n\n
<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Jetzt geht es an die Version 3 des Multi Div Layouts mit Klick Dropdown\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-2716","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\/2716","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=2716"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2716\/revisions"}],"predecessor-version":[{"id":2717,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2716\/revisions\/2717"}],"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=2716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=2716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=2716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Der HTML Quelltext:<\/strong><\/p>\n\n\n\n<!doctype html>\n<html lang=\"de\">\n\n<head>\n<title>Webdesign <\/title>\n<link rel=\"stylesheet\" href=\"01_CSS\/01_zentrale.css\" type=\"text\/css\" \/>\n<meta charset=\"UTF-8\"\/>\n<\/head>\n\n<body>\n\n<div id=\"wrapper\"> <!-- wrapper-Bereich Anfang -->\n\n\n<header>\n<\/header>\n\n<div id=\"topnavigation\">\n<ul>\n <li><a href=\"top1.html\">Topnews 1<\/a><\/li>\n <li><a href=\"top2.html\">Topnews 2<\/a><\/li>\n <li><a href=\"top3.html\">Topnews 3<\/a><\/li>\n <li><a href=\"top4.html\">Topnews 4<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n<nav>\n\n<article>\n<ul>\n <li><a href=\"index.html\">Startseite<\/a><\/li>\n <li><a href=\"archiv.html\">Archiv<\/a><\/li>\n <li><a href=\"impressum.html\">Impressum<\/a><\/li>\n<\/ul>\n<\/article>\n\n<br \/>\n\n\n\n\n<article>\n<h1>Updates:<\/h1>\n<p>\nDatum einf\u00fcgen...\n<\/p>\n<\/article>\n<br \/>\n\n<article>\n<h1>Spalte 1<\/h1>\n<p>\nDies ist Artikel 1 in Spalte 1 unter der Navigation. \n<\/p>\n<\/article>\n<br \/>\n\n<\/nav> <!-- Ende von Spalte 1 -->\n\n\n<main>\n\n<article>\n<h1>Multi-Div Version 3 mit Klick Dropdown:<\/h1>\n<p>\nMulti-Div Version 3 mit Klick Dropdown...\n<\/p>\n<\/article>\n<br \/>\n\n<\/main>\n\n<div id=\"spalte3\">\n\n<article>\n<h1>Spalte 3<\/h1>\n<p>\nDies ist der Artikel 1 in Spalte 3\n<\/p>\n<\/article>\n<br \/>\n\n<article>\n<h1>Spalte 3<\/h1>\n<p>\nDies ist der Artikel 2 in Spalte 3\n<\/p>\n<\/article>\n<br \/>\n\n<article>\n<h1>Spalte 3<\/h1>\n<p>\nDies ist der Artikel 3 in Spalte 3\n<\/p>\n<\/article>\n<br \/>\n\n<\/div> <!-- Ende von Spalte 3 -->\n<\/div> <!-- wrapper-Bereich Ende -->\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c01_zentrale.css\u201c:<\/strong><\/p>\n\n\n\n@import url(02_fundament.css);\n@import url(03_body.css);\n@import url(04_wrapper.css);\n@import url(05_header.css);\n@import url(06_navigation.css);\n@import url(07_content.css);\n@import url(08_artikel.css);\n@import url(09_spalte3.css);\n@import url(10_topnavigation.css);\n@import url(11_naviblox.css);\n@import url(12_spalte1.css);<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c02_fundament.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\n* {\npadding: 0;\nmargin: 0;\n}\n\nhtml {\nheight: 101%;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c03_body.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nbody {\ncolor: black;\nbackground-color: white;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c04_wrapper.css\u201c:<\/strong><\/p>\n\n\n\n#wrapper {\nmargin: 5px;\nbackground-color: white;\n}<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c05_header.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nheader {\nheight: 80px;\nbackground-image: url(..\/cpm-header01.gif);\nbackground-repeat: no-repeat;\nbackground-color: seagreen;\ncolor: white;\n\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\npadding: 5px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c06_navigation.css\u201c:<\/strong><\/p>\n\n\n\n<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c07_content.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nmain {\n\ncolor: white;\nbackground-color: seagreen;\npadding: 20px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\nmargin-top: 3px;\nmargin-right: 241px;\nmargin-bottom:5px;\nmargin-left: 241px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\n#formular fieldset {\npadding: 10px;\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}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c08_artikel.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\narticle {\noverflow: hidden;\ncolor: black;\nbackground-color: white;\npadding: 5px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\n}\n\n.flowtext {\nbackground-color: lightsteelblue;\n}\n\n.clearingtext {\nclear: both;\nbackground-color: lightsteelblue;\n}\n\n.artikelfloat {\nfloat:left;\ncolor: black;\nbackground-color: lightsteelblue;\nmargin-left: 0px;\nmargin-right: 5px;\nmargin-bottom: 5px;\npadding: 5px;\nwidth: 450px;\nheight: 200px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\n}\n\n.clearingartikel {\nclear: both;\noverflow: hidden;\ncolor: black;\nbackground-color: lightsteelblue;\npadding: 5px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\n}\n\n.bildlinks {\nfloat: left;\nmargin-top: 5px;\nmargin-right: 15px;\nmargin-bottom: 5px;\nborder-style: solid;\nborder-width: 1px;\n}\n\n.bildrechts {\nfloat: right;\nmargin-top: 5px;\nmargin-right: 15px;\nmargin-bottom: 5px;\nborder-style: solid;\nborder-width: 1px;\n}\n\nhr {\ncolor: red;\n}\n\nspan {\nbackground-color: red;\n}\n} \/* Ende von @media nicht l\u00f6schen *\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c09_spalte3.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\n#spalte3 {\nposition: absolute;\ntop: 97px;\nright: 5px;\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\nborder-style: none;\nborder-color: black;\nborder-width: 1px;\npadding-top: 0px;\npadding-right: 0px;\npadding-bottom: 0px;\npadding-left: 10px;\nwidth: 225px;\ncolor: white;\nbackground-color: white;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\n\n#spalte3 article {\noverflow: hidden;\ncolor: white;\nbackground-color: seagreen;\nmargin: 0px;\npadding: 5px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\n}\n\n#spalte3 a:link {\ncolor: white;\nbackground-color: seagreen;\ndisplay: block;\ntext-decoration: none;\n}\n\n#spalte3 a:visited {\ncolor: white;\nbackground-color: steelblue;\ndisplay: block;\ntext-decoration: none;\n}\n\n#spalte3 a:hover {\nbackground-color: white;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\n#spalte3 a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\n#spalte3 a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c10_topnavigation.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\n#topnavigation {\nposition: absolute;\ntop: 50px;\nleft: 300px;\nheight: 20px;\nbackground-color: seagreen;\ncolor: black;\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: none;\nborder-right-style: none;\nborder-bottom-style: none;\nborder-left-style: none;\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\n#topnavigation li {\ndisplay: inline;\nlist-style-type: none;\npadding: 3px;\n}\n\n#topnavigation a:link {\ncolor: seagreen;\nbackground-color: white;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n\n#topnavigation a:visited {\ncolor: seagreen;\nbackground-color: white;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n\n#topnavigation a:hover {\ncolor: black;\nbackground-color: white;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n\n#topnavigation a:focus {\ncolor: seagreen;\nbackground-color: white;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n\n#topnavigation a:active {\ncolor: seagreen;\nbackground-color: white;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n\n\/* Gestaltung der zweiten Ebene*\/\n\n#topnavigation ul li ul {\nposition: absolute;\ndisplay: inline;\ntop: 15px;\nleft: 320px;\nwidth: 250px;\n\nlist-style-type: none;\npadding: 3px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c11_naviblox.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\n#naviblox01 {\nposition: absolute;\ntop: 175px;\nleft: 5px;\nwidth: 210px;\nbackground-color: seagreen;\ncolor: white;\npadding: 10px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c12_spalte1.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nnav {\nposition: absolute;\ntop: 97px;\nleft: 0px;\n\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 0px;\n\nborder-style: none;\nborder-color: black;\nborder-width: 1px;\n\npadding-top: 0px;\npadding-right: 0px;\npadding-bottom: 0px;\npadding-left: 10px;\n\nwidth: 225px;\ncolor: white;\nbackground-color: white;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\nnav article {\noverflow: hidden;\ncolor: white;\nbackground-color: seagreen;\nmargin: 0px;\npadding: 5px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\n}\n\nnav li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}\n\nnav a:link {\ncolor: seagreen;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:visited {\ncolor: seagreen;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:hover {\nbackground-color: white;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:focus {\ncolor: seagreen;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:active {\ncolor: seagreen;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n