Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Z-index difficulty

    I still don't have a good grasp of the z-index rules. Is the higher number going to be on top or below? ARGH

    In any case, it may be that I'm wanting to do something that isn't quite possible. My sub-sub menu items are showing up underneath a graphic element I have placed on the page. But that graphic element has to appear on TOP of the parent level of the menu. I don't know if it's even possible to set a sub-menu on a different z-index than another part of the menu itself.

    http://www.lyricoperala.org/index3.html

    In the meantime, I've also been asking in the javascript forum about how to fix the spacing issue in my Cufon menu sub-menu items (too far apart), but so far I haven't found any assistance. I keep doing google searches as well, but so far haven't turned up the solution, though I see it mentioned often.

    Thanks in advance.

    ~Laura

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    z-index is a bugger to figure out sometimes. When you are working with z-index of two different divs, then the outside container of one of the divs cannot have a specified z-index, because you're going OVER one dive, but under it's contained elements. So in your example, move the z-index property from .site-nav to #menu and it should as you want it to.

    As for Cufon, my suggestion would be to scrap cufon and move to @font-face. There is a generator here:

    http://www.fontsquirrel.com/fontface/generator

    and if you're interested in reading up on how z-index works:
    https://developer.mozilla.org/en/Und...text_example_1

    and

    http://tjkdesign.com/articles/z-inde...ents_stack.asp
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • Users who have thanked resdog for this post:

    operapixie (12-10-2011)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,771
    Thanks
    23
    Thanked 550 Times in 549 Posts
    The higher number item appears on top of the lower number, but z-index only works on relative/absolute positioned items. To save heart ache could you place the sub menus to the left?

  • #4
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks again, Resdog. You're a great help.

    I'm still having some difficulties, but originally your suggestion worked. Thing is, I went with your other suggestion of switching from Cufon to @font-face, which meant that I changed the CSS. I tried to keep things mostly the same, but I seem to have screwed it up somewhere along the line since now, not only are my 3rd level menu items still showing up under the Tix image, but now all my social media links that were underneath my "donate" button, but within the menu bar, have disappeared.

    And...for some reason now my footer image only stretches the width of the center of the page instead of all the way across, and so far as I can tell, I haven't changed that part of the code.

    Grrrr...soon as I've got all these things straightened out I am SO re-doing the entire code from start to finish in order to make it all as clean as possible. It's driving me NUTS!! LOL

    Thanks again in advance.

    ~Laura
    Last edited by operapixie; 12-10-2011 at 05:48 AM. Reason: Forgot to add in the footer change.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •