Hi there,
To understand where I'm stuck, I made a little sketch:
http://brandnewfever.nl/sketch.jpg
The problem is the 'logo' I made it out two parts (upper part in header or blogtitle), for the second part I created an extra div under the access (menu bar). The problem is that my menubar has an background-image and appears above my logo and I want it underneath it.
I dont know what I'm doing wrong but I just cant get it underneath the menu bar.
Any idea's, tips, tricks or hints?
fwunder
Member
Not sure if it would help you, but I would approach this using multiple background images with alpha transparency in a single DIV, the first one being the top layer, I.E.:
background: url("./images/one.png"), url("./images/two.png"), url("./images/three.png");
You could just combine them into one image also and use that behind everything.
Thanks for the tip but thats not really what I'm looking for,
I just want my extra div (above container) visible with the access underneath it.
Alright, tried to change the Z-index of the #access and the #abovecontainer but no result, why is that menubar (access) always on top? What am I doing wrong?
the menu bar is supposed to always be on top. that way the dropdowns will not get covered over by other content.
I understand, but I want my image next to the menu items so the dropdowns wont be able te get underneath them...
do you mean the logo to the left of item 1?
This is cake, just depends how you have it set up.... You may need some kind of wrapper for both the logo divs, set the wrapper to position:relative and then you should be able to absolute position the left side of the logo with negative margins.
The z-index for the #access starts at "100", so be sure to know that to lay a div on top of that it would have to be higher than 100.
^wisdom.
Let me try this.... :)
Wel i've made a div underneath the acces. called #logodown, put it in te correct postion with negative marges. I gave it a Z-indez: 600; but its still underneath the acces. This thing is driving my crazy :S
#logodown {
background:url(images/logo_down.png) no-repeat top left;
height: 183px;
width: 70px;
z-index: 6000;
}
#access {
background: url(images/menu_background.png) repeat-x;
border-bottom: none;
font-size: 15px;
height: 50px;
overflow-x: inherit;
overflow-y: inherit;
z-index: 100;
}what's your link?
middlesister
Member
In order for z-index to work, your div's need to have positioning set with either position:relative or position:absolute. I think #access has position:relative by default, but you need to add that to your #logodown as well.
doesn't #header also have a z-index of 1? so that you can put a million on #logodown and as long as it is within #header it will never be higher than #access?
middlesister
Member
Good point.
Just checked. #header has z-index of 2, #access has z-index of 100 BUT #access is within #header (by default that is). So as long as #logodown is within header too, it should be possible to place above #access.
in theory at least. ;)
This topic has been closed to new replies.