ThemeShaper Forums » Thematic


Image gets underneath menu-bar...

(16 posts)
  • Started 12 years ago by NewFever
  • Latest reply from helgatheviking
  • This topic is not resolved


  1. Hi there,

    To understand where I'm stuck, I made a little sketch:

    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?

    Posted 12 years ago #
  2. fwunder

    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.

    Posted 12 years ago #
  3. 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.

    Posted 12 years ago #
  4. 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?

    Posted 12 years ago #
  5. the menu bar is supposed to always be on top. that way the dropdowns will not get covered over by other content.

    Posted 12 years ago #
  6. I understand, but I want my image next to the menu items so the dropdowns wont be able te get underneath them...

    Posted 12 years ago #
  7. do you mean the logo to the left of item 1?

    Posted 12 years ago #
  8. 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.

    Posted 12 years ago #
  9. ^wisdom.

    Posted 12 years ago #
  10. Let me try this.... :)

    Posted 11 years ago #
  11. 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;
    Posted 11 years ago #
  12. what's your link?

    Posted 11 years ago #
  13. middlesister

    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.

    Posted 11 years ago #
  14. 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?

    Posted 11 years ago #
  15. middlesister

    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.

    Posted 11 years ago #
  16. in theory at least. ;)

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.