Hallo!
Ich bin relativ unerfahren in der Formatierung von Homepages mit CSS. Nun habe ich eine horizontale Menüleiste eingebunden, wo ein Rand auftritt, den ich mir nicht erklären kann...
Der Rand befindet sich rechts des grünen Auswahlfeldes, innerhalb des provisorischen Rahmens. Ich weiß nicht wie ich diesen weg bekomme.
Der HTML-Code sieht noch ganz einfach so aus:
HTML
<body>
<div id="container">
<div id="header_outer">
<div id="header"><img src="images/logo.png"></img></div>
</div>
<div id="wrapper">
<ul id="navigation-3">
<li><a href="homepage.php" class=" active">Startseite</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
</ul>
<div id="login">Zum Login</div>
</div>
<div id="content_outer">
<div id="content">
Bedeutete es in ... usw.
</div>
</div>
</div>
</body>Das CSS File dazu sieht folgendermaßen aus:
Code
body,html{
margin: 0;
padding: 0;
background-image: url('../images/background.gif');
background-color: gray;
background-repeat: repeat;
font: normal 16px Helvetica, Arial, sans-serif;
}
div#header_outer {
/*background-color: none;*/
height: 160px;
width: 860px;
margin: auto;
}
div#header {
padding: 10px;
text-align: center;
}
div#container {
position: absolute;
margin-left: -430px;
margin-top: -300px;
top: 50%;
left: 50%;
width: 860px;
height: 600px;
background-color: white;
}
#wrapper {
width: 800px;
margin: auto auto 20px 30px;
float: left;
border: 1px solid red;
padding: 0;
}
#navigation-3 li {
background: #676f7a url(nav-bg.jpg) bottom left repeat-x;
border-left: 1px solid #707F90;
border-right: 1px solid #3C444D;
float: left;
list-style-type: none;
}
#navigation-3 li a {
color: #DFE1E2;
float: left;
padding: 10px 20px;
text-decoration: none;
}
#navigation-3 li a:hover {
background: #5d91da url(nav-bg-2.jpg) bottom left repeat-x;
color: #fff;
text-decoration: underline;
}
#navigation-3 li a.active {
background: #6aec7c url(nav-bg-3.jpg) bottom left repeat-x;
color: #fff;
text-decoration: underline;
}
#navigation-3 li.start {
border-left: 0;
}
#navigation-3 li.ende {
border-right: 0;
}
div#content_outer {
clear: both;
width: 800px;
margin: 20px auto;
border: 1px solid black;
height: 300px;
overflow: scroll;
}
div#content {
margin: 15px;
}
#login{
padding: 10px;
float: right;
background: #676f7a url(nav-bg.jpg) bottom left repeat-x;
color: white;
border-left: 1px solid #707F90;
border-right: 1px solid #3C444D;
}Ich denke mal, dass die Antwort nicht allzu schwer sein dürfte. Für mich als Leihen ist dieser Abstand allerdings unerklärlich.
mfg Philip