DIV um 40px nach oben verschieben
Hallo Zusammen,
ich habe ein Problem mit einem DIV den ich um 40px nach oben verschieben möchte.
Es funktioniert wie gewünscht in Opera, Firefox u. Safari (Win + Mac), im IE (ie7 getestet) leider nicht.
Ich habe eine Leerseite mit entspr. Inhalt erstellt. Der rot angelegte "content" DIV soll um 40px über den darüberliegenden "header" DIV geschoben werden. in den o.g. Browsern lässt sich das sehr gut erkennen.
Ich habs im IE mit "top: -40px" probiert, dass funktioniert auch, spart aber gleichzeitig im footer 40px aus, was natürlich nicht in meinem Sinne ist.
Ich denke, ich habe einen Fehler in meinem CSS, kann aufgrund von Blindheit den Fehler momentan nicht ausfindig machen. Kann jemand helfen?
HTML-Code:
<!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></title>
<style type="text/css">
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
margin : 0 auto;
margin-top : 25px;
background-color : #EEE;
}
#wrapper {
position : relative;
margin : 0 auto;
text-align : right;
width : 900px;
background-color : #ccc;
}
#header {
position : relative;
padding-top : 140px;
}
#header_links {
width : 450px;
float : left;
margin-top : 0;
background-color : #fff;
position : relative;
}
#header_rechts {
float : left;
width : 450px;
background-color : #003366;
height : 240px;
position : relative;
}
#spacer {
clear : both;
}
#header_rechts h1 {
color : #ffffff;
font-size : 1.2em;
font-family : Arial, Helvetica, sans-serif;
font-weight : normal;
letter-spacing : 0.1em;
margin : 80px 20px 0 0;
}
#breadcrump {
position : relative;
width : 630px;
background-color : #fff;
font-size : 0.7em;
margin : 40px 0 0 -200px;
padding : 7px 20px 7px 0;
z-index : 55;
}
#head_container {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 140px;
background-color : #fff;
}
#content {
min-height : 400px;
width : 610px;
position : relative;
background-color : #f00;
font-size : 0.8em;
text-align : left;
padding : 25px 10px 25px 30px;
margin : -40px 0 0 250px;
z-index : 90;
}
#logo {
position : absolute;
top : 0;
right : 38px;
height : 130px;
padding-top : 28px;
}
#topnavi {
position : absolute;
top : 20px;
left : 34px;
font-size : 0.6em;
color : #999999;
}
#topnavi a {
color : #999999;
text-decoration : none;
}
#topnavi a:hover {
color : #999999;
text-decoration : underline;
}
#search {
position : absolute;
bottom : 13px;
left : 34px;
font-size : 0.6875em;
}
#search a {
color : #000000;
text-decoration : none;
}
#search a:hover {
color : #000000;
text-decoration : underline;
}
#navi {
position : absolute;
font-size : 0.8em;
text-align : left;
left : 0;
top : 380px;
width : 250px;
z-index : 100;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="head_container">
<div id="topnavi"><a href="index.php" accesskey="1">Home</a></div>
<div id="logo"><a href="index.php"><img src="logo.png" border="0" alt=""></a></div>
<div id="search">
<form id="form" method="get" action="">
...
</form>
</div>
</div>
<div id="header">
<div id="header_links"><img src="images/header.jpg" width="450" height="240" border="0" alt=""></div>
<div id="header_rechts"><h1>Überschrift</h1>
<div id="breadcrump">Sie befinden sich hier: <a href="#">Home</a></div>
</div>
<div id="spacer"></div>
</div>
<div id="navi">
<div id="menuwrapper">
<ul id="primary-nav">
<li>
<a href="index.php"><span>Home</span></a>
</li>
</ul>
<div class="spacer"></div>
</div>
</div>
<div id="content">
<p><strong>Guten Tag</strong></p>
Lorem Ipsum
</div>
</div>
</body>
</html>
|