XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   DIV um 40px nach oben verschieben (http://xhtmlforum.de/showthread.php?t=60058)

Dylan 03.02.2010 20:28

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>


Cocoon 03.02.2010 20:54

Packe erstmal folgenden Code an den Anfang des CSS:

Code:

* {
  margin: 0;
  padding: 0;
}

Die größten Browserunterschiede sind damit erstmal behoben.

TheBlackPitcher 03.02.2010 20:56

Wäre auch nett wenn du einen Link zu einem Bild zu zu der html mit dem CSS verlinks, damit man sich ein besseres bild machen kann.

Dylan 03.02.2010 22:14

Zitat:

Zitat von TheBlackPitcher
Wäre auch nett wenn du einen Link zu einem Bild zu zu der html mit dem CSS verlinks, damit man sich ein besseres bild machen kann.

Ist nur ein Platzhalter, die Seite ist noch im Aufbau, - localhost.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:35 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023