✔ Navigationsleiste mit Images

[zerix]

Hallo,

ich habe leider hierzu nichts gefunden.

Ich möchte eine horizontale Navigationsleiste bauen, die zwischen zwei anderen Elementen befindet.

Ich habe für die Links keine Texte definiert, möchte aber per CSS Images zuweisen.

Wenn ich nur das Image und die Größe zuweise, dann wird kein Image angezeigt, weil die Links dann keine Größe haben.
Wenn ich dann

display: block;

für die Links definiere, dann werden die Links nicht mehr nebeneinander dargestellt, sondern untereinander.

Der Browser ist der Internet Explorer 6

<div class="Header">
<p class="top" />
<h1 class="Header" id="header"></h1>
<h2></h2>

<p class="left" />
<ul class="links">
	<li><a href="Home.html" class="Home"></a></li>
	<li><a href="AboutMe.html" class="AboutMe"></a></li>
	<li><a href="Contact.html" class="Contact"></a></li>
</ul>
<p class="right" />
</div>

@CHARSET "ISO-8859-1";

div.Header p.top{
	margin: 0;
	background-image: url("../images/header-head.gif");
	height: 58px;
}

div.Header p{
 	margin: 0;	
}

div.Header h1.Header{
	background-image: url("../images/header-right.png");
	width: 376px;
	height: 90px;
	margin: 0;
	float: right;
}

div.Header h2{
	background-image: url("../images/header-left.png");
	width: 378px;
	height: 90px;
	margin: 0;
	float: left;
	
}

div.Header ul{
	margin: 0;	
	height: 90px;
}

div.Header li{

	display: inline;	
	list-style: none;
	margin: 0;
}

div.Header a{

	display: block;
	width: 82px;
	height: 90px;
	text-decoration: none;
	margin: 0;
	
}

div.Header a.Home{
	background-image: url("../images/home.gif");
	background-repeat: no-repeat;
}

div.Header a.AboutMe{
	background-image: url("../images/aboutme.gif");
	background-repeat: no-repeat;
}

div.Header a.Contact{
	background-image: url("../images/contact.gif");
	background-repeat: no-repeat;
}

MFG

Sascha

 

[Maik]

Hi,

verwende mal anstelle von display:block die float:left-Deklaration, mit der das Inline-Element ebenfalls "Block-Level-Charakteristika" erhält, aber nebeneinander ausgerichtet wird, und so eine Breiten- / Höhenangabe annimmt.

 

[zerix]

Danke dir. Das hat geholfen, nachdem ich dann noch den 3-Pixel-Bug an 2 Stellen behoben hab.

MFG

Sascha

 

[Maik]

Danke dir. Das hat geholfen, nachdem ich dann noch den 3-Pixel-Bug an 2 Stellen behoben hab.

Stimmt, dieser taucht im IE6 immer dann auf, wenn das umfliessende Element eine Höhendeklaration besitzt