In diesem Artikel wird das Flex 3 Layout mit Hover Dropdown horizontal in der HTML5 Version erstellt…<\/p>\n\n\n\n\n\n\n\n
Vorbereitungen:<\/strong><\/p>\n\n\n\n In einem ersten Schritt erstellen wir eine einfache Textdatei und nennen sie \u201cindex.html\u201c. In einem zweiten Schritt erstellen wir den Ordner \u201c01_CSS\u201c und darin erstellen wir die CSS Dateien so wie in der zentralen CSS Datei angegeben<\/p>\n\n\n\n Der HTML Quelltext:<\/strong><\/p>\n\n\n\n Der CSS Code f\u00fcr die Datei \u201c01_zentrale.css\u201c:<\/strong><\/p>\n\n\n\n Der CSS-Code f\u00fcr die Datei \u201c02_fundament.css\u201c:<\/strong><\/p>\n\n\n\n Der CSS-Code f\u00fcr die Datei „03_body.css“:<\/strong><\/p>\n\n\n\n Der CSS-Code f\u00fcr die Datei „04_wrapper.css“:<\/strong><\/p>\n\n\n\n Der CSS-Code f\u00fcr die Datei „05_kopfbereich.css“:<\/strong><\/p>\n\n\n\n Der CSS-Code f\u00fcr die Datei „06_navigation.css“:<\/strong><\/p>\n\n\n\n Der CSS-Code f\u00fcr die Datei „07_textbereich.css“:<\/strong><\/p>\n\n\n\n Der CSS-Code f\u00fcr die Datei „08_artikel.css“:<\/strong><\/p>\n\n\n\n Der CSS-Code f\u00fcr die Datei „09_aside.css“:<\/strong><\/p>\n\n\n\n Der CSS-Code f\u00fcr die Datei „10_spalte3.css“:<\/strong><\/p>\n\n\n\n R\u00fcckblick und Ausblick:<\/strong><\/p>\n\n\n\n Vom Webdesign Flex 3 gab es in den letzten Wochen sieben verschiedene Versionen und hier nochmal der R\u00fcckblick was uns diese Layouts so lieferten\u2026:<\/p>\n\n\n\n Flex 3 Version 1 = Basisnavigation<\/p>\n\n\n\n Flex 3 Version 2 = Tab-Navigation vertikal<\/p>\n\n\n\n Flex 3 Version 3 = Tab-Navigation horizontal<\/p>\n\n\n\n Flex 3 Version 4 = Klick-Dropdown vertikal<\/p>\n\n\n\n Flex 3 Version 5 = Klick-Dropdown horizontal<\/p>\n\n\n\n Flex 3 Version 6 = Hover-Dropdown vertikal<\/p>\n\n\n\n Flex 3 Version 7 = Hover-Dropdown horizontal<\/p>\n\n\n\n Ab der n\u00e4chsten Woche geht es mit einem neuen Layout weiter und da es auf zentrierten Boxen basiert nennen wir es Centerboxed…<\/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\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" In diesem Artikel wird das Flex 3 Layout mit Hover Dropdown horizontal in der HTML5 Version erstellt…<\/p>\n","protected":false},"author":1,"featured_media":545,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-1466","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\/1466","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=1466"}],"version-history":[{"count":4,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/1466\/revisions"}],"predecessor-version":[{"id":2798,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/1466\/revisions\/2798"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/545"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=1466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=1466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=1466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!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\"> <!-- Anfang vom wrapper-Bereich -->\n\n<header> <!-- Anfang vom header-Element -->\n<nav> <!-- Anfang vom nav-Element -->\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 <ul>\n <li id=\"01\"><a href=\"01.html\">Seite 01<\/a><\/li>\n <li id=\"02\"><a href=\"02.html\">Seite 02<\/a><\/li>\n <li id=\"03\"><a href=\"03.html\">Seite 03<\/a><\/li>\n <li id=\"04\"><a href=\"04.html\">Seite 04<\/a><\/li>\n <\/ul>\n <\/li>\n <li id=\"impressum\"><a href=\"impressum.html\">Impressum<\/a><\/li>\n<\/ul>\n\n<\/nav> <!-- Ende vom nav-Element -->\n\n<\/header> <!-- Ende vom header-Element -->\n\n<aside>\n\n<article>\n<h1>Text des Tages:<\/h1>\n<p>\nText des Artikels...\n<\/p>\n<\/article>\n<br \/>\n\n<\/aside>\n\n<main>\n\n<article>\n<h1>Datum - \u00dcberschriftl:<\/h1>\n<p>\nArtikeltext...\n<\/p>\n<\/article>\n<br \/>\n\n<\/main> <!-- Ende vom main-Element -->\n\n<div id=\"spalte3\"> <!-- Anfang von Spalte 3 -->\n\n\n<article>\n<h1>Spalte 3:<\/h1>\n<p>\nText des Artikels...\n<\/p>\n<\/article>\n<br \/>\n\n<\/div> <!-- Ende von Spalte 3 -->\n\n\n<footer> <!-- Anfang vom footer-Element -->\n<\/footer> <!-- Ende vom footer-Element -->\n\n<\/div> <!-- Ende vom wrapper-Bereich -->\n\n<\/body>\n<\/html><\/code><\/pre>\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_kopfbereich.css);\n@import url(06_navigation.css);\n@import url(07_textbereich.css);\n@import url(08_artikel.css);\n@import url(09_aside.css);\n@import url(10_spalte3.css);<\/code><\/pre>\n\n\n\n@media all {\n\n\/*\nDiese Datei dient nur dem Reset. Padding und margin werden auf null gesetzt.\n*\/\n\n* {\npadding: 0;\nmargin: 0;\n}\n\nhtml {\nheight: 101%;\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n@media all {\n\nbody {\nbackground-color: white;\ncolor: black;\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n@media all {\n\n#wrapper {\nmargin: 5px;\nbackground-color: white;\ncolor: black;\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n@media all {\n\nheader {\nheight: 80px;\nbackground-image: url(..\/cpm-header01.jpg);\nbackground-repeat: no-repeat;\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: 5px;\npadding-right: 5px;\npadding-bottom: 5px;\npadding-left: 5px;\n\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n@media all {\n\nnav {\nposition: absolute;\ntop: 30px;\nleft: 245px;\n\n\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: 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\/* 02 Die ungeordnete Liste in Ebene 1 gestalten*\/\n\nnav ul {\nmargin: 0px;\n}\n\nnav li {\nfloat: left;\nwidth: auto;\nlist-style: none;\nmargin: 5px; \n}\n\n\/* Liste in Ebene 2 clearen *\/\nnav li li {\nclear: both;\n}\n\n\/* 03 Die Hyperlinks in Ebene 1 gestalten *\/\n\nnav a {\ndisplay: block; \nbackground-color: white; \ncolor: black;\ntext-decoration: none;\npadding: 0.4em 1em;\nmargin: 0px; \n}\n\nnav a:hover,\nnav a:focus,\n#startseite #navi01 a,\n#seite02 #navi02 a,\n#seite0201 #navi02 a,\n#seite03 #navi03 a,\n#seite0302 #navi03 a,\n#kontaktseite #navi04 a {\ncolor: black;\nbackground-color: lightsteelblue; \nborder-bottom: none;\n}\n\n\n\/* Spezifit\u00e4t auf \u00fcber 225 erh\u00f6hen - war urspr\u00fcnglich nur #navibereich a:active *\/\n#wrapper nav #ebene01 li a:active {\ncolor: white;\nbackground-color: #d90000;\n}\n\n\/* 04 Ebene 2 verstecken *\/\n\nnav li ul {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\ndisplay: inline;\nwidth: 0px;\nheight: 0px;\nbackground-color: transparent;\n}\n\n\/* 05 Ebene 2 beim hovern wieder sichtbar machen *\/\n\nnav li:hover ul {\nleft: auto;\ntop: auto;\ndisplay: block;\nwidth: auto;\nheight: auto;\nbackground-color: steelblue;\nborder-bottom: 2px solid steelblue;\n}\n\n\/* 06 Rausklappliste korrekt einf\u00e4rben und Hover-Verhalten f\u00fcr die zweite Ebene *\/\n\n\/* Spezifit\u00e4t 214 *\/\nnav ul#ebene01 ul.ebene02 li a {\nbackground-color: red;\n}\n\n\/* Spezifit\u00e4t 224 *\/\nnav ul#ebene01 ul.ebene02 li a:hover {\nbackground-color: red;\n}\n\n\/* Feste Breite f\u00fcr die Hyperlinks in Ebene 2 *\/\nnav li li a {\nwidth: 8em; \n}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n@media all {\n\nmain {\n\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 3px;\nmargin-right: 241px;\nmargin-bottom:5px;\nmargin-left: 241px;\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}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\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;\n\n}\n\n.clearingtext {\nclear: both;\nbackground-color: lightsteelblue;\n}\n\n\n.bildlinks {\nfloat: left;\nmargin-top: 5px;\nmargin-right: 15px;\nmargin-bottom: 5px;\nmargin-left: 0px;\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; \/* dashed ergibt eine gestrichelte Rahmenlinie*\/\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n}\n\n.bildrechts {\nfloat: right;\nmargin-top: 5px;\nmargin-left: 15px;\nmargin-bottom: 5px;\nborder-style: solid;\nborder-width: 1px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n@media all {\n\naside {\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\naside li {\nlist-style-type: none;\n}\n\naside a:link {\ncolor: white;\nbackground-color: goldenrod;\ndisplay: block;\ntext-decoration: none;\n}\n\naside a:visited {\ncolor: white;\nbackground-color: goldenrod;\ndisplay: block;\ntext-decoration: none;\n}\n\naside a:hover {\nbackground-color: chocolate;\ncolor: white;\ndisplay: block;\ntext-decoration: none;\n}\n\naside a:focus {\ncolor: black;\nbackground-color: wheat;\ndisplay: block;\ntext-decoration: none;\n}\n\naside a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\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: solid;\nborder-color: black;\nborder-width: 1px;\npadding-top: 10px;\npadding-right: 10px;\npadding-bottom: 10px;\npadding-left: 10px;\nwidth: 210px;\ncolor: white;\nbackground-color: steelblue;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n