M
Maik
Geh ich recht in der Annahme, dass content_wrapper eine bekannte feste Größe (Höhe) besitzt?
Dann ist auch diese von mir eingangs empfohlene Technik dienlich, den Block zwischen Header- und Footer-Bereich vertikal zu zentrieren, die in meinem Beispiel weiterhin laut deiner Vorgabe unterschiedliche Höhen besitzen.
Da ich nicht weiß, von welcher IE-Version du vorhin konkret gesprochen hast, denn IE ist nicht gleich IE, kann ich zu diesem Beispiel sagen, dass IE7 und IE8 es korrekt interpretieren.
Falls du hierbei den betagten IE6 berücksichtigst, empfehle ich dir diesen Zusatz im Dokumentheader:
damit er sich zumindest wie der IE7 verhält, und die kombinierten Positionsangaben top/bottom u. left/right für #middleWrapper interpretiert.
Quelle: http://code.google.com/p/ie7-js/
mfg Maik
Dann ist auch diese von mir eingangs empfohlene Technik dienlich, den Block zwischen Header- und Footer-Bereich vertikal zu zentrieren, die in meinem Beispiel weiterhin laut deiner Vorgabe unterschiedliche Höhen besitzen.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-07-04" />
<title>tutorials.de | DIV-Element mit JavaScript stylen</title>
<style type="text/css">
/* <![CDATA[ */
/* allg. Seitenformatierung */
* {
margin:0;
padding:0;
}
body {
height:100%;
max-height:100%;
background:#fff;
overflow: hidden;
font:normal 1em verdana,sans-serif;
}
/* Drei vertikale DIV-Blöcke im Viewport */
div#topWrapper {
position:absolute;
top:0;
left:0;
width:100%;
height:116px;
overflow:hidden;
background:#53829d;
border-bottom:4px solid #73a2bd;
}
div#middleWrapper {
position:absolute;
top:120px;
left:0;
bottom:50px;
right:0;
overflow:auto;
background:#fff;
}
div#bottomWrapper {
position:absolute;
bottom:0;
left:0;
width:100%;
height:45px;
overflow:hidden;
background:#73a2bd;
border-top:5px solid #53829d;
}
div#topWrapper h1, div#bottomWrapper h1 {
font-size:1.4em;
}
/* div#contentWrapper innerhalb seines Anzeigebereichs von div#middleWrapper horizontal und vertikal zentrieren */
div#contentWrapper {
position:relative;
left:50%;
top:50%;
height:200px;
width:400px;
margin:-105px 0 0 -205px;
background:#efefef;
border:5px solid #dadada;
}
/* ]]> */
</style>
</head>
<body>
<div id="topWrapper">
<h1>topWrapper</h1>
</div>
<div id="middleWrapper">
<div id="contentWrapper">content</div>
</div>
<div id="bottomWrapper">
<h1>bottomWrapper</h1>
</div>
</body>
</html>Da ich nicht weiß, von welcher IE-Version du vorhin konkret gesprochen hast, denn IE ist nicht gleich IE, kann ich zu diesem Beispiel sagen, dass IE7 und IE8 es korrekt interpretieren.
Falls du hierbei den betagten IE6 berücksichtigst, empfehle ich dir diesen Zusatz im Dokumentheader:
HTML:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->damit er sich zumindest wie der IE7 verhält, und die kombinierten Positionsangaben top/bottom u. left/right für #middleWrapper interpretiert.
Quelle: http://code.google.com/p/ie7-js/
mfg Maik
