** C H R I S K I Z Z M Y S U N » .. Kopf aus

Navigationen

Vorraussetzungen

HTML Grundkenntnisse und ein eigenes Layout

Einfach nur ganz normale Links in die Navigation einfügen? Sieht oftmals leider nicht sehr schön aus. Deshalb zeige ich euch, wie ihr eure Navigationen stylen könnt.
Ihr braucht nur einen Code, den ihr im Head Bereich eures Layouts einfügt, zwischen < style> und < /style>.
Der Code für die Navigation ist dieser:

Die Erklärung:
A.navi:link, A.navi:active, A.navi:visited: Eigenschaften der Navigations Links, im normalen Zustand
A.navi:hover: Eigenschaften der Navigations Links, wenn man mit der Maus drüber fährt
display: block: Die Navigation wird untereinander aufgereiht
padding-right: Abstand vom Content
color: Schriftfarbe
font-family: Schriftart
font-size: Schrift Grösse
background-color: Hintergrund Farbe
margin-bottom: Abstand von der Navigations Links
border-bottom: Unterer Rand des Links
border-left: Linker Rand des Links
border-right: Rechter Rand des Links
border-top: Oberer Rand des Links
letter-spacing: Abstand der Buchstaben text align: Ausrichtung des Links
line-height: Linien Höhe des Navigations Links

Ihr müsst im Code zwischen 2 Teilen unterscheiden, der eine ist der Link im normalen Zustand, also wie er immer zu sehen ist. Der andere fängt beim A.navi:hover an. Dieser Bereich ist der, wenn man mit der Maus über einen Link fährt.
Ihr könnt alles verändern, wie ihr möchtet, wenn ihr z.B. alle Links großbuchstabig anzeigt werden, müsst ihr noch ein text-transform:uppercase; hinzufügen. Genauso ist es mit dem Rand, ihr könnt ihn normal (solid), gepunktet (dotted) oder gestrichelt (dashed) machen.
Der Link kann ein Hintergrund bekommen (statt background-color: #000000; einfach background: url('URL DES HG BILDES'); einfügen), kursiv (font-style: italic;) oder dick (font-weight: bold;) werden.
Probiert es einfach mal aus ^.^

Wollt ihr diese Navigations Links nun benutzen, braucht ihr diesen Code:

Statt Navigations Titel tragt ihr natürlich Home, Gästebuch etc. ein, je nachdem wie der Link heißen soll ^.~
Habt ihr nun eine Navigation mit 5 Punkten, sollte euer Code so aussehen:

In einem anderen Tutorial (Klick) könnt ihr nachlesen, wie man Boxen erstellt. Wollt ihr die Navigations Links also in einer Box, braucht ihr so einen Code:

Wenns noch Fragen gibt, schreibt sie mir ins Askme :}

(Copyright by Chriskizzmysun, kopieren ist strikt untersagt!)

Welcome here

× View with IE • Firefox ×
Willkommen auf meinem Blog, auf dem ich über meinen Alltag & alles was mich bewegt blogge. Viele verschiedene Themen, wie es mir grad in den Sinn kommt. Über Feedback freue ich mich & bei Gefallen, verfolgt meinen Blog mithilfe verschiedener Funktionen. Have Fun!