Nach T-Style 2 Version 1 kommt T-Style 2 Version 2 und genau darum geht es in diesem Artikel…<\/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 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 Wir k\u00f6nnen uns die Dateien auch einfach aus dem letzten Projekt (T-Style 2 Version 1) kopieren und \u00e4ndern nur die Navigation.<\/p>\n\n\n\n Der HTML Quelltext:<\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Nach T-Style 2 Version 1 kommt T-Style 2 Version 2 und genau darum geht es in diesem Artikel…<\/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-2316","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\/2316","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=2316"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2316\/revisions"}],"predecessor-version":[{"id":2317,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2316\/revisions\/2317"}],"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=2316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=2316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=2316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!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 <nav>\n <ul>\n <li><a href=\"index.html\">Startseite<\/a><\/li>\n <li><a href=\"seite02.html\">Seite 2<\/a><\/li>\n <\/ul>\n <\/nav> \n<\/header> \n\n<main> \n\n<article>\n<h1>T-Style 2 Version 1 mit Tab Navigation horizontal:<\/h1>\n<p>\nDies ist das Layout T-Style 2 Version 1 mit Tab Navigation horizontal... \n<\/p>\n<\/article>\n<br \/>\n\n<div id=\"spalte1\">\t<!-- Anfang von Spalte 1 -->\n<article>\n<h1> T-Style 2 mit Tab Navigation horizontal:<\/h1>\n<p>\nDies ist Artikel 2 in Spalte 1 in einem zweispaltigem Bereich...\n<\/p>\n<\/article>\n<br \/>\n<\/div>\n\n<div id=\"spalte2\">\n\n<article>\n<h1>T-Style 2 mit Tab Navigation horizontal:<\/h1>\n<p>\nHier k\u00f6nnte Text stehen...\n<\/p>\n<\/article>\n<br \/>\n\n<article>\n<h1>\u00dcberschriftt:<\/h1>\n<p>\nText des Artikels...\n<\/p>\n<\/article>\n<br \/>\n\n<article>\n<h1>\u00dcberschrift:<\/h1>\n<p>\nText des Artikels...\n<\/p>\n<\/article>\n<br \/>\n\n<\/div>\n\n<article>\n<h1>T-Style 2 Version 1 mit Tab Navigation horizontal:<\/h1>\n<p>\nDies ist das Layout T-Style 2 Version 1 mit Tab Navigation horizontal...\n<\/p>\n<\/article>\n<br \/>\n\n<\/main> <!-- Ende Textbereich -->\n\n<\/div>\n<\/body>\n<\/html><\/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: 30px;\nleft: 245px;\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;\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;\ntext-decoration: none;\n}\n\nnav a:hover {\ncolor: white;\nbackground-color: red;\ntext-decoration: none;\n}\n\nnav a:focus {\ncolor: black;\nbackground-color: white;\ntext-decoration: none;\n}\n\nnav a:active {\ncolor: black;\nbackground-color: white;\ntext-decoration: none;\n}\n\n\/* Gestaltung der verschachtelten Navigationsliste *\/\n\nnav ul li ul {\ndisplay: inline; \/* block oder inline-Element*\/\nposition: absolute;\nlist-style-type: none;\npadding: 3px;\ntop: 30px;\nleft: 100px;\nwidth: 210px;\n}\n\nnav ul li ul a:link {\ncolor: black;\nbackground-color: white;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav ul li ul a:visited {\ncolor: black;\nbackground-color: white;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav ul li ul a:hover {\nbackground-color: blue;\ncolor: black;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav ul li ul a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav ul li ul a:active {\ncolor: black;\nbackground-color: white;\ndisplay: inline;\ntext-decoration: none;\npadding: 3px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n
Die Navigation auf Seite 2 (archiv.html):<\/strong><\/p>\n\n\n\n<nav>\n<ul>\n<li><a href=\"index.html\">Startseite<\/a><\/li> \n<li><a href=\"archiv.html\">Archiv<\/a>\n<ul>\n<li><a href=\"0001.html\">0001<\/a><\/li> \n<li><a href=\"0002.html\">0002<\/a><\/li> \n<li><a href=\"0003.html\">0003<\/a><\/li> \n<li><a href=\"0004.html\">0004<\/a><\/li> \n<\/ul> \n<\/li> \n<li><a href=\"impressum.html\">Impressum<\/a><\/li> \n<\/ul> \n<\/nav><\/code><\/pre>\n\n\n\n