In diesem Artikel wird aus der Basis-Navigation eine horizontale Tab-Navigation…
Der Weg zur horizontalenTab-Navigation:
Die Tab Navigation horizontal erfordert nun die ersten Anpassungen im HTML Quelltext und auch in der CSS-Datei.
Die erste Anpassung soll jetzt die ungeordnete Liste in den Kopfbereich positionieren.
<header> <!-- Anfang vom header-Element -->
<nav> <!-- Anfang vom nav-Element -->
<ul>
<li><a href="../../index.html">Startseite</a></li>
<li><a href="../../index.html">Startseite</a></li>
</ul>
</nav> <!-- Ende vom nav-Element -->
</header> <!-- Ende vom header-Element -->Wie man im HTML Quelltext erkennt, wurde die Liste komplett in den header-Bereich gesetzt.
Der nav-Bereich wurde also in den header-Bereich verschachtelt.
Außerdem wurde in diesem Projekt auch ein aside-Bereich eingeführt für die linke Spalte.
<aside>
<article>
<h3>Letztes Update:</h3>
<p>
Dies ist der aside-Bereich...
</p>
</article>
<br />
</aside>Die Verschachtelung ist aber nicht die einzige Möglichkeit den Navigationsbereich in den Kopfbereich zu positionieren.
<header> <!-- Anfang vom header-Element -->
</header> <!-- Ende vom header-Element -->
<nav> <!-- Anfang vom nav-Element -->
<ul>
<li><a href="../../index.html">Startseite</a></li>
<li><a href="../../index.html">Startseite</a></li>
</ul>
</nav> <!-- Ende vom nav-Element -->Der CSS-Code für die Verschachtelung der Navigation:
Die CSS-Datei für die erste Variante sieht so aus:
nav {
position: absolute;
top: 30px;
left: 245px;
width: 210px;
background-color: steelblue;
color: white;Der CSS Code für die Navigation ohne Verschachtelung:
Die CSS-Datei für diese zweite Variante, also ohne Verschachtelung sieht so aus:
nav {
position: absolute;
top: 30px; /* am 14.07.2014 geändert von 97 auf 30 Pixel */
left: 245px; /* am 14.07.2014 geändert von 5 auf 245 Pixel */
/* am14.07.2014 geändert - width entfernt*/
background-color: steelblue;
color: white;Nach aktuellem Wissenstand würde ich eher die Lösung bevorzugen die header und nav-Bereich nicht verschachtelt und einfach nur per CSS die jeweilige Box positioniert.