WordPress.org

1. equaldesign
   Member
   Posted 3 years 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 - http://www.cliffbashforth.co.uk/index.php

   Thanks,

2. jberghem
   Member
   Posted 3 years ago #

   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
   http://htmldog.com/reference/cssproperties/z-index/

3. equaldesign
   Member
   Posted 3 years ago #

   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.

4. equaldesign
   Member
   Posted 3 years ago #

   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.

5. jberghem
   Member
   Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.