Horizontale Navigation

**Zeitgenosse** · 26.07.2008 10:56

Hallo alle zusammen,

ich bin dabei mir eine einfache horizontale Navigation zu bauen.
Folgendes Problem tauchte auf:

Die Navi soll unter einem Hauptbild kleben, welches 900px breit ist. Es gibt 5 Navi-Button, welche alle gleichmäßig groß sein sollen. Des Weiteren soll die Gesamtbreite der Navileiste 750px betragen, d.h. sie ist links und rechts eingerückt. Und als Letztes soll der Home-Button auf der Home-Seite kein Hoover-Effekt aufweisen.
Ich stelle mal meine Code-Schnipsel rein. Vielleicht könnt Ihr mir mal helfen.
Danke.
Herzlich, Sven.

HTML-Code:

</head>
<body>
<div id="shortnavi">
	<ul id="shortnavi">
		<li><a href="impressum.html">Impressum</a></li>
	</ul>
</div>

<div id="header">
</div>

<div id="mainnavi">
	<ul>
		<li><a href="home.html">Home</a></li>
		<li><a href="aboutus.html">About us</a></li>
		<li><a href="product.html">Product</a></li>
		<li><a href="service.html">Service</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>
</div>

Code:

#header {	
	margin: 0 auto;
	width: 900px;
	height: 400px;
	background: url(PICS/BuchaufWiese.jpg);		
	border: 5px solid #FFFFFF;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	padding: 0px;
}


#mainnavi {
	background-position: center;
	margin: 0 auto;
	height: 50px;
	width: 900px;
}

	
#mainnavi ul {	
	list-style-type: none;
}

#mainnavi li {
	font-size: 16px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	display: inline;
}

#mainnavi a {
	color: #FFFFFF;
	text-decoration: none;
	padding: 0 20px;
	border: 1px solid #FFFFFF; 
}

#mainnavi a:hover {
	text-decoration: none;
	color: #0099FF;
	background-color: #FFFFFF;
}

**sejuma** · 26.07.2008 12:31

Code:

#header {
	margin: 0 auto;
	width: 900px;
	height: 400px;
	background: blue;
	border: 5px solid #FFFFFF;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	padding: 0px;
}


#mainnavi {
	background-position: center;
	margin: 0 auto;
	height: 50px;
	width: 900px;
}

ul, li {margin: 0; padding: 0;}

#mainnavi ul {
	list-style-type: none;
	width: 750px;
	margin: 0 auto;
}

#mainnavi li {
	font-size: 16px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	float: left;
}

#mainnavi a {
	color: #FFFFFF;
	text-decoration: none;
	padding: 0 20px;
	border: 1px solid #FFFFFF;
	display: block;
	width: 108px;
	text-align: center;
}

#mainnavi a:hover {
	text-decoration: none;
	color: #0099FF;
	background-color: #FFFFFF;
}

#nohover a:hover {
	color: #Fff;
}

Code:

<div id="shortnavi">
	<ul id="shortnavi">
		<li><a href="impressum.html">Impressum</a></li>
	</ul>
</div>

<div id="header">
</div>

<div id="mainnavi">
	<ul>
		<li id="nohover"><a href="home.html">Home</a></li>
		<li><a href="aboutus.html">About us</a></li>
		<li><a href="product.html">Product</a></li>
		<li><a href="service.html">Service</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>
<div style="clear: both;"></div>
</div>

Ggf. müsstest du dann noch Hintergrundgrafiken zuweisen.

**Zeitgenosse** · 26.07.2008 12:49

Hallo,
danke erst einmal. Der Home-Button wird jetzt bei mir aber doppelt angezeigt.
Irgend ein Detail ist hier noch unstimmig.
Danke.

Herzlich, Sven.

**Zeitgenosse** · 26.07.2008 12:52

Hallo,

Kommando zurück, habe in der HTML-Zeile den Home-Button gedoppelt.
Danke.
herzlich, Sven.

**Zeitgenosse** · 26.07.2008 14:48

Hallo,

ich habe dann doch noch eine Frage, damit ich das ganze auch nachvollziehen kann.

Wie kommt man den auf den Wert von width: 108px?
108px *5= 540, wie komme ich denn da auf die 750px?
Danke.
Herzlich, Sven.

**sejuma** · 26.07.2008 15:18

Schön dass du nachfragst, das fördert das Verständnis und vermeidet künftige Fehler.
Zu deiner Rechnung musst du nach dem CSS-Boxmodell noch folgendes von "#mainnavi a" hinzuzählen:

Padding links und rechts je 20px macht 5 * 40px = 200px
Border links und rechts je 1px macht 5 * 2px = 10px.

5 * (108 + 40 + 2) = 5 * 150 = 750

Die Gesamtbreite ergibt sich nach dem Boxmodell aus width + padding + border + margin

Boxmodell

**Zeitgenosse** · 27.07.2008 13:56

Hallo,

alles klar. Danke für Deine schnelle Antwort.

Herzlich, Sven.

zur Startseite vom TP

Thema: Horizontale Navigation

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Horizontale Navigation

Horizontale Navigation

Ähnliche Themen

Liste in Liste als doppelte Horizontale Navigation formatieren.

Horizontale Navigation gesucht...

horizontale Projekt/Bild Navigation

horizontale navigation der seite?

[css] horizontale Navigation + Balken

Aktive Benutzer

Aktive Benutzer