If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

How to manage overlapping links and divs?

I have a page containing two divs: The first is the logo of the site, and it is mostly transparent. The second one is a navigation bar. These two divs are partially overlapping.
The problem is that the navigation bar is on top of the logo, and hiding part of it:http://jsbin.com/oDAcodO/2/edit
This can be solved by adding z-index value to the logo:http://jsbin.com/oDAcodO/3/edit
The problem now is that the logo is on top of the links of the navigation bar.
This means that hovering with the mouse on a link will actually be hovering on top of the logo and wouldn't trigger the link.
My question is if there is a way to solve this issue?
I thought of having another transparent bar on top of all, and this one will be the actual link.
This sounds very cumbersome: It will force me to include a div with no contextual meaning and also require some JS code to make the real links in the navigation bar below to change color upon hovering.

When you have two div, as you do, they Are drawn in the HTML page one after the other. That's one before the other. We can move them (position them) with margins.
When you use position: absolute; and position: relative; you take the div out of the normal flow of things and create major headaches for yourself.

Code:

#site-logo{
opacity: 0.5;
background-color: black;
height: 20px;
width: 500px;
//position: absolute; //REMOVE THIS
border: 1px solid red; //PUT IN SO YOU CAN SEE THE DIVS
}
#navigationBar{
//position: relative; //REMOVE THIS
margin-top: 90px; // THESE TWO ARE THE SEPARATION BETWEEN THE TWO DIVS
margin-bottom: 12px;
border: 1px solid red;//PUT IN SO YOU CAN SEE THE DIVS
}

You might want to use margin: 0 auto; on the logo div

You should google "understanding css positioning".

Evolution - The non-random survival of random variants.

"If you leave hydrogen alone, for long enough, it begins to think about itself."