{"id":2622,"date":"2025-09-15T08:00:00","date_gmt":"2025-09-15T06:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=2622"},"modified":"2025-04-14T09:13:19","modified_gmt":"2025-04-14T07:13:19","slug":"2wrapper-version-3","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2025\/09\/15\/2wrapper-version-3\/","title":{"rendered":"2Wrapper Version 3"},"content":{"rendered":"\n


Der 2Wrapper bekommt mit Version 3 einen vertikalen Hover-Dropdown\u2026<\/p>\n\n\n\n\n\n\n\n

Vorbereitungen:<\/strong><\/p>\n\n\n\n

Die Vorbereitungen sollten schon aus den vergangenen Artikeln und Layouts bekannt sein. Wir erstellen die \u201cindex.html\u201c und in einem zweiten Schritt erstellen wir den Ordner \u201c01_CSS\u201c und darin erstellen wir die f\u00fcr dieses Projekt ben\u00f6tigten CSS Dateien.<\/p>\n\n\n\n

Der HTML Quelltext:<\/strong><\/p>\n\n\n\n

<!doctype html>\n<html lang=\"de\">\n\n<head>\n  <title>Webdesign Workshop<\/title>\n  <link rel=\"stylesheet\" href=\"01_CSS\/01_zentrale.css\" type=\"text\/css\" \/>\t\n<\/head>\n\n<body>\n\n<div id=\"wrapper\">\n\n<header>\n<\/header>\n\n<div id=\"wrapper2\">\n<nav>\n\n<ul>\n   <li id=\"startseite\"><a href=\"index.html\">Startseite<\/a><\/li>\n   <li id=\"archiv\"><a href=\"archiv.html\">Archiv<\/a>\n\n      <ul>\n        <li id=\"0001\"><a href=\"0001.html\">0001<\/a><\/li>\n        <li id=\"0002\"><a href=\"0002.html\">0002<\/a><\/li>\n        <li id=\"0003\"><a href=\"0003.html\">0003<\/a><\/li>\n        <li id=\"0004\"><a href=\"0004.html\">0004<\/a><\/li>\n      <\/ul>\n   <\/li>\n   <li id=\"impressum\"><a href=\"impressum.html\">Impressum<\/a><\/li>\n<\/ul>\n\n<\/nav>\n\n<main>\n\n<article>\n<h1>2Wrapper Version 3 mit Hover Dropdown vertikal:<\/h1>\n<p>\nWebartikel f\u00fcr 2Wrapper Version 3 mit Hover Dropdown vertikal... \n<\/p>\n<\/article>\n<br \/>\n\n\n<\/main> <!-- Ende Textbereich -->\n<\/div> <!-- Ende Wrapper2 Bereich -->\n<\/div> <!-- Ende wrapper Bereich -->\n\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_2wrapper.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.jpg);\nbackground-repeat: no-repeat;\nbackground-color: cornflowerblue;\n\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\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
@media all {\n\nnav {\nposition: absolute;\ntop: 100px;\nleft: 10px;\nwidth: 210px;\nbackground-color: cornflowerblue;\npadding: 10px;\nborder-style: solid;\nborder-color: black;\nborder-width: 0px;\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\nnav li {\nlist-style-type: none;\npadding: 3px; \n}\n\nnav a:link {\ncolor: white;\nbackground-color: steelblue;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\nborder-style: solid;\nborder-width: 1px;\nborder-color: black;\n}\n\nnav a:visited {\ncolor: white;\nbackground-color: steelblue;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\nborder-style: solid;\nborder-width: 1px;\nborder-color: black;\n}\n\nnav a:hover {\nbackground-color: lightskyblue;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\nborder-style: solid;\nborder-width: 1px;\nborder-color: black;\n}\n\nnav a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\nborder-style: solid;\nborder-width: 1px;\nborder-color: black;\n}\n\nnav a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\nborder-style: solid;\nborder-width: 1px;\nborder-color: black;\n}\n\n\/* Ab hier soll jetzt die zweite Ebene der Hover-Dropdown-Navigation gestaltet werden *\/\n\nnav li ul {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n}\n\nnav li:hover ul {\nleft: 10px;\ntop: auto;\ndisplay: block;\nwidth: 210px;\nheight: auto;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/\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 {\ncolor: white;\nbackground-color: cornflowerblue;\npadding: 20px;\nborder-style: solid;\nborder-color: cornflowerblue;\nborder-width: 1px;\nmargin-top: 3px;\nmargin-right: 5px;\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*\/<\/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: lightsteelblue;\npadding: 5px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\nbackground: linear-gradient(to right, white, lightskyblue); \n}\n\n.clearingtext {\nclear: both;\nbackground-color: lightsteelblue;\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} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n

Der CSS Code f\u00fcr die Datei \u201c09_2wrapper.css\u201c:<\/strong><\/p>\n\n\n\n
#wrapper2 {\nmargin: 5px;\npadding: 3px;\nbackground-color: cornflowerblue;\n}<\/code><\/pre>\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\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Der 2Wrapper bekommt mit Version 3 einen vertikalen Hover-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-2622","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\/2622","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=2622"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2622\/revisions"}],"predecessor-version":[{"id":2623,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2622\/revisions\/2623"}],"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=2622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=2622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=2622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}