CSS-FAQ

ID #1029

Jeder kennt sie, die einfache Liste. Normalerweise nimmt man sie nur für Aufzählungen. Man kann sie aber auch als Navigation nutzen und dabei steht einem frei ob die Liste vertikal (so wie immer) oder horizontal erscheinen soll.

Nehmen wir ein einfaches Beispiel anhand einer einfachen Liste:

Home

Sitemap

Kontakt

Als erstes sollten wir die Punkte vor jedem Link wegbekommen.
Dies erreichen wir wie folgt:

ul {

	list-style-type: none;

	}

Um den Rand wegzubekommen fügen wir noch

margin:0px;

padding:0px;

hinzu.

Jetzt können wir die Liste eigentlich verlinken. Das sieht dann so aus:

<li><a href="./">Home</a></li>


<li><a href="./">Sitemap</a></li>


<li><a href="./">Kontakt</a></li>

Wenn wir uns die Seite im Browser angucken finden wir 2 normale Links die untereinander angeordnet sind.

Jetzt kommt aber der wirkliche Spannende Teil. Die Formatierung:

ul {

		list-style-type: none;

		margin:0px;

		padding:0px;

	}

	ul li {

		padding:1px;

	}

	ul li a {

	   display:block;

	   width:70px;

	   color:black;

	   text-decoration: none;

	   padding:4px;

	}

	ul li a:link, ul li a:active {

		border:1px solid black;

	}

	ul li a:hover {

		background:red;

	}

ist der vollständige Code. Nehmen wir die einzelnen Teile mal auseinander:

ul li {

		padding:1px;

	}

gibt an, dass die Listenpunkte an jeder der 4 Seiten 1 Pixel Abstand haben sollen.
Wenn man in diesem Fall einfach 0px angibt, dann stoßen die Seiten der Listenelemente aneinander.

ul li a {

	   display:block;

	   width:70px;

	   color:black;

	   text-decoration: none;

	   padding:4px;

	}

formatiert den Link. Es gibt an, dass das Listenelement, in dem der Link drin ist, genau 70px breit sein soll.
Der Link hat eine schwarze Farbe und keine Unterstreichung. Ausserdem wird durch dieses padding:4px; erreicht, dass der Rand des Links immer 4px an allen Seiten vom Inhalt entfernt ist.

ul li a:link, ul li a:active {

		border:1px solid black;

	}

gibt an, dass der gesamte Link (dessen Breite wie vorher definiert 70px beträgt) einen 1px dicken schwarzen Rand erhält.

ul li a:hover {

		background:red;

	}

sorgt dafür, dass der Link rot hinterlegt wird wenn man mit der Maus drüber fährt.

Wenn man das Grundprinzip erstmal verstanden hat, dann ist es ganz einfach, eine ordentliche Navigation hinzubekommen, die zwar auf einer Liste basiert, aber nicht mehr so aussieht.

Bewertung der Nützlichkeit dieses Artikels:

Durchschnittliche Bewertung: 3 (8 Abstimmungen)

vollkommen überflüssig 1 2 3 4 5 sehr wertvoll

Artikel zu kommentieren.

Name:
E-Mail:
Eingegebener Kommentar:

Bitte die Zeichen der Captcha-Grafik eingeben