Probleme mit übereinanderliegenden Containern

Moderator: General Support Moderators

Forum rules
Forumregeln
Locked
stevie-wonder
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Jan 18, 2013 5:18 pm

Probleme mit übereinanderliegenden Containern

Post by stevie-wonder » Fri Jan 18, 2013 5:37 pm

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;
}

Locked

Return to “Template, CSS und Designfragen”