zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV um 40px nach oben verschieben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.02.2010, 19:28
Benutzerbild von Dylan
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.10.2007
Beiträge: 65
Dylan befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.02.2010, 19:54
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

Packe erstmal folgenden Code an den Anfang des CSS:

Code:
* {
  margin: 0;
  padding: 0;
}
Die größten Browserunterschiede sind damit erstmal behoben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.02.2010, 19:56
Neuer Benutzer
neuer user
 
Registriert seit: 02.02.2010
Beiträge: 12
TheBlackPitcher befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 03.02.2010, 21:14
Benutzerbild von Dylan
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.10.2007
Beiträge: 65
Dylan befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div bei mouseover verschieben Gajel Javascript & Ajax 2 13.09.2010 20:40
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18
Rahmen oben (div) wird nicht angezeigt yyyy CSS 6 20.08.2009 15:45
Div verschieben holzbein2k CSS 2 18.12.2008 10:28
Einen DIV oben halten? Compiler (X)HTML 2 12.08.2005 10:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:02 Uhr.