nicht angemeldet
Hallo Leute,
ich bin zwar mit CSS vertraut, habe aber noch nie eine Webseite komplett im CSS aufgebaut, was ich jetzt gerade versuche.
Die Seite soll flexibel sein und sich von der Breite her an die Auflösung des Users anpassen.
Mein Problem ist, dass die Navigation im Firefox zentriert angezeigt wird und im IE6 grob auch, aber da kommen rechts immer ein paar Pixel dazu.
Kann mir jemand helfen. (Die Farben bitte nicht beachten, dient nur der Auseinanderhaltung von einzelnen Elementen.)
Hier ist der Quellcode:
<!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>
<style type="text/css">
/*Definition für 100% Höhe*/
html,body {
spacing:0;
height:100%;
font-family:Arial, Helvetica, sans-serif;
font-size: 100.01%;
font-weight:normal;
}
*{
margin: 0px;
padding: 0px;
}
/* Außenrahmen für gesamten Inhalt */
#container {
margin:0;
width:100%;
height:100%;
background-color:#cecece;
}
/* Container für eigentliche Seite */
#maincontainer {
margin: 0 auto;
width:80%;
height:100%;
background-color:#ffffff;
}
/*Logo-Schriftzug*/
#logo {
padding-top:1%;
padding-left:1.9%;
width:48%;
font-size:2.4em;
font-weight:bold;
float:left;
}
#logo .blue {
color:#216eba;
}
#logo .green {
color:#3cb52e;
}
/*Top-Navigation (Textlinks(*/
#topnav {
padding-right:2.1%;
padding-top:1%;
width:35%;
line-height:2em;
vertical-align:middle;
font-size:0.8em;
color:#216eba;
font-weight:bold;
text-align:right;
float:right;
}
#topnav a:link, #topnav a:active, #topnav a:visited{
font-size:0.9em;
color:#216eba;
font-weight:bold;
text-decoration:none;
}
#topnav a:hover {
font-size:0.9em;
color:#3cb52e;
font-weight:bold;
text-decoration:none;
}
/*Main Navigation - Navigationsleiste*/
#mainnavbar {
clear:both;
width:96%;
margin:auto;
background-color:#216eba;
}
#mainnavbar ul{
background-color:#FF0000;
display:block;
width:80%;
margin:0 auto;
text-align:center;
}
#mainnavbar li{
background-color: #99FF33;
display:inline;
padding:1%;
color:#ffffff;
font-weight:bold;
font-size:0.8em;
}
#mainnavbar .li{
background-color: #99FF33;
display:inline;
color:#ffffff;
padding-left:1%;
font-weight:bold;
font-size:0.8em;
}
</style>
</head>
<body>
<div id="container">
<div id="maincontainer">
<div id="logo">
<span class="blue">Einmalige-Geschenke</span><span class="green">.de</span>
</div>
<div id="topnav">
<a href="#">»Hilfe</a> <a href="a">»FAQs</a> <a href="#">»AGB</a> <a href="#">»Kontakt</a> <a href="#">»Impressum</a>
</div>
<br />
<br />
<br />
<br />
<div id="mainnavbar">
<ul>
<li>Startseite</li>
<li>Neue Geschenke</li>
<li>Geschenke Highlights</li>
<li>Anlässe</li>
<li >Alle Geschenkideen</li>
<li class="li">Warenkorb</li>
</ul>
</div>
</div>
</div>
</body>
</html>