Nach T-Style 2 Version 1 kommt T-Style 2 Version 2 und genau darum geht es in diesem Artikel…
Vorbereitungen:
In einem ersten Schritt erstellen wir eine einfache Textdatei und nennen sie “index.html“. In einem zweiten Schritt erstellen wir den Ordner “01_CSS“ und darin erstellen wir zehn CSS Dateien. Die erste Datei nennen wir “01_zentrale.css“ und die restlichen Dateien nennen wir so wie in der zentralen CSS Datei und in diesem Artikel angegeben.
Wir können uns die Dateien auch einfach aus dem letzten Projekt (T-Style 2 Version 1) kopieren und ändern nur die Navigation.
Der HTML Quelltext:
<!doctype html>
<html lang="de">
<head>
<title>Webdesign Workshop</title>
<link rel="stylesheet" href="01_CSS/01_zentrale.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="seite02.html">Seite 2</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>T-Style 2 Version 1 mit Tab Navigation horizontal:</h1>
<p>
Dies ist das Layout T-Style 2 Version 1 mit Tab Navigation horizontal...
</p>
</article>
<br />
<div id="spalte1"> <!-- Anfang von Spalte 1 -->
<article>
<h1> T-Style 2 mit Tab Navigation horizontal:</h1>
<p>
Dies ist Artikel 2 in Spalte 1 in einem zweispaltigem Bereich...
</p>
</article>
<br />
</div>
<div id="spalte2">
<article>
<h1>T-Style 2 mit Tab Navigation horizontal:</h1>
<p>
Hier könnte Text stehen...
</p>
</article>
<br />
<article>
<h1>Überschriftt:</h1>
<p>
Text des Artikels...
</p>
</article>
<br />
<article>
<h1>Überschrift:</h1>
<p>
Text des Artikels...
</p>
</article>
<br />
</div>
<article>
<h1>T-Style 2 Version 1 mit Tab Navigation horizontal:</h1>
<p>
Dies ist das Layout T-Style 2 Version 1 mit Tab Navigation horizontal...
</p>
</article>
<br />
</main> <!-- Ende Textbereich -->
</div>
</body>
</html>
Der CSS Code für die Datei “06_navigation.css“:
@media all {
nav {
position: absolute;
top: 30px;
left: 245px;
background-color: darkorange;
color: white;
padding: 10px;
border-style: none;
border-color: black;
border-width: 1px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
font-family: Arial;
font-size: smaller;
}
nav li {
display: inline;
list-style-type: none;
padding: 3px;
}
nav a:link {
color: black;
background-color: white;
display: inline;
text-decoration: none;
padding: 3px;
}
nav a:visited {
color: black;
background-color: white;
text-decoration: none;
}
nav a:hover {
color: white;
background-color: red;
text-decoration: none;
}
nav a:focus {
color: black;
background-color: white;
text-decoration: none;
}
nav a:active {
color: black;
background-color: white;
text-decoration: none;
}
/* Gestaltung der verschachtelten Navigationsliste */
nav ul li ul {
display: inline; /* block oder inline-Element*/
position: absolute;
list-style-type: none;
padding: 3px;
top: 30px;
left: 100px;
width: 210px;
}
nav ul li ul a:link {
color: black;
background-color: white;
display: inline;
text-decoration: none;
padding: 3px;
}
nav ul li ul a:visited {
color: black;
background-color: white;
display: inline;
text-decoration: none;
padding: 3px;
}
nav ul li ul a:hover {
background-color: blue;
color: black;
display: inline;
text-decoration: none;
padding: 3px;
}
nav ul li ul a:focus {
color: black;
background-color: white;
display: inline;
text-decoration: none;
padding: 3px;
}
nav ul li ul a:active {
color: black;
background-color: white;
display: inline;
text-decoration: none;
padding: 3px;
}
} /* Ende von @media nicht löschen*/
Die Navigation auf Seite 2 (archiv.html):
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="archiv.html">Archiv</a>
<ul>
<li><a href="0001.html">0001</a></li>
<li><a href="0002.html">0002</a></li>
<li><a href="0003.html">0003</a></li>
<li><a href="0004.html">0004</a></li>
</ul>
</li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>