Centerboxed 3 bekommt jetzt eine Tab-Navigation und so entsteht Version 2 eines zentrierten, dreispaltigen Layouts\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 neun 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 Wie w\u00e4re es mit Copy and Paste?<\/strong><\/p>\n\n\n\n Wir k\u00f6nnen es uns aber auch einfach machen und kopieren einfach die gesamte Version 1 und \u00e4ndern nur die CSS Datei f\u00fcr die Navigation.<\/p>\n\n\n\n Der HTML Quelltext:<\/strong><\/p>\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<!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\" \/>\t\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\">Gesamt\u00fcbersicht<\/a><\/li>\n <li><a href=\"index.html\">Startseite<\/a><\/li>\n<\/ul>\n\n<\/nav>\n\n<main>\n\n<article>\n<h1>Centerboxed 3 Version 2:<\/h1>\n<p>\nWillkommen auf der Webseite f\u00fcr Centerboxed 3 Version 2.\n<\/p>\n<\/article>\n<br \/>\n\n<\/main> \n\n<div id=\"spalte3\">\n\n<article>\n<h1>Update:<\/h1>\n<p>\nDatum\n<\/p>\n<\/article>\n<br \/>\n\n<\/div>\n<\/div> <!-- Ende vom wrapper-Bereich -->\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;\n\nwidth: 210px;\nbackground-color: goldenrod;\ncolor: white;\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\nfont-family: Arial;\nfont-size: smaller;\n}\n\nnav li {\nlist-style-type: none;\ndisplay: block;\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} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n