nicht angemeldet
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>