[css] horizontale Navigation + Balken

**kewlMan** · 10.07.2004 11:44

Hallo liebe CSS/HTML-Puristen,

ich arbeite gerade an einer CSS-Navigation. Unter der horizontalen Navigation befindet sich ein horizontaler Balken über 100%. Der obere Rahmen des des Balkens wird mit einem 1px gif erzeugt, Hintergrund des Containers #nav1. Eine bessere Idee hatte ich bisher nicht, um mein gewünschtes Ergebnis zu erreichen.

Weshalbt ich jetzt schreibe ist ein seltsamer Abstand des Divs #nav1 auf der rechten Seite. Zur verdeutlichung habe ich das DIV farblich hinterlegt. Hier ein Screenshot:

Im Einsatz seht ihr das ganze hier: http://roxea.de/dev/designs/dhc/

Ich frage mich wie es zu dieser Fehldarstellung kommt (Opera 7.5, Firefox 0.9, Netscape 7.1, IE 6 SP1). IE 5.5 & IE 5.01 zeigen das ganze so an, wie ich es gerne hätte ...

Hier die Quelltexte:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Testseite Navigation</title>
<link href="css/dhc.css" rel="stylesheet" type="text/css">
</head>
<body>

	<div id="wrapper">
		<div id="nav1">
			<div>
				<ul>
					<li><a href="#" title="Pfadfinder Bruch&ouml;bel" class="main">Pfadfinder Bruchk&ouml;bel</a></li>
					<li><a href="#" title="W&ouml;blflinge" class="woes">W&ouml;lflinge</a></li>
					<li><a title="Jungpfadfinder" class="jupfis">Jungpfadfinder</a></li>
					<li><a href="#" title="Pfadfinder" class="pfadis">Pfadfinder</a></li>
					<li><a href="#" title="Rover" class="rover">Rover</a></li>
				</ul>
			</div>
		</div>
		<div id="nav1bar" class="jupfis">
			<div class="jupfis"><img src="img/dpsgmember.gif" width="150" height="45" hspace="0" vspace="0"></div>
		</div>
	</div>

</body>
</html>

CSS:

Code:

body {
	margin: 20px;
	padding: 0px;
	font-size: 100%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#wrapper {
	width: 100%;
	position: relative;
}

#nav1 {
	width: 100%; 
	position: relative;
}

#nav1 div {
	background: url(../img/x.gif) transparent bottom left repeat-x;
    /* zu verdeutlichung Hintergrund leicht einfärben */
	background: url(../img/x.gif) #F0E68C bottom left repeat-x;
	width: 100%;
	height: 100%;
	float: left;
	position: relative;
}

#nav1 ul {
	margin: 0px;
	padding: 0px;
}

#nav1 li {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style: none;
	float: left;
}

#nav1 li a{
	display: block;
	margin: 0px;
	padding: 3px 20px 5px;
	font-size: .7em;
	border-left: 1px solid #333333;
}

#nav1 li a.main { border-bottom: 1px solid #7B7DBD; background: url(../img/reiter_main.gif) transparent no-repeat top right; }
#nav1 li a.woes { border-bottom: 1px solid #FF9A31; background: url(../img/reiter_woes.gif) transparent no-repeat top right; }
#nav1 li a.jupfis { border-bottom: 1px solid #0065FF; background: url(../img/reiter_jupfis.gif) transparent no-repeat top right; }
#nav1 li a.pfadis { border-bottom: 1px solid #319A31; background: url(../img/reiter_pfadis.gif) transparent no-repeat top right; }
#nav1 li a.rover { border-bottom: 1px solid #FF3031; background: url(../img/reiter_rover.gif) transparent no-repeat top right; }

#nav1 li a:link, #nav1 li a:visited {
	margin: 4px 0px 0px 0px;
	padding: 3px 20px 1px;
	border-bottom: 1px solid #333333;
	color: #000;
	text-decoration: none;
}

#nav1 li a:hover {
	margin: 0px;
	padding: 3px 20px 5px;
	color: #000;
}

#nav1bar {
	width: 100%;
	height: 21px;
	position: relative;
	clear: both;
	float: none;
	border-left: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-right: 1px solid #333333;
}

#nav1bar div {
    top: 10px;
    right: -1px;  
    position: absolute;
    display: none;
}

.clear {
	clear: both;
    float: none;
    height: 0px;
}

/**/
.main { background: #7B7DBD; }
.woes { background: #FF9A31; }
.jupfis { background: #0065FF; }
.pfadis { background: #319A31; }
.rover { background: #FF3031; }
/**/

**Terry** · 10.07.2004 12:41

Tja, den Fehler macht aber der IE5!

Boxmodell ist das Stichwort.....

**kewlMan** · 10.07.2004 12:51

Hi Terry,

danke für deine Antwort. Ich kenne den Box Model Bug und auch den entsprechenden Hack. Aber ich habe bei dem betroffenen div #nav1 weder margin, padding noch border und eine raltive Weite von 100%.

Das der IE 5.0 bzw. 5.5 die Fehldarstellung haben kann ich mir gut vorstellen - aber wo liegt der Fehler?

Ich habe noch eine Frage. Bei den IEs gibt es den Hover-Effekt erst wenn die Maus über dem Text ist, bei den braven Browsern bereits, wenn sich die Maus über einem Reiter befindet. Hat jemand einen Trick für mich? Wäre echt super.

Thx,
kewlMan

**Terry** · 10.07.2004 13:05

Und was ist das hier?:

#nav1bar {
width: 100%;
height: 21px;
position: relative;
clear: both;
float: none;
border-left: 1px solid #333333;
border-bottom: 1px solid #333333;
border-right: 1px solid #333333;
}

1px border left plus 1px border right=2px

Das Problem ist, dass Du das kaum ausschalten kannst, da Du nicht 100% - 2 px angeben kannst.

Du musst dann oben ebenfalls eine border (gleichfarbig) machen, damit es nicht auffällt.

Zur 2. Frage:

Du musst bei #nav li a noch entweder width oder height angeben, damit der IE die ganze Fläche hovert - frag nicht nach Logik, aber ist so.....

**kewlMan** · 10.07.2004 13:30

Hey Terry,

super danke! Wieder was gelernt.

zur Startseite vom TP

Thema: [css] horizontale Navigation + Balken

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

[css] horizontale Navigation + Balken

Ähnliche Themen

3 ebenen navigation schritt für schritt

Navigation im Framset

Datensatz Navigation

Für was ist der graue Balken in der Navigation neben Galerie

Tips und tricks zu Navigation?

Aktive Benutzer

Aktive Benutzer