Sprint
Erfahrenes Mitglied
Hallo Kollegen,
bevor jetzt alle auf mich einprügeln, weil das Thema bestimmt nicht neu ist, möchte ich betonen, daß ich zwar viele Lösungen gefunden habe, die aber alle nicht wirklich zu mir passen.
Es geht um ein Layout, das horizontal zentriert ist. In einem alles umfassenden wrapper sind ein Kopf Bereich (header) in dem ein wechselndes Bild und ein Menü sitzen. Das ist komplett fixiert. Darunter sitzt ein weiterer Container (koerper), in dem links ein ebenfalls fixierter Streifen mit dem zweiten Menü sitzt und rechts davon der eigentliche, scrollbare Content Bereich.
Funktioniert natürlich in allen Browsern, außer im IE. Wen wundert's. Da wird nicht nur alles gescrollt, der Inhalt fängt auch viel zu weit unten an und der Hintergrund im "koerper" hört viel zu früh auf. Sämtliche Lösungen, die ich bis jetzt gefunden habe, klatschen das Layout an den Rand, sind nur für eine fixierte Box oder würfelt alles andere durcheinander.
CSS:
HTML
Kann mir da irgendwie geholfen werden? Alternativ würde mich interessieren, wie groß die Verbreitung des IE6 noch ist. Wenn der Umbau nämlich zu groß werden oder nicht möglich sein sollte und vielleicht nur noch 10-20% den IE6 einsetzen, bau ich lieber ne Hinweisbox ein und fertig.
bevor jetzt alle auf mich einprügeln, weil das Thema bestimmt nicht neu ist, möchte ich betonen, daß ich zwar viele Lösungen gefunden habe, die aber alle nicht wirklich zu mir passen.
Es geht um ein Layout, das horizontal zentriert ist. In einem alles umfassenden wrapper sind ein Kopf Bereich (header) in dem ein wechselndes Bild und ein Menü sitzen. Das ist komplett fixiert. Darunter sitzt ein weiterer Container (koerper), in dem links ein ebenfalls fixierter Streifen mit dem zweiten Menü sitzt und rechts davon der eigentliche, scrollbare Content Bereich.
Funktioniert natürlich in allen Browsern, außer im IE. Wen wundert's. Da wird nicht nur alles gescrollt, der Inhalt fängt auch viel zu weit unten an und der Hintergrund im "koerper" hört viel zu früh auf. Sämtliche Lösungen, die ich bis jetzt gefunden habe, klatschen das Layout an den Rand, sind nur für eine fixierte Box oder würfelt alles andere durcheinander.
CSS:
Code:
body { color: black; font-size: 13px; font-family: Fontin-Regular, "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; line-height: 130%; background-color: white; letter-spacing: 0.08em; }
#wrapper { background-repeat: repeat-y; background-position: center top; width:1000px; height: 100%; margin-right: auto; margin-left: auto; }
#header { background-image: url(../Bilder/fixbg_01.jpg); background-attachment: scroll; width:1000px; height:218px; position:fixed; z-index: 3; margin:0; }
#top_img { background-repeat: no-repeat; background-position: left top; position: relative; top: 48px; left: 262px !important; width: 252px; height: 170px; z-index: 10; float: left; }
#topmenu { text-align: left; position: relative; top: 55px; left: 300px; width: 200px; height: auto; float: left; clear: none; }
.koerper { background-image: url(../Bilder/fixbg_02.jpg); width:1000px; position: fixed; top: 218px; left: inherit; height: 100%; z-index: 1; float: left; min-height: 432px; }
#menu { text-align: left; position: relative; top: 100px; left: 100px; width: 150px; height: 300px; float:left; }
.textrahmen { font-size: 13px; line-height: 130%; letter-spacing: 0.08em; padding: 12px 12px 12px 20px; position: relative; z-index: 2; top: 208px; left: 262px; width: 600px; height: 100%; float: left; }HTML
HTML:
<div id="wrapper">
<div id="header">
<div id="top_img" style=' background-image: url(Bilder/sites/index.jpg);'> </div>
<div id="topmenu">...</div>
</div>
<div class="leftbox">
<div id="menu">...</div>
</div>
<div class="textrahmen">...</div>
<div class="clear"> </div>
</div>
