Thema: Problem mit float & clear
Hallo! Ich mache gerade eine neue Website, und habe ein kleines Problem mit relativer Positionierung und float / clear.
Der Div headerseitentitel soll auf dem div headerseitentitelbg liegen. Im FF funktioniert das nicht. Der IE macht es zwar, setzt aber eine unschöne vertikale Scrollleiste unten an den Rand des Fensters.
Was mache ich falsch?
Hier der Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>headline Version 0.1</title>
<style>
#container {
position: absolute;
top: 50%;
left: 50%;
height: 365px;
width: 951px;
margin: -182px 0 0 -466px;
}
#headerlinks {
position:relative;
top:0px;
left:0px;
background-image:url(images/headerlinks.gif);
height:62px;
width:16px;
float:left;
clear:right;
}
#headermitte {
position:relative;
top:0px;
width:919px;
height:62px;
background-color:#FEB300;
float:left;
clear:right;
}
#headerlogo {
position:relative;
top:2px;
height:59px;
width:50px;
background-image:url(images/logo.gif);
float:left;
clear:right;
}
#headertitel {
position:relative;
top:10px;
left:5px;
height:62px;
width:400px;
color:#333333;
font-size:30px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
float:left;
clear:right;
}
#headerseitentitelbg {
position:relative;
top:-20px;
width:452px;
color:#FAA400;
font-size:80px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:right;
float:left;
/* clear:none;*/
}
#headerseitentitel {
position:relative;
top:20px;
left:-452px;
width:452px;
color:white;
font-size:30px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:right;
float:left;
clear:right;
}
#headerrechts {
position:relative;
top:0;
background-image:url(images/headerrechts.gif);
height:62px;
width:16px;
float:left;
clear:right;
}
#menucontainer {
position:relative;
left:0px;
top:0px;
float:left;
background-image:url(images/menuleiste.jpg);
height:25px;
width:951px;
}
#menulinks {
position:relative;
top:0px;
left:11px;
}
#hauptmenu {
border:0px;
margin:0 0 0 0;
padding:0 0 0 0;
height:25;
width:940px;
}
#hauptcontainer {
position:relative;
top:0px;
left:0px;
width:765px;
height:279px;
float:left;
background-color:#FFCC33;
}
#sidebarcontainer {
position:relative;
top:0px;
left:0px;
width:186px;
height:269px;
float:left;
clear:right;
background-image:url(images/sidebarbg.gif);
text-align:center;
padding-top:10px;
}
a {
color:black;
text-decoration:underline;
}
a:hover {
color:gray;
}
.Active {
text-decoration:underline;
color:#333333;
font-size:1em;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.Hover {
font-weight:bold;
text-decoration:underline;
color:#333333;
font-size:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.Normal {
text-decoration:none;
color:#333333;
font-size:1em;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
text-decoration:none;
font-weight:bold;
font-size:2em;
}
.menutd {
padding-right:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="headercontainer">
<div id="headerlinks"></div>
<div id="headermitte">
<div id="headerlogo"></div>
<div id="headertitel">Headline</div>
<div id="headerseitentitelbg">testabcdef</div>
<div id="headerseitentitel">test</div>
</div>
<div id="headerrechts"></div>
</div>
<div id="menucontainer">
<div id="menulinks">
<table id="hauptmenu" name="hauptmenu"><tr><td class="menutd"><a href="#" class="Active">Menua</a></td><td class="menutd"><a href="#" class="Normal">Menub</a></td><td class="menutd"><a href="#" class="Hover">Menuc</a></td><td width="100%"></td></tr></table>
</div>
</div>
<div id="hauptcontainer">
Hier steht ganz viel Text.
</div>
<div id="sidebarcontainer"><img src="images/sidebarkasten.jpg" border="0"><br><br><img src="images/sidebarkasten.jpg" border="0"></div>
</div>
</body>
</html>Danke im Vorraus
Zuletzt bearbeitet von sometimes2 (02-03-2006 23:10:03)
Lebe deine Träume so wie sie sind,
denn nur so kannst du weiterhin träumen!
denn nur so kannst du weiterhin träumen!