Listen Navigation

Verfasst von Alice am 16.03.2007 - wurde schon 14646 mal gelesen

Kategorie: Html/Css

Bewertung:

27x bewertet

Schwierigkeit: einfach
Kommentare: [ 0 ]

keine ...

Listen Navigation - Tutorial

Ich wurde gefragt wie ich meine Navigation erstellt habe,
so dass die Links ueber die komplette Zeile/Flaeche gehen.
Hier kommt also nun das gewuenschte Tutorial dazu ...

Vorab, meine Navigation basiert auf einer Liste.
Wie man Listen erstellt, kann man hier nachlesen.

Das ist also der Code fuer die Liste

Code:

<ul id="menu">
<li><a href="alice-grafixx.de" title="alice-grafixx">Home</a></li>
<li><a href="alice-grafixx.de" title="alice-grafixx">Links</a></li>
<li><a href="alice-grafixx.de" title="alice-grafixx">Kontakt</a></li>
<li><a href="alice-grafixx.de" title="alice-grafixx">Impressum</a></li>
<li><a href="alice-grafixx.de" title="alice-grafixx">Sontige Links</a></li>
</ul>

Das Element <ul> hat eine Id zugewiesen bekommen,
diese brauchen wir um das Aussehen der Liste mit einem Cascading Style Sheet(CSS) zu definieren.
Das CSS gehoert entweder in den <head> Bereich einer Webseite oder aber in eine Externe CSS-Datei.

Code:

#menu {
list-style: none;
width: 200px;
}

#menu a, #menu a:active, #menu a:visited {
background-color: #C8DEEB;
border: solid 1px #F0F0F0;
text-decoration: none;
display: block;
padding: 2px;
width:200px;
color: #fff;
}

#menu a:hover {
background-color: #fff;
color: #989898;
}

Der ID-Selektor #menu gibt die Breite der Navigation an,
zudem gibt er auch mit der Eigenschaft liste-style: none; an, dass keine typischen Listenpunkte angezeigt werden sollen.

Die ID-Selektor #menu a, #menu a:visited und #menu a:active geben die Eigenschaften der Links, die sich in der Liste befinden, an.
Mit background-color wird die Hintergrundfarbe des Links bestimmt,
mit border wird der Rahmen definiert,
text-decoration sagt aus ob der Link ueber-,unter- oder durchgestrichen ist, none ist nichts von all dem.

Wichtig ist die Eingenschaft display: block, denn sie ist dafuer verantwortlich,
dass der komplette <li> Tag als Link interpretiert wird.
Padding definiert den Abstand nach oben,unten,links und rechts...
Und color gibt die Farbe des Links an.

Der ID-Selektor #menu a:hover ist fuer das Aussehen eines Links, wenn man mit der Maus drueberfaehrt, zustaendig.

Wem das alles zu kompliziert ist, der macht es sich einfacher,
verzichtet auf eine Liste und nutz einfach nur den <a> Tag in herkoemmlicher Form.
Gibt diesem jedoch die Eigenschaft style="display:block" und schon ist der Link auch auf ganzer Linie anklickbar.

Code:

Kommentar schreibenHinterlasse einen Kommentar

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...