nicht angemeldet
ich vermute, da kann dir jetzt niemand folgen - wenn du dein "problem" genauer beschreibst, wirds vielleicht etwas ;)
die Aufgabe lautet:
Kopf und Fuß fixiert, also immer bündig am oberen bzw. unteren Rand des Browserfernsters
Besteht der Content z.B. nur aus zwei Zeilen soll dieser Bereich vertikal zentriert werden. Also in der Mitte zwischen Kopf- und Fußzeile erscheinen.
Ist der Content größer als der sichtbare Bereich, soll der Content natürlich scrollbar sein (aber nur der Content, Kopf- und Fusszeile sollen ja oben und unten fixiert sein)
scrollen kann man den content nicht - aber was hindert dich daran, ihm ein overflow: auto zu verpassen oder es zumindest zu versuchen?
Daran hindert mich nichts. Es funktioniert nur nicht. Deswegen wende ich mich ja hier ans Forum und hoffe auf Hilfe. Hier nochmal mein Code den ich bisher habe und der im FF einwandfrei funktioniert:
<!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=utf-8" />
<title>2 x fixed, 1 x middle</title>
<style type="text/css">
<!--
body, html {
height:100%;
}
body {
margin:0;
padding:0;
}
body, td, th {
font-family: Arial, Helvetica, sans-serif;
}
#wrapper {
display: table;
height: 100%;
#position: relative;
overflow: hidden;
background-color:#0066FF;
width: 900px;
z-index: 50;
}
#container {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
#inner {
#position: relative;
#top: -50%;
background-color:#6699FF;
width: 900px;
margin: 100px 0 50px 0px;
}
#header {
position: fixed;
width: 900px;
top: 0px;
height: 100px;
background-color: #00CC99;
z-index: 100;
}
#footer {
position: fixed;
width: 900px;
bottom: 0px;
height: 50px;
background-color: #33CC99;
z-index: 100;
}
-->
</style>
</head>
<body>
<div id="header">header</div>
<div id="wrapper">
<div id="container">
<div id="inner">
start<br />
hier gaaaaaanz viiiieeeeel Text einfügen<br />
hier gaaaaaanz viiiieeeeel Text einfügen<br />
hier gaaaaaanz viiiieeeeel Text einfügen<br />
Ende
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Kopf und Fusszeile sind fixiert, der Content in der Mitte vertikal zentriert (auch im IE). Ist der Content aber länger als der zur Verfügung stehende Bereich soll der Contentbereich natürlich scrollbar sein. Und da gehen meine Probleme mit dem IE los. Dort ist der Inhalt nicht scrollbar sondern steht fest. Daher folgende Anpassung für den IE:
<!--[if lte IE 7]>
<style type="text/css">
html, body {
height: 100%;
overflow-y: hidden;
}
#container {
height: 100%;
width: 100%;
overflow: auto;
top:0px;
margin:100px 0px 50px 0px;
}
#inner {
position: static;
margin: 0px 0px 0px 0px;
}
</style>
<![endif]-->
Jetzt ist der Content zwar scrollbar, ist aber nicht mehr zentriert wenn weniger drin steht. Dazu kommt noch das der Contentbereich unten unter der Fusszeile verschwindet.
Ich hoffe ich konnte Dir das Problem jetzt nochchmal etwas näher bringen.