Home » Web » CSS Beispiel: Navigation
- Anzeige -
Software Asset Management beim Fachmann

CSS Beispiel: Navigation

CSS Beispiel 1: Eine einfache Navigation basteln

Fast alle Webseiten brauchen eine Navigation. Diese besteht zumeinst aus einer einfachen Liste, die mit CSS richtig schön zurecht formatiert wird. Dabei sind tolle Effekte möglich, die weit über das hinausgehen, was Sie in dieser Webseite sehen.

In diesem Artikel bauen wir uns das Schritt für Schritt zusammen. Auch hier gilt: Strenge Trennung von Inhalt und Layout. Keine Tricks mit Tabellen u. a.

Wir beginnen mit folgendem Code.

index.html


	<!DOCTYPE html> 
		<html> 
		 <head>
		  <title>Menu</title>
		  <meta charset="utf-8" />
		  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		 </head>
		 <body>
		 <div id="navigation">
			<ul>
				<li>
					<a href="index.htm" title="Home">Home</a>
				</li>
				<li>
					<a href="blog.htm" title="Blog">Blog</a>
				</li>
				<li>
					<a href="impressum.htm" title="Home">Impressum</a>
				</li>
			</ul>
		 </div>
		 </body>
		</html>

style.css

	body
	{
	  font-family: Verdana, Sans-Serif, Arial, Helvetica;  
	  background: #C0C0C0;
	}

	h1,
	h2,
	h3
	{
	  font-size: 18px;
	  padding: 0;
	  margin: 0;
	  color: #004F9D;
	  margin-bottom: 10px;
}

Das Ergebnis sieht weniger überraschend so aus:

Sollte Sie das Ergebnis doch überraschen, dann schauen Sie sich vorher bitte den Artikel HTML 5 Einsteiger Tutorial an.

Wir ergänzen jetzt in das Stylesheet:

#navigation ul {
	list-style: none;
}
list-style: none;
Entfernt die Aufzählungszeichen

Unser (angehendes) Menü ist noch nicht arg schön.

#navigation li {
	float: left;
}
float: left;
Mit float: left auf die Liste werden die Listenpunkte nebeneinander dargestellt.
#navigation a {
	display: block;
	padding: 5px 10px 5px;
}
display: block;
Hiermit wird definiert, dass die Elemente Blöcke sind.
padding: 5px 10px 5px;
Innenabstand nach oben (erster Wert), nach Links und rechts (zweiter Wert) und nach unten (dritter Wert).

Das Ergebnis erinnert nun schon viel deutlicher an ein Menü:

Im nächsten Schritt ergänzen wir das CSS noch weiter:

#navigation a {
	display: block;
	padding: 5px 10px 5px;
	background: lightgray;
	text-decoration: none;
}

#navigation a:hover, #navigation li.active a {
	background: blue;
	color: white;
}
background: lightgray;
Den Hintergrund der Menütaste setzen wir auf Hellgrau.
text-decoration: none;
Hiermit entfernen wir den Strich unter dem Link.
background: blue;
Wir setzen für den Fall, dass sich die Maus über der Taste befindet (Hover), oder der Link gewählt ist (active), den Hintergrund auf dunkelblau.
color: white;
Wir setzen für den Fall, dass sich die Maus über der Taste befindet (Hover), oder der Link gewählt ist (active), die Textfarbe auf weiss.

Nun sieht das ganze schon sehr nach einem Menü aus:

Damit das ganze noch etwas mehr nach Homepage aussieht, können wir das auch noch weiter ausbauen:

index.html


<!DOCTYPE html> 
	<html> 
	 <head>
	  <title>Menu</title>
	  <meta charset="utf-8" />
	  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	 </head>
	 <body>
	 <div id="navigation">
		<ul>
			<li>
				<a href="index.htm" title="Home">Home</a>
			</li>
			<li>
				<a href="blog.htm" title="Blog">Blog</a>
			</li>
			<li>
				<a href="impressum.htm" title="Home">Impressum</a>
			</li>
		</ul>
	 </div>
	 <div id="main">
		<h1>Überschrift</h1>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>   
			<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
			<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer.</p>		
	</div>
	 </body>
	</html>

style.css

body
{
  font-family: Verdana, Sans-Serif, Arial, Helvetica;  
  background: #C0C0C0;
}

