Serv .. ich bin derzeit an einer Website dran, dort würde ich gerne ein bild wie folgt positionieren:
Dies konnte ich bisher nur mit einer absolute positionierung umsetzen. Problem dabei is wenn ich die Seite scrolle, lappt das Bild über dem Menü es soll jedoch unter dem Menü scrollen. Siehe Spoiler Abb.
Wenn ich nun die absolute positionierung entferne, scrollt das bild zwar unters Menü lappt aber dafür unter der Sidebar. Siehe Spoiler Abb.
Im Endeffekt möchte ich folgendes, das Bild soll wenn man scrollt unter dem Menü aber über der Sidebar positioniert sein, leider weiß ich nicht wie ich das mittels CSS lösen kann.
Hier der Code des Menüs:
Hier der des Bildes:
[Only registered and activated users can see links. Click Here To Register...]
Dies konnte ich bisher nur mit einer absolute positionierung umsetzen. Problem dabei is wenn ich die Seite scrolle, lappt das Bild über dem Menü es soll jedoch unter dem Menü scrollen. Siehe Spoiler Abb.
Wenn ich nun die absolute positionierung entferne, scrollt das bild zwar unters Menü lappt aber dafür unter der Sidebar. Siehe Spoiler Abb.
Im Endeffekt möchte ich folgendes, das Bild soll wenn man scrollt unter dem Menü aber über der Sidebar positioniert sein, leider weiß ich nicht wie ich das mittels CSS lösen kann.
Hier der Code des Menüs:
Code:
#nav {
background: url("../images/ui/menu_bg.png") no-repeat;
position: fixed;
width: 1100px;
height: 90px;
text-align: center;
padding: 18px 0 0 0;
}
#nav a {
background: none repeat scroll 0% 0% transparent;
border: 1px solid transparent;
border-radius: 4px 4px 4px 4px;
font-family: Catriel,'Trebuchet MS',sans-serif;
font-size: 15px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px 0px #000;
padding: 9px;
margin: 0px 5px;
}
#nav a:hover {
background: url("../images/ui/nav_hover.png") repeat-x center top transparent;
border: 1px solid hsla(200, 100%, 0%, 0.1);
}
#nav a:active {
background: url("../images/ui/nav_hover.png") repeat-x center top hsla(0, 100%, 100%, 0.1);
border: 1px solid hsla(200, 100%, 0%, 0.2);
}
Code:
#ornamentleft {
width: 836px;
height: 126px;
margin: -70px 0px 0px -21px;
background: url("../images/ui/ornament_left.png") no-repeat scroll 0% 0% transparent;
position: absolute;
z-index: 3;
}