Assets

HTML-Code

Publizieren

Externe Seiten

Zentrieren

Sichere Seite

Kontaktformular

Hotspot

Vorlage erstellen

Codeschnipsel


 

TUT für eine CSS Listennavigation.

Vorteil:
Der Vorteil liegt auf der Hand. Einmal den HTML Teil erstellen und einmal den CSS Code erstellen.
Das Aussehen der Navigation wird allein durch die CSS Style erstellt.
Der HTML Teil wird einfach in den HTML Teil eines Textfeldes eingebunden!

Der HTML Teil:
Es müssen zwei HTML Teile erstellt werden. Einmal für die Index; und einmal für die Unterseiten.
Dies hat folgenden Grund.
Verzweigt man von der Startseite auf eine Unterseite, dann ist man im Ordner HTML.
Eine erneute Verzweigung in eine Unterseite geht so nicht, da man sich ja bereits im Ordner HTML befindet. Der Link aber auf /html verzweigt. Dies hat dann zur Folge, dass im Browser dann /html/html stehen würde und dies der Browser nicht finden kann, da nicht vorhanden!
Aus diesem Grunde müssen zwei HTML Teile erstellt werden!

WICHTIG! Die Einträge in den Listen müssen mit den Ordner von NOF übereinstimmen!

Der HTML Teil für die Index:

<div class="navcontainer">
<ul class="navlist">
<li><a href="/index.html" title="Startseite">Startseite</a></li>
<li><a href="html/wir.html" title="Über uns">Über uns</a></li>
<li><a href="html/leistungen.html" title="Leistungen">Leistungen</a></li>
<li><a href="html/referenzen.html" title="Referenzen">Referenzen</a></li>
<li><a href="html/agb.html" title="AGB">AGB</a></li>
<li><a href="html/kontakt.html" title="Kontakt">Kontakt</a></li>
<li><a href="html/buerozeiten.html" title="Bürozeiten">Bürozeiten</a></li>
<li><a href="html/impressum.html" title="Impressum">Impressum</a></li>
<li><a href="html/anfahrt.html" title="Anfahrt">Anfahrt</a></li>
</ul>
</div>

Der HTML Teil für die Unterseiten:

<div class="navcontainer">
<ul class="navlist">
<li><a href="../index.html" title="Startseite">Startseite</a></li>
<li><a href="wir.html" title="Über uns">Über uns</a></li>
<li><a href="leistungen.html" title="Leistungen">Leistungen</a></li>
<li><a href="referenzen.html" title="Referenzen">Referenzen</a></li>
<li><a href="agb.html" title="AGB">AGB</a></li>
<li><a href="kontakt.html" title="Kontakt">Kontakt</a></li>
<li><a href="buerozeiten.html" title="Bürozeiten">Bürozeiten</a></li>
<li><a href="impressum.html" title="Impressum">Impressum</a></li>
<li><a href="anfahrt.html" title="Anfahrt">Anfahrt</a></li>
</ul>
</div>

Der CSS Teil, der das Aussehen der Navigation definiert ( Vertikal ):

.navcontainer { width: 150px }

.navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Verdana;
font-size: 10px
}

.navcontainer a
{
display: block;
padding: 3px;
width: 190px;
background-color: transparent;z-index:2;
border-bottom: 1px solid #eee
}

.navcontainer a:link{
color: #000;
text-decoration: none
}

 .navlist a:visited
{
color: #9e0d15;
text-decoration: none
}

P {
font-size: 10px
}.navcontainer a:hover
{
background-color: #eeeeee;
color: #000
}
 

Hier der CSS Code für eine Horizontale Navigation ( Die HTML Teile bleiben gleich ):

.navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

.navlist li
{
display: inline;
list-style-type: none;
}

.navlist a { padding: 3px 10px; }

.navlist a:link, .navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

.navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}


Zur Verbindung:
Der erste Eintrag im HTML Teil <div class="navcontainer">
Verzweigt auf den CSS Eintrag .navcontainer { width: 150px }

Der Eintrag width: 150px ist für die Breite der eigentlichen Navigation.

Der Rest des CSS Code ist selbsterklärend, wenn man sich schon mal mit einer CSS Textnavigation auseinandergesetzt hat!

Der CSS Code wird in den CSS Code in der Design-Ansicht in NOF eingefügt.

Warum 2 HTML Teile:
Wenn von der Index auf eine Unterseite verzweigt wird, ist man bereits in dem Verzeichnis html. Ohne den zweiten HTML Teil würden die Unterseiten nicht gefunden.

Probiert es einfach mal aus.
Ändert mal den Eintrag transparent in einen HEX Wert. Ändert den Solid Eintrag.
Dies ist nur ein Vorschlag. Ändern kann man so ziemlich alles.
Farben, Länge, Mit oder ohne Rahmen usw.

Viel Spaß
Euer Dozi

Nach oben