Hi,
mit den position Attributen arbeite ich normal nie und habe entsprechend Probleme. Habe nun einen Versuch gestartet an dem ich im Netscape bisher kläglich scheitere.
Ein Header hat links ein Logo, rechts oben eine Navi und rechts unten weitere Links.
Im Netscape wandern die weiteren Links immer in die rechte untere Ecke des Browsers.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="de"/>
<title>~</title>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<style type="text/css">
<!--
html, body {
padding: 0;
margin: 0;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 100%;
color: #000;
}
img {
border: none;
}
.clear {
clear: both;
}
div#header {
width: 800px;
border-left: 1px solid white;
border-right: 1px solid white;
background-color: #3c79b5;
font-size: 75%;
}
div#header div.left {
width: 400px;
float: left;
}
div#header div.left img {
display: block;
}
div#header div.right {
width: 350px;
height: 70px;
float: left;
background-color: blue;
position: relative;
}
div#header div.right div {
color: red;
}
div#header div.right div.oben {
float: right;
height: 35px;
padding: 2px 10px;
border-left: 1px solid white;
position: absolute;
top: 0px;
right: 0px;
}
div#header div.right div.unten {
position: absolute;
bottom: 0px;
right: 0px;
}
//-->
</style>
</head>
<body>
<div id="header">
<div class="left">[img]y.gif[/img]</div>
<div class="right">
<div class="oben">AAA</div>
<div class="unten">BBB</div>
</div>
<br class="clear"/>
</div>
</body>
</html>
Was muss ich anders machen, wieso geht das so nicht?
(Ich habe den Quelltext mal abgespeckt, bei "AAA" kommt eine UL und bei "BBB" normale Links, aber gefloatet um ihnen ein Padding verpassen zu können. Klappte eigentlich überall prima bis auf Netscape halt.)