h1,
h2,
h3
{
  font-size: 18px;
  padding: 0;
  margin: 0;
  color: #004F9D;
  margin-bottom: 10px;
}

/*
div {	
	border: 1px solid black;
}
*/

#navigation ul {
	list-style: none;
	padding-left: 0px;
}

#navigation li {
	float: left;

}

#navigation a {
	display: block;
	padding: 0px 20px 0px;
	background: lightgray;
	text-decoration: none;
}

#navigation a:hover, #navigation li.active a {
	background: blue;
	color: white;
}


#navigation
{
	height: 27px;
	background-color: lightgrey;
	font-size: 20px;
	font-weight: heavy;
	width: 900px;
	margin: auto;
}

#main
{ 
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px; 
    min-height: 400px;
	background: white;
	color: black;
	width: 860px;
	margin: auto;
	
}

Sieht schon fast nach einer Homepage aus, oder?

Tipp: Probleme mit den DIVs?

Tun Sie sich mit den DIVs schwer? Ergänzen Sie einfach temporär folgendes im Stylsheet:


div {	
	border: 1px solid black;
}

Damit wird um alle DIVs ein Rahmen gelegt.

Tipp: DIVs nicht gleich breit trotz gleicher whith?

Vergessen Sie nie das Box-Modell. Die width + padding-left und pading-right ergibt die tatsächliche Breite. Haben Sie auch noch margin gesetzt, addiert sich dieser ebenfalls dazu.

Margin
Aussenabstand, also der Abstand zum nächsten Objekt.
Padding
Innenabstand, also z.B. der Abstand vom Text im DIV zum Rand.

CSS Beispiel 2: Navigation verbessern

Beim dem obigen Beispiel fällt negativ auf, dass wir das Menü nicht bündig an eine möglicherweise umgebende DIV-Box ausrichten können.

Dies ist der Fall, weil wir das <li>-Tag floaten. Besser geht es mit inline.

index.html

	<!DOCTYPE html> 
		<html> 
		 <head>
		  <title>Menu</title>
		  <meta charset="utf-8" />
		  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		 </head>
		 <body>
		 
		 <div id="top">
			<h1>Top</h1>
		</div>
		
	
		 <div id="navcontainer">
			<span>
			<ul>
				<li>
					<a href="index.htm" title="Home">Home</a>
				</li>
				<li>
					<a href="blog.htm" title="Blog">Blog</a>
				</li>
				<li>
					<a href="impressum.htm" title="Home">Impressum</a>
				</li>
			</ul>
			</span>
		 </div>
	
	
		 </body>
		</html>

style.css

body
{
  font-family: Verdana, Sans-Serif, Arial, Helvetica;  
  background: #C0C0C0;
}

h1,
h2,
h3
{
  font-size: 18px;
  padding: 0;
  margin: 0;
  color: #004F9D;
  margin-bottom: 10px;
}


#top
{
	width: 1000px;
	margin: auto;
	border: 1px solid black;
}

#navcontainer 
{
	width: 1000px;
	margin: auto;
	border: 1px solid black;
}

#navcontainer ul
{
	border: 1px solid black;
	margin: 0px; /*setzen an den äussersten Rand*/
	padding: 0px; /*setzen an den äussersten Rand*/
	list-style-type: none;
	color: white;
	background-color: black;
}

#navcontainer ul li
{
	display: inline; /*besser als float - gefloatete Listen bekommt man mit CSS nicht an den äussersten Rand*/
}

#navcontainer ul li a
{
	text-decoration: none;
	padding: .2em 1em;
}

#navcontainer ul li a:hover
{
	background-color: white;
	color: black;
}

Das Ergebnis sieht dann so aus:

- Buchempfehlung -

Wenn Sie schon ein paar HTML-Kenntnisse habe, ist das ein tolles Buch. Es sollte aber Seite für durchgearbeitet werden und ist kein Nachschlagewerk.

Eigentlich recht einfach, gefunden bei css.maxdesign.com.au.



War der Artikel hilfreich? Ich freue mich sehr über Likes, Shares oder Links von Deiner Website darauf. Danke Dir.

it-zeugs.de ist auch auf Facebook...

Schreibe einen Kommentar - aber kein SPAM - der wird zuverlässig gefiltert!

  • Erforderliche Felder sind markiert mit *.

If you have trouble reading the code, click on the code itself to generate a new random code.