{"id":2302,"date":"2025-02-03T08:00:00","date_gmt":"2025-02-03T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=2302"},"modified":"2025-01-08T08:08:30","modified_gmt":"2025-01-08T07:08:30","slug":"t-style-2-version-1","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2025\/02\/03\/t-style-2-version-1\/","title":{"rendered":"T-Style 2 Version 1"},"content":{"rendered":"\n<p><br>Es geht mit einem neuen Layout weiter und diese Woche ist es T-Style 2 Version 1 mit Tab Navigation horizontal\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Vorbereitungen:<\/strong><\/p>\n\n\n\n<p>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 zehn CSS Dateien. Die erste Datei nennen wir \u201c01_zentrale.css\u201c und die restlichen Dateien nennen wir so wie in der zentralen CSS Datei und in diesem Artikel angegeben.<\/p>\n\n\n\n<p><strong>Der HTML Quelltext:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!doctype html>\n&lt;html lang=\"de\">\n\n&lt;head>\n   &lt;title>Webdesign Workshop&lt;\/title>\n   &lt;link rel=\"stylesheet\" href=\"01_CSS\/01_zentrale.css\" type=\"text\/css\" \/>\n&lt;\/head>\n\n&lt;body>\n\n&lt;div id=\"wrapper\"> \n\n&lt;header> \n   &lt;nav>\n   &lt;ul>\n   &lt;li>&lt;a href=\"index.html\">Startseite&lt;\/a>&lt;\/li>\n   &lt;li>&lt;a href=\"seite02.html\"> Seite 2&lt;\/a>&lt;\/li>\n   &lt;\/ul>\n   &lt;\/nav> \n&lt;\/header> \n\n&lt;main> \n\n&lt;article>\n&lt;h1>T-Style 2 Version 1 mit Tab Navigation horizontal:&lt;\/h1>\n&lt;p>\nDies ist das Layout T-Style 2 Version 1 mit Tab Navigation horizontal... \n&lt;\/p>\n&lt;\/article>\n&lt;br \/>\n\n&lt;div id=\"spalte1\">\t&lt;!-- Anfang von Spalte 1 -->\n&lt;article>\n&lt;h1> T-Style 2 mit Tab Navigation horizontal:&lt;\/h1>\n&lt;p>\nDies ist Artikel 2 in Spalte 1 in einem zweispaltigem Bereich...\n&lt;\/p>\n&lt;\/article>\n&lt;br \/>\n&lt;\/div>\n\n&lt;div id=\"spalte2\">\n\n&lt;article>\n&lt;h1>T-Style 2 mit Tab Navigation horizontal:&lt;\/h1>\n&lt;p>\nHier k\u00f6nnte Text stehen...\n&lt;\/p>\n&lt;\/article>\n&lt;br \/>\n\n&lt;article>\n&lt;h1>\u00dcberschriftt:&lt;\/h1>\n&lt;p>\nText des Artikels...\n&lt;\/p>\n&lt;\/article>\n&lt;br \/>\n\n&lt;article>\n&lt;h1>\u00dcberschrift:&lt;\/h1>\n&lt;p>\nText des Artikels...\n&lt;\/p>\n&lt;\/article>\n&lt;br \/>\n\n&lt;\/div>\n\n&lt;article>\n&lt;h1>T-Style 2 Version 1 mit Tab Navigation horizontal:&lt;\/h1>\n&lt;p>\nDies ist das Layout T-Style 2 Version 1 mit Tab Navigation horizontal...\n&lt;\/p>\n&lt;\/article>\n&lt;br \/>\n\n&lt;\/main> &lt;!-- Ende Textbereich -->\n\n&lt;\/div>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c01_zentrale.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@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_spalte1.css);\n@import url(10_spalte2.css);<\/code><\/pre>\n\n\n\n<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c02_fundament.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@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<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c03_body.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\nbody {\ncolor: black;\nbackground-color: white;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c04_wrapper.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#wrapper {\nmargin: 0px;\nbackground-color: white;\n}<\/code><\/pre>\n\n\n\n<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c05_header.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\nheader {\n\nheight: 80px;\nbackground-image: url(..\/cpm-header01.gif);\nbackground-repeat: no-repeat;\nbackground-color: darkorange;\n\nmargin-top: 0px;\nmargin-right: 0px;\nmargin-bottom: 0px;\nmargin-left: 0px;\n\nborder-style: solid;\nborder-color: black;\nborder-top-width: 0px;\nborder-left-width: 0px;\nborder-right-width: 0px;\nborder-bottom-width: 1px;\n\npadding: 5px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c06_navigation.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\nnav {\nposition: absolute;\ntop: 30px;\nleft: 245px;\n\nbackground-color: darkorange;\ncolor: white;\npadding: 10px;\nborder-style: none;\nborder-color: black;\nborder-width: 1px;\nmargin-top: 5px;\nmargin-right: auto;\nmargin-bottom: 5px;\nmargin-left: auto;\n\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\nnav li {\ndisplay: inline;\nlist-style-type: none;\npadding: 3px;\n}\n\nnav a:link {\ncolor: black;\nbackground-color: white;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:visited {\ncolor: black;\nbackground-color: white;\n\ntext-decoration: none;\n}\n\nnav a:hover {\ncolor: white;\nbackground-color: red;\n\ntext-decoration: none;\n}\n\nnav a:focus {\ncolor: black;\nbackground-color: white;\n\ntext-decoration: none;\n}\n\nnav a:active {\ncolor: black;\nbackground-color: white;\n\ntext-decoration: none;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c07_content.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\nmain {\n\ncolor: white;\nbackground-color: darkorange;\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*\/<\/code><\/pre>\n\n\n\n<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c08_artikel.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@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: white;\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\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} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c09_spalte1.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\n#spalte1 {\nposition: absolute;\n\nwidth: 210px;\nbackground-color: darkorange;\n\npadding: 0px; \/* war 10px*\/\nborder-style: solid;\nborder-color: black;\nborder-width: 0px;\nmargin-top: 0px;\nmargin-right: 0px;\nmargin-bottom: 5px;\nmargin-left: 0px;\n}\n\n#spalte1 li {\nlist-style-type: none;\n}\n\n#spalte1 a:link {\ncolor: white;\nbackground-color: goldenrod;\ndisplay: block;\ntext-decoration: none;\n}\n\n#spalte1 a:visited {\ncolor: white;\nbackground-color: goldenrod;\ndisplay: block;\ntext-decoration: none;\n}\n\n#spalte1 a:hover {\nbackground-color: chocolate;\ncolor: white;\ndisplay: block;\ntext-decoration: none;\n}\n\n#spalte1 a:focus {\ncolor: black;\nbackground-color: wheat;\ndisplay: block;\ntext-decoration: none;\n}\n\n#spalte1 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<p><br><strong>Der CSS Code f\u00fcr die Datei \u201c10_spalte2.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\n#spalte2 {\ncolor: white;\nbackground-color: darkorange;\n\npadding: 0px; \/* war 10px *\/\nborder-style: solid;\nborder-color: black;\nborder-width: 0px;\nmargin-top: 0px;\nmargin-right: 0px; \/* war 241 Pixel  *\/\nmargin-bottom:5px;\nmargin-left: 241px; \n}\n\n#formular fieldset {\npadding: 10px;\n}\n\n#spalte2 a:link {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\n#spalte2 a:visited {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\n#spalte2 a:hover {\ncolor: black;\nbackground-color: white;\ntext-decoration: underline;\n}\n\n#spalte2 a:focus {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\n#spalte2 a:active {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Es geht mit einem neuen Layout weiter und diese Woche ist es T-Style 2 Version 1 mit Tab Navigation horizontal\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-2302","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\/2302","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=2302"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2302\/revisions"}],"predecessor-version":[{"id":2303,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2302\/revisions\/2303"}],"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=2302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=2302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=2302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}