R
Rayne
Gast
DIV lässt sich nicht im Firefox UND Internet Explorer korrekt positionieren
Ich bin grad dabei, meine Website umzubauen. Nun komme ich an einer Stelle partout nicht weiter und hoffe, ihr könnt mir helfen.
Die Website besteht aus einer Ebene #Huelle, darin befindet sich quasi der gesamte Inhalt. In dieser Ebene #Huelle befindet sich die Ebene #Rand-oben, die einen kleinen, weißen Rand darstellt. Darunter kommt die Ebene #Header mit einem Hintergrundbild. So weit ganz einfach.
Unter dem Header soll die Navigation und der Inhalt und jeweils einer Ebene kommen. Ich habe das Ganze erstmal mit einer Ebene ausprobiert und an dieser Stelle gehts nicht weiter.
Und zwar soll die Ebene #Content entsprechend dem Inhalt das gesamte Konstrukt nach unten hin ausweiten, also die Ebene #Huelle. Irgendwie bekomme ich das schon hin, aber der IE7 macht mir Probleme.
Mit diesem Code klappts im FF prima, aber im IE7 gar nicht, da der anscheinend kein margin-top kennt. Jedenfalls klatscht die Ebene #Content ganz oben und verschiebt zudem noch den Header:
#Content {
position: relative;
margin-top: 370px;
margin-left: 200px;
margin-bottom: 60px;
width: 550px;
height: auto;
background-color: #FFFFFF;
}
Mit "position:absolute" stimmt zwar die Positionierung im FF UND IE7, aber es weitet sich nur die Ebene #Content nach unten hin aus, aber nicht das Gesamtgerüst.
Ganz ohne "position:..." genau das selbe wie oben - im FF gehts, im IE7 hängt #Content am oberen Broswerrand und verschiebt alles.
Ich weiß jetzt absolut nicht, wie ich das umschreiben muss, damits auch im IE und weiterhin im FF klappt :ka:
Hier nochmal das gesamte Stylesheet:
html { height: 100%; }
Body {
background: #FFFFFF url(Bilder/Schatten.gif) repeat-y 50% 0;
color: #3E62B0;
margin: 0px;
height: 100%;
}
#Huelle {
position:absolute;
left:50%;
margin-left: -390px;
width: 780px;
height: 100%;
background: url(Bilder/Verlauf.gif) repeat-x #5F9DDC;
}
html>body #Huelle {
height: auto;
min-height: 100%;
}
#Rand-oben {
position: absolute;
width: 780px;
height: 8px;
background-color: #FFFFFF;
}
#Header {
position: absolute;
width: 771px;
height: 307px;
margin-top: 20px;
background: url(Bilder/Header.png) no-repeat;
}
#Content {
position: relative;
margin-top: 370px;
margin-left: 200px;
margin-bottom: 60px;
width: 550px;
height: auto;
background-color: #FFFFFF;
}
#Footer {
position: absolute;
width: 780px;
height: 25px;
background-color: #FFFFFF;
bottom: 0px;
}
Und hier das HTML-Dokument:
<!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>
<link rel="stylesheet" type="text/css" href="styles2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="Huelle">
<div id="Rand-oben"></div>
<div id="Header"></div>
<div id="Content">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
Ich hoffe, das Problem ist lösbar
Bin euch sehr dankbar!
Ich bin grad dabei, meine Website umzubauen. Nun komme ich an einer Stelle partout nicht weiter und hoffe, ihr könnt mir helfen.
Die Website besteht aus einer Ebene #Huelle, darin befindet sich quasi der gesamte Inhalt. In dieser Ebene #Huelle befindet sich die Ebene #Rand-oben, die einen kleinen, weißen Rand darstellt. Darunter kommt die Ebene #Header mit einem Hintergrundbild. So weit ganz einfach.
Unter dem Header soll die Navigation und der Inhalt und jeweils einer Ebene kommen. Ich habe das Ganze erstmal mit einer Ebene ausprobiert und an dieser Stelle gehts nicht weiter.
Und zwar soll die Ebene #Content entsprechend dem Inhalt das gesamte Konstrukt nach unten hin ausweiten, also die Ebene #Huelle. Irgendwie bekomme ich das schon hin, aber der IE7 macht mir Probleme.
Mit diesem Code klappts im FF prima, aber im IE7 gar nicht, da der anscheinend kein margin-top kennt. Jedenfalls klatscht die Ebene #Content ganz oben und verschiebt zudem noch den Header:
#Content {
position: relative;
margin-top: 370px;
margin-left: 200px;
margin-bottom: 60px;
width: 550px;
height: auto;
background-color: #FFFFFF;
}
Mit "position:absolute" stimmt zwar die Positionierung im FF UND IE7, aber es weitet sich nur die Ebene #Content nach unten hin aus, aber nicht das Gesamtgerüst.
Ganz ohne "position:..." genau das selbe wie oben - im FF gehts, im IE7 hängt #Content am oberen Broswerrand und verschiebt alles.
Ich weiß jetzt absolut nicht, wie ich das umschreiben muss, damits auch im IE und weiterhin im FF klappt :ka:
Hier nochmal das gesamte Stylesheet:
html { height: 100%; }
Body {
background: #FFFFFF url(Bilder/Schatten.gif) repeat-y 50% 0;
color: #3E62B0;
margin: 0px;
height: 100%;
}
#Huelle {
position:absolute;
left:50%;
margin-left: -390px;
width: 780px;
height: 100%;
background: url(Bilder/Verlauf.gif) repeat-x #5F9DDC;
}
html>body #Huelle {
height: auto;
min-height: 100%;
}
#Rand-oben {
position: absolute;
width: 780px;
height: 8px;
background-color: #FFFFFF;
}
#Header {
position: absolute;
width: 771px;
height: 307px;
margin-top: 20px;
background: url(Bilder/Header.png) no-repeat;
}
#Content {
position: relative;
margin-top: 370px;
margin-left: 200px;
margin-bottom: 60px;
width: 550px;
height: auto;
background-color: #FFFFFF;
}
#Footer {
position: absolute;
width: 780px;
height: 25px;
background-color: #FFFFFF;
bottom: 0px;
}
Und hier das HTML-Dokument:
<!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>
<link rel="stylesheet" type="text/css" href="styles2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="Huelle">
<div id="Rand-oben"></div>
<div id="Header"></div>
<div id="Content">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
Ich hoffe, das Problem ist lösbar
Bin euch sehr dankbar!
