Page 1 of 1

Probleme mit übereinanderliegenden Containern

Posted: Fri Jan 18, 2013 5:37 pm
by stevie-wonder
Hallo zusammen,

ich stehe vor folgendem Problem:
Mein Head-Bereich besteht derzeit aus mehreren übereinanderliegenden DIV Containern, was mir Probleme verursacht. Ich schaffe es nicht den Banner und die darüberliegende Navigationsleiste statisch zu halten, während sich der Content darunter scrollen lässt.

Die bisher beste Lösung konnte ich durch den Code unten erzielen. Hierbei verschwindet jedoch die Navigationsebene nach oben beim scrollen des Content.

Hinweis: Der geschwungene Banner hat eine transparenz (PNG). Der Headbereich sollte also unter dem Bild liegen.

Vielleicht kennt jemand auch eine elegantere Lösung?!

Image

Hier der CSS Code der drei Komponenten:

Code: Select all

#head
{
width: 800px;
z-index:1;
margin: 0px auto;
top:0px;
}

#banner
{
z-index:2;
width:100%;
height:100px;
background-position: center top;
position:fixed;
top:0px;
background-image: url(../images/banner.png);
}

#navbar
{
z-index:3;
text-align:right;
padding-right:20px;
padding-left:300px;	
margin: 0px auto;
width: 500px;
height: 50px;
position:relative;
top:0px;
}