CSS Layering

  • Resolved equaldesign

    (@equaldesign)


    16 years, 5 months ago

    I am currently creating a site for a client in WordPress with a menu across the top <div id="navbar">. Then further down the page there is a div that has a negative margin to overlap it with the navar (picture of the man). However not that this is ‘over the top’ of the navbar I cannot click the last link (‘barney’).

    Is there a way to send the photo of the man to the back and bring the navbar to the front?

    View the page here – https://www.cliffbashforth.co.uk/index.php

    Thanks,

Viewing 4 replies - 1 through 4 (of 4 total)

  • Yeah use z-index in your CSS. This defines which layer it’s on top.

    If I may be so bold to give you a tip, since you’re not using a exotic font, I’d suggest to use actual text in the tab links instead of using the text in the graphic. This will save you the work of having to create new or different graphics when you want to change the order or names of the links in the future. It will also save you the whole z-index trouble, because trouble it is. (z-index reacts very differently in the different browsers especially if they have different positioning)
    The actual text will be on top and you don’t risk the man being covered by the menu bar. In fact since there is no roll-over or active link graphic you could make the whole tabbed menubar just one graphic.

    Site looks really great!

    More info in z-index
    https://htmldog.com/reference/cssproperties/z-index/

    Thread Starter equaldesign

    (@equaldesign)

    Thanks for the reply. I have made the links across the top text however it is no different in that you still can’t click on the last one.

    I have also assigned the Z index of 1 to the div with the man on and 2 to the navbar div but still no luck as the text and div are not clickable.

    Any other ideas or anyone know what I am doing wrong here? Any help would be greatly appreciated, thanks.

    Thread Starter equaldesign

    (@equaldesign)

    I fixed it!

    I have just didn’t add the postion of the navbar div (relative or absolute – in this case relative). Once I added the position relative value in the css, and gave the navba a z-index of two and the image of the man a z-index of 1 it worked.

    Thanks jberghem.

    Your welcome! (told you ’bout the positioning & z-index trouble didn’t I ?? )

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS Layering’ is closed to new replies.