nicht angemeldet
Hallo Community
Ich habe langsam nur noch graue Haare...
Ich habe eine Website, oben einen Kopfbanner, darunter 3-spaltiges Layout mit Menü (links), Inhalt (Mitte), News (rechts) und abschliessend darunter einen Footer. Die Website-Breite ist auf 1024px eingestellt und die Website ist im Bildschirm zentriert (margin-left/right 50%).
Nun möchte ich realisieren, dass Kopf, Menü, News und Footer immer feststehend sind und nur der Inhaltsbereich gescrollt wird.
wie hier: http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm
Habe es schon mit der Konfiguration versucht, allerdings scheint die nur bei Websites zu gehen, wo der Body nicht in die Mitte zentriert und mit einer fixen Breite fixiert wird.
Den Footer, das Menü und die News zu fixieren schaffe ich, aber sobald ich die position dem Header zuweise, verschwindet der (wird unsichtbar). Wenn ich die position jedoch weglasse, dann scrollt der Header mitsamt Hintergrund.
Und das Hintergrundbild scrollt aus irgendwelchen Gründen auch imer noch mit :-(
So siehts momentan aus (Jpeg-Files):
"Normalzustand": http://uploaded.to/?id=xizy51
Gescrollt: http://uploaded.to/?id=sghdc5
Kann mir bitte wer helfen, ich finde den Fehler/die Problemlösung nicht. Oder muss ich ganz anders vorgehen?
*************
HTML-Template
*************
<head>
<link href="../css/main_stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<a id="top"></a>
<div id="main_container" class="main_container">
<!-- Header -->
<div id="header_container" class="header_container">
<div id="header_1" class="header_1"></div>
</div><!-- end header_container -->
<div id="menu_1" class="menu_1">
<div class="menu1-level1-no">Menu item 1</div>
<div class="menu1-level1-no">Menu item 1</div>
<div class="menu1-level1-act">Menu item 1</div>
<div class="menu1-level2-no">Menu item 2</div>
<div class="menu1-level2-no">Menu item 2</div>
<div class="menu1-level2-act">Menu item 2</div>
<div class="menu1-level1-no">Menu item 1</div>
</div>
<div id="news_1" class="news_1">###NEWS###</div>
<div id="content" class="content">###CONTENT###</div>
<div class="clearfloat"> </div>
<div id="footer_container" class="footer_container">
<div id="footer_1" class="footer_1">###FOOTER_1###</div>
</div><!-- end footer_container -->
</div><!-- end main_container -->
</body>
</html>
*********
CSS-Style
*********
html, body {
margin:0;
padding:0;
height:100%;
}
html {
background-color:#000033;
width:100%;
}
body {
margin-left:auto;
margin-right:auto;
width:1024px;
background-image:url(xxxxxxx);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:left top;
position:relative;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.header_1 {
background-image:url(xxxxxxxx);
background-repeat:no-repeat;
background-position:left;
height:112px;
border-bottom:1px dotted #999999;
position:static;
}
.header_1_level1 {
font-family:Arial, Helvetica, Tahoma, Verdana, sans-serif;
font-size:24px;
font-weight:bold;
color:#191970;
margin-left:220px;
padding-top:60px;
}
.menu_1 {
border:#FFFF00 1px solid;
width:220px;
float:left;
position:fixed;
}
.content {
border:#FF0000 1px solid;
margin-left:224px;
margin-right:206px;
vertical-align:top;
}
.news_1 {
border:#33FF00 1px solid;
font-family:Arial, Helvetica, Tahoma, Verdana, sans-serif;
vertical-align:top;
width:200px;
float:right;
position:fixed;
margin-right:50%;
right:-512px;
}
.footer_1 {
background-color:#CC33CC;
border-top:dotted 1px #CC33CC;
position:fixed;
bottom:0px;
width:1024px;
font-size:12px;
}