{"id":1540,"date":"2024-07-22T08:00:00","date_gmt":"2024-07-22T06:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=1540"},"modified":"2025-05-27T13:54:18","modified_gmt":"2025-05-27T11:54:18","slug":"webdesign-centerboxed-2-version-4","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2024\/07\/22\/webdesign-centerboxed-2-version-4\/","title":{"rendered":"Centerboxed 2 Version 4"},"content":{"rendered":"\n

Das zweispaltige Centerboxed Layout bekommt nun einen vertikalen Klick-Dropdown\u2026<\/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 acht CSS Dateien. Die erste Datei nennen wir \u201c01_zentrale.css\u201c und die restlichen Dateien nennen wir so wie in der zentralen CSS Datei 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<\/head>\n\n<body>\n\n<div id=\"wrapper\"> \n\n<header> \n<\/header> \n\n<nav>\n\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\n<br \/>\n\n<article>\n<h1>Update:<\/h1>\n<p>\nPlatzhalter f\u00fcr Inhalt\n<\/p>\n<\/article>\n<br \/>\n\n<article>\n<h1>Centerbox 2 V4:<\/h1>\n<p>\n<\/p>\n<\/article>\n<br \/>\n\n<\/nav> \n\n\n<main> \n\n<article>\n<h1>Centerboxed 2 Version 4 mit Klick Dropdown vertikal:<\/h1>\n<p>\nArtikeltext einf\u00fcgen...\n<\/p>\n<\/article>\n<br \/>\n\n<\/main> \n\n<\/div> \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_navigation.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\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;\nfont-family: Arial, Verdana, Helvetica, sans-serif;\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 {\nposition: relative;\nmargin-top: 10px;\nmargin-right: auto;\nmargin-bottom: 10px;\nmargin-left: auto;\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\nbackground-color: wheat; \nwidth: 900px;\n}\n<\/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 {\nheight: 80px;\nbackground: url(sbheader2.jpg);\ncolor: white;\nbackground-color: goldenrod;\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} \/* 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 {\nnav {\nposition: absolute;\ntop: 107px;\nleft: 5px;\nwidth: 210px;\nbackground-color: goldenrod;\n\nmargin-top: 0px;\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\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: chocolate;\ncolor: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:focus {\ncolor: black;\nbackground-color: wheat;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nh1 {\nfont-size: 140%;\n}\n\nh2 {\nfont-size: 130%;\n}\n\nh3 {\nfont-size: 110%;\n}\n\nh4 {\nfont-size: 100%;\n}\n\nh5 {\nfont-size: 90%;\n}\n\nh6 {\nfont-size: 80%;\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: goldenrod;\ncolor: white;\n\nmargin-top: 3px;\nmargin-right: 5px;\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#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: wheat;\npadding: 5px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\n}\n \n\n.clearingtext {\nclear: both;\nbackground-color: wheat;\n}\n\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\nh1 {\nfont-size: 140%;\n}\n\nh2 {\nfont-size: 130%;\n}\n\nh3 {\nfont-size: 110%;\n}\n\nh4 {\nfont-size: 100%;\n}\n\nh5 {\nfont-size: 90%;\n}\n\nh6 {\nfont-size: 80%;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n
Webdesign Gruppe Peine:<\/strong><\/p>\n\n\n\n
Wer sich f\u00fcr HTML, CSS und PHP und alle anderen Webtechnologien interessiert, ist in der Webdesign-Gruppe-Peine genau richtig. Wenn Du Lust hast mitzumachen, dann melde dich einfach beim Fuhselab.<\/p>\n\n\n\n
Weitere interessante Webartikel zum Thema Webdesign gibt es auf der Fuhselab<\/a> Webseite und in der Artikel\u00fcbersicht 2022<\/a> und der Artikel\u00fcbersicht 2023<\/a>.<\/p>\n\n\n\n
58<\/td>Webdesign Flex 2 Version 1<\/a><\/td>15.01.2024<\/td><\/tr>
59<\/td>Webdesign Flex 2 Version 2<\/a><\/td>29.01.2024<\/td><\/tr>
60<\/td>Webdesign Flex 2 Version 3<\/a><\/td>12.02.2024<\/td><\/tr>
61<\/td>Webdesign Flex 2 Version 4<\/a><\/td>26.02.2024<\/td><\/tr>
62<\/td>Webdesign Flex 2 Version 5<\/a><\/td>04.03.2024<\/td><\/tr>
63<\/td>Webdesign Artikel\u00fcbersicht<\/a><\/td>08.04.2024<\/td><\/tr>
64<\/td>Webdesign <\/a>Flex 2 Version 6<\/a><\/td>22.04.2024<\/td><\/tr>
65<\/td>Webdesign Flex 2 Version 7<\/a><\/td>06.05.2024<\/td><\/tr>
66<\/td>Webdesign Flex 3 Version 1<\/a><\/td>13.05.2024<\/td><\/tr>
67<\/td>Webdesign Flex 3 Version 2<\/a><\/td>20.05.2024<\/td><\/tr>
68<\/td>Webdesign Flex 3 Version 3<\/a><\/td>27.05.2024<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Das zweispaltige Centerboxed Layout bekommt nun einen vertikalen Klick-Dropdown\u2026<\/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-1540","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\/1540","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=1540"}],"version-history":[{"count":3,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/1540\/revisions"}],"predecessor-version":[{"id":2813,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/1540\/revisions\/2813"}],"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=1540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=1540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=1540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}