Flex 2 Version 2<\/a> war bereits am 29.01.2024 Thema in einem Artikel. Allerdings hatte ich damals auf eine vollst\u00e4ndige Angabe des Quellcodes verzichtet. Dadurch sind allerdings einige Dinge nicht richtig klar geworden und deshalb gibt es hier jetzt den vollst\u00e4ndigen Quellcode f\u00fcr HTML und CSS.<\/p>\n\n\n\nIn einem ersten Schritt erstellen wir eine einfache Textdatei und nennen sie \u201cindex.html\u201c.<\/p>\n\n\n\n
In einem zweiten Schritt erstellen wir direkt daneben den Ordner \u201c01_CSS\u201c und darin die jeweiligen CSS Dateien wie hier nachfolgend angegeben.<\/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\" \/>\n<meta charset=\"UTF-8\"\/>\n<\/head>\n\n<body>\n\n<div id=\"wrapper\"> <!-- Anfang vom wrapper-Bereich -->\n\n<header> <!-- Anfang vom kopfbereich-Bereich -->\n<\/header> <!-- Ende vom kopfbereich-Bereich -->\n\n<nav> <!-- Anfang vom navibereich --> \n<ul>\n<li><a href=\"index.html\">Gesamt\u00fcbersicht<\/a><\/li> \n<li><a href=\"start.html\">Startseite<\/a><\/li> \n<\/ul> \n<\/nav> <!-- Ende vom navibereich -->\n\n<main> <!-- Anfang vom main-Bereich -->\n\n<article> \n<h1>Flex 2 Version 2<\/h1> \n<p> \nText des Artikels...\n<\/p> \n<\/article> \n<br \/>\n\n<\/main> <!-- Ende vom main-Bereich -->\n\n<footer> <!-- Anfang vom footer-Element -->\n<\/footer> <!-- Ende vom footer-Element -->\n<\/div> <!-- Ende vom wrapper-Bereich -->\n\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_kopfbereich.css);\n@import url(06_navibereich.css);\n@import url(07_textbereich.css);\n@import url(08_artikel.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*\/\n<\/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 {\nbackground-color: white;\ncolor: black;\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@media all {\n\n#wrapper {\nmargin: 5px;\nbackground-color: white;\ncolor: black;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c05_kopfbereich.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nheader {\n\nheight: 80px;\nbackground-image: url(..\/cpm-header01.jpg);\nbackground-repeat: no-repeat;\nbackground-color: steelblue;\ncolor: white;\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px;\nborder-left-width: 1px;\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\npadding-top: 5px;\npadding-right: 5px;\npadding-bottom: 5px;\npadding-left: 5px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/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;\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px;\nborder-left-width: 1px;\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\npadding-top: 10px;\npadding-right: 10px;\npadding-bottom: 10px;\npadding-left: 10px;\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;\npadding: 3px;\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} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c07_textbereich.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nmain {\nbackground-color: steelblue;\ncolor: white;\nmargin-top: 3px;\nmargin-right: 5px;\nmargin-bottom:5px;\nmargin-left: 241px;\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px;\nborder-left-width: 1px;\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\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}\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; \/* Grundeinstellung = lightsteelblue *\/\npadding: 5px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\n}\n\n.clearingtext {\nclear: both;\nbackground-color: lightsteelblue;\n}\n\n.bildlinks {\nfloat: left;\nmargin-top: 5px;\nmargin-right: 15px;\nmargin-bottom: 5px;\nmargin-left: 0px;\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px;\nborder-left-width: 1px;\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid; \/* dashed = gestrichelte Rahmenlinie*\/\nborder-left-style: solid;\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*\/\n<\/code><\/pre>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Flex 2 Version 2 macht aus Version 1 mit der Basis-Navigation eine vertikale Tab-Navigation\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-2991","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\/2991","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=2991"}],"version-history":[{"count":2,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2991\/revisions"}],"predecessor-version":[{"id":2993,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2991\/revisions\/2993"}],"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=2991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=2991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=2991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}