B
blizzart88
Guest
Ich muß euch mal wieder mit einem Problem nerven:
Ich bin gerade mit dem Layout per CSS einer Seite beschäftigt. Ich habe den Header (wo nachher das Logo sein wird), eine horizontale Navigation und darunter den Bereich für den Inhalt.
Im Inhaltscontainer soll noch mal eine vertikale Navigation sein, mit 20px Abstand nach oben und links zum Rand des Containers. Mit dem Abstand links klappt auch alles hervorragend, nur beim Abstand zum oberen Rand übernimmt der Container die 20px und sitzt jetzt frei unter der horizontalen Navigation.
Kann mir jemand helfen, ich kann keinen Fehler im CSS/Html erkennen.
Der CSS-Code:
und der HTML-Code
PS: Der Fehler taucht im Firefox 3.6 auf, mit anderen habe ich noch nicht getestet.
Ich bin gerade mit dem Layout per CSS einer Seite beschäftigt. Ich habe den Header (wo nachher das Logo sein wird), eine horizontale Navigation und darunter den Bereich für den Inhalt.
Im Inhaltscontainer soll noch mal eine vertikale Navigation sein, mit 20px Abstand nach oben und links zum Rand des Containers. Mit dem Abstand links klappt auch alles hervorragend, nur beim Abstand zum oberen Rand übernimmt der Container die 20px und sitzt jetzt frei unter der horizontalen Navigation.
Kann mir jemand helfen, ich kann keinen Fehler im CSS/Html erkennen.
Der CSS-Code:
Code:
/* Body */
body{background-color:#004f2f}
/* LOGO-Container */
#top {position:relative;
width:1000px; height:200px;
margin: auto;
bottom-margin: 0px;
border: 1px solid blue;
background-color:#545454;
background-image:url('grafik/hor-navi-back.jpg');
background-repeat:no-repeat;
background-position: top left;
}
/* Navigation unterhalb des Logos */
#topnavi {position:relative;
width:820px;
height:20px;
margin: 0px auto;
border-top: none;
border-bottom: none;
border-left: 1px solid blue;
border-right: 1px solid blue;
background-color:white;
background-image:url('grafik/hor-navi-back.jpg');
background-repeat:repeat-x;
background-position: top left;
overflow:hidden;
}
/* Container für Seiteninhalt */
#inhalt-container {position:relative;
width:820px;
height:900px;
margin: auto;
border-top: none;
border-bottom: none;
border-left: 1px solid blue;
border-right: 1px solid blue;
background-color:#545454;
background-image:url('grafik/hor-navi-back.jpg');
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
}
/* Navigation oben durch Listen */
#horizontal1 li {float: left;}
#horizontal1 {margin: 0;
padding: 0;
list-style-type: none;
background: #6f79dc;
background-image: url(grafik/back001.jpg);
width: 100%;
overflow: auto
}
#horizontal1 a {font-family: Arial;
font-size: 14px;
font-weight: bold;
text-decoration: none;
height: 20px;
display: block;
color: #fff;
background-image: url(grafik/back001.jpg);
background-color: white;
text-align: center;
line-height: 20px;
border-bottom: 1px solid #fff;
}
/* Diverse Breiten der horizontalen Links */
#home {width:70px;}
#produkte {width:80px;}
#unternehmen {width:100px;}
#service {width:80px;}
#kontakt {width:80px;}
/* Liste der horizontalen Navigation */
#horizontal1 a:visited {color: #dfdfdf;
background-image: url(grafik/back001.jpg)
}
#horizontal1 a:hover {background-color: #000;
background-image: url(grafik/back002.jpg)
}
/* Navigation innerhalb des Inhaltscontainers */
#navi-inhalt {position:relative;
width:200px;
height:120px;
margin-top: 20px;
margin-left: 20px;
border: 1px solid blue;
background-color:white;
overflow:hidden;
}
/* Bottom für Footer (Impressum, AGB, etc...) */
#bottom {position:relative;
width:820px;
height:120px;
margin: 0px auto;
margin-bottom: 20px
border-top: none;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
background-color:white;
background-image:url('grafik/hor-navi-back.jpg');
background-repeat:repeat-x;
background-position: top left;
overflow:hidden;
}
/* Zum Clearen von float: */
#clear-left {clear:left}
#clear-right {clear:right}
#clear-both {clear:both}
#clear-none {clear:none}
/* Überschriften, Texte, Links, etc.
p {color:#b1b1b1;
font-family:Arial;
font-size:12px
}
a {color:#ffffff;
font-family:Arial;
font-size:12px,
font-weight:bold;
text-decoration:underline
}
a:hover {color:#ac0004;
font-family:Arial;
font-size:12px,
font-weight:bold;
text-decoration:none
}und der HTML-Code
Code:
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox2.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="top"></div>
<div id="topnavi">
<ul id="horizontal1">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="produkte">Produkte</a></li>
<li><a href="#" id="unternehmen">Unternehmen</a></li>
<li><a href="#" id="service">Service</a></li>
<li><a href="#" id="kontakt">Kontakt</a></li>
</ul>
</div>
<div id="clear-left"></div>
<div id="inhalt-container">
<div id="navi-inhalt">
</div>
</div>
<div id="bottom"></div>
</body>
</html>PS: Der Fehler taucht im Firefox 3.6 auf, mit anderen habe ich noch nicht getestet.
.
Es ist ja IN diesem Element, warum also daran ausrichten? Wuerde kein Sinn ergeben.
