nicht angemeldet
IE 6 will nicht überlappen
Hi,
ich habe mir gedacht Bilder sagen mehr als 1000 Worte, deswegen schaut euch doch bitte das Bild unten an. Dort seht ihr welchen Kummer der IE mir bereitet.
http://www.bilder-space.de/show.php?file=JiX8qiQpfZeMZ29.jpg
Der CSS Code:
/*
################### CSS contents ###################
* 1 Layout
* 2 Navigation
* 3 Typography
* 4 Links
*/
/*
################### Colour reference ###################
#000000 Schwarz
#414041 Dunkelgrau
#5e5e5e Hellgrau
#5e0e01 Dunkelbraun
#ffffff Weiß
#2a78d1 Hellblau
#3d7c40 Grün
#f10ac9 Pink
#fe7d00 Hellorange
*/
/*
################### Layout ###################
*/
body {margin:0;}
.navigationwrapper {background-color:#414041;border-bottom:3px solid #5e0e01;border-top:4px solid #5e5e5e;height:30px;}
.navigationcontainer {margin:0 auto;width:1000px;}
.container {margin:0 auto;width:1000px;}
/*
################### Navigation ###################
*/
.navigation {list-style-type:none;margin:0 0 0 77px;}
.navigation li {float:left;width:148px;}
.navigation li.home {border-bottom:3px solid #2a78d1;}
.navigation li.wissen {border-bottom:3px solid #3d7c40;}
.navigation li.nuetzlich {border-bottom:3px solid #f10ac9;}
.navigation li.merken {border-bottom:3px solid #fe7d00;}
/*
################### Typography ###################
*/
body {color:#000000;font-family:Arial, Helvetica, sans-serif;font-size:14px;}
.navigation li {text-align:center;}
/*
################### Links ###################
*/
.navigation li a {color:#ffffff;display:block;font-size:16px;font-weight:bold;height:30px;line-height:30px;text-decoration:none;}
.navigation li.home a.active {background-color:#2a78d1;}
.navigation li.wissen a.active {background-color:#3d7c40;}
.navigation li.nuetzlich a.active {background-color:#f10ac9;}
.navigation li.merken a.active {background-color:#fe7d00;}
.navigation li a:hover {background-color:#5e5e5e;color:#ffffff;}
.navigation li.home a:hover.active {background-color:#2a78d1;}
.navigation li.wissen a:hover.active {background-color:#3d7c40;}
.navigation li.nuetzlich a:hover.active {background-color:#f10ac9;}
.navigation li.merken a:hover.active {background-color:#fe7d00;}
Der 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>Unbenanntes Dokument</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
</head>
<body>
<div class="navigationwrapper">
<div class="navigationcontainer">
<ul class="navigation">
<li class="home"><a class="active" href="#">HOME</a></li>
<li class="wissen"><a href="#">WISSEN</a></li>
<li class="nuetzlich"><a href="#">NÜTZLICH</a></li>
<li class="merken"><a href="#">MERKEN</a></li>
</ul>
</div>
</div>
<div class="container">
Hier kommt noch mehr!
</div>
</body>
</html>
-
Gib mal die feste Höhe auch den li-Tags und nicht nur dem enthaltenen Link - das sollte Dein Problem eigentlich beseitigen. Ansonsten empfehle ich die Lektüre von Position is everything
Gruß, LX
--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes-
Gib mal die feste Höhe auch den li-Tags und nicht nur dem enthaltenen Link - das sollte Dein Problem eigentlich beseitigen. Ansonsten empfehle ich die Lektüre von Position is everything
Gruß, LX
Leider hat das nicht funktioniert.Tatsächlich habe ich es geschafft, dass sich beide Flächen überlappen. Ich habe dazu dem .navigationcontainer ein position:absolute hinzugefügt. Allerdings ist der Navigations div dann viel zu weit rechts.
Ohne dieses Problem gelöst zu haben komme ich nicht weiter...
-