nicht angemeldet
2 x div fixed, 1x div vertikal zentriert
Hallo zusammen,
ich habe ein Problem mit einem CSS-Layout. Es soll oben und unten jeweils ein fixed div geben. Der Content dazwischen soll (soweit der Content nicht den gesamten Platz verwendet) immer genau zentriert zwischen den beiden fixed divs erscheinen. Hier einer meiner bisherigen Versuche:
<!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">
<!--
html, body {
margin:0;
padding:0;
}
body, td, th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
a {
font-size: 11px;
color: #0099FF;
text-decoration: none;
}
a:hover {
color: #993300;
text-decoration: none;
}
#header {
width: 900px;
height: 100px;
position: fixed;
left: -450px;
top: 0px;
margin-left: 50%;
z-index: 100;
background-color: #CC9900;
}
#content {
width: 900px;
position: relative;
left: -450px;
top: 100px;
bottom: 50px;
margin: 0 0 0 50%;
padding: 0;
z-index: 50;
background-color: #339999;
}
#footer {
width: 900px;
height: 50px;
position: fixed;
left: -450px;
bottom: 0px;
margin-left: 50%;
z-index: 100;
background-color: #FFCC99;
}
-->
</style>
</head>
<body>
<div id="header">"header"</div>
<div id="content">
"content"
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
"content Ende"
</div>
<div id="footer">"footer"</div>
</body>
</html>
Bin für jede Hilfe wirklich dankbar. Ich versuche mich jetzt schon seit Tagen daran und komme einfach nicht weiter.
Viele Grüße
Frank
-
Ave Frank!
ich habe ein Problem mit einem CSS-Layout. Es soll oben und unten jeweils ein fixed div geben. Der Content dazwischen soll (soweit der Content nicht den gesamten Platz verwendet) immer genau zentriert zwischen den beiden fixed divs erscheinen. Hier einer meiner bisherigen Versuche:
Dieser Artikel dürfte dich deinem Ziel näher bringen.
Grüße aus H im R an Frank,
Primus Enginus*--
Und wenn´s dir nicht gefällt, http://dann.nimmet.net/mir-doch-egal!
Der Valligator
"Computer sagt Nein"-
Hallo Primus Enginus,
erstmal vielen vielen Dank für den Link. Damit habe ich es jetzt fast hinbekommen. Nur ein Problem habe ich noch wenn der Inhalt gescrollt werden muss. Im FF funktioniert alles einwandfrei, nur der IE (wer sonst) weigert sich.
Wenn Du jetzt dafür auch noch eine Lösung hast ist mein Tag, ach was rede ich - die ganze Woche, gerettet.
Viele Grüße
Frankhier der 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=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 /> Ende </div> </div> </div> <div id="footer">footer</div> </body> </html>-
Ave Frank!
Im FF funktioniert alles einwandfrei, nur der IE (wer sonst) weigert sich.
Ja, der IE, Fluch oder Segen? Man kann es nicht beurteilen. :)
Wenn Du jetzt dafür auch noch eine Lösung hast ist mein Tag, ach was rede ich - die ganze Woche, gerettet.
<style type="text/css">
<!--
#footer {
position: fixed;
}
-->
</style>Dann wollen wir mal sehen, ob wir deine Woche gerettet bekommen, `position: fixed;`{:.language-css} kennt der IE nicht, daher musst du ein kleines Workarround einbauen, hier die [Anleitung für Fixe bereiche](http://de.selfhtml.org/css/layouts/fixbereiche.htm) mit dem entsprechenden [Workaround für den Internet Explorer](http://de.selfhtml.org/css/layouts/fixbereiche.htm#fixiert_ie). Versuch mal ob du es hinkriegst. Grüße aus H im R an Frank, Primus Enginus\* -- Und wenn´s dir nicht gefällt, http://[dann.nimmet.net/mir-doch-egal!](http://dann.nimmet.net/mir-doch-egal!) [Der Valligator](http://old.atomic-eggs.com/old_forum/messages/237.html#a1) ["Computer sagt Nein"](http://www.comedycentral.de/index.php/Video/Detail/vid/541168/playerMode/fullscreen)-
Hi,
position: fixed;kennt der IE nicht,Der IE < 7.
daher musst du ein kleines Workarround einbauen
Oder Benutzer eines IE < 7 einfach mit einer Alternativversion leben lassen, in der eben keine Fixierung gegeben ist - bspw., in dem man dort einfach fixed durch absolute austauscht.
Der "Workaround" kann naemlich weitere Arbeit machen, wenn man bspw. per JavaScript noch irgendwas mit dem scrollbaren Element anfangen will - da das beim Workaround dann nicht mehr html bzw. body ist, muss man dann auch wieder doppelt scripten, etc.
MfG ChrisB
-
Hallo Liebe Helfer,
JavaScript wollte ich eigentlich vermeiden, und schon gar nicht zum Layouten missbrauchen. Ich denke (hoffe), da gibt es auch eine CSS-Lösung. Die habe ich nur noch nicht gefunden. Auch mit dem Workaround für den IE bekomme ich es nicht hin. Der Content ist jetzt zwar scrollbar, aber nicht mehr zentriert. Der Untere Teil des Contents verschwindet dann auch "unter dem Monitor". IE`s < 7 sind mir eigentlich auch vorerst egal. Die sterben ja hoffentlich langsam alle aus. Dort mache ich dann aus den fixed divs einfach absolute und fertig. Der IE7 ist da schon interessanter. Der kennt ja auch fixed.
Das habe ich jetzt noch zusätzlich im Header drin:
<!--[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]-->Viele Grüße
Frank
-
-
-
-