What's causing my links to become unclickable?

[fuzzybabybunny]

http://www.victorlinphoto.com/landscapes/index.php

Links: Landscapes, Real Estate, Home, Artist, Contact

The little green balls (pagination in the css) is somehow blocking the links from being clicked.

I want the pagination balls and the links to be aligned with each other like it is now, but how do I get it so the pagination doesn't block the links from being clickable?

z-index doesn't seem to work worth a damn.

Hopefully the solution can render both pagination links and word links clickable.

 

[aceO07]

If you take a look at the area that your #slides and #nav take up, you'll see they both share the same area that you want clickable.

So, currently either the green balls can be clickable OR the word links. Or, the word links area could be shifted down. Or maybe some extra work could be done so that areas don't overlap without moving them.

Set the z-index for #slides to be -1 or something if you want only the word links to work.

Firebug is great for seeing this stuff if you don't already use it.

 

[fuzzybabybunny]

So is there no way for the green balls and the word links to BOTH be clickable, and BOTH be in line with each other as it is now?

I don't want the green balls to have to be on a separate level from the word links because I'm going to be using this on pages that are short on vertical space.

 

[aceO07]

(I'm not a frontend developer.)

Maybe you use javascript to detect if the mouse is over a certain area to swap their z-indexes?

Or change the area of the #slides. Make it so it's not as wide and doesn't overlap the #nav. Probably using some absolutes positions and etc. Maybe use a table?

 

[PhatoseAlpha]

Try setting #slides to have a fixed height of 380px and visible overflow. That way your rotator ul will overflow the slides div instead of causing it to expand.

Current #slides is expanding in height to accommodate the rotator ul. It expands the entire #slides box, and that box is blocking your navigation sections.

The z-index on #nav is currently being ignore. Turning #nav to position:relative makes it work, but then you have a different problem - the nav menu div blocks the rotator list.


So, remove the z-index from #nav, and set #slides to fixed height of 380px with visible overflow. The #slides box wont expand and cover #nav, except for the ul - which is exactly what you want to happen.

 

[fuzzybabybunny]

Try setting #slides to have a fixed height of 380px and visible overflow. That way your rotator ul will overflow the slides div instead of causing it to expand.

Current #slides is expanding in height to accommodate the rotator ul. It expands the entire #slides box, and that box is blocking your navigation sections.

The z-index on #nav is currently being ignore. Turning #nav to position:relative makes it work, but then you have a different problem - the nav menu div blocks the rotator list.


So, remove the z-index from #nav, and set #slides to fixed height of 380px with visible overflow. The #slides box wont expand and cover #nav, except for the ul - which is exactly what you want to happen.

That did it! I don't know why it did it since I'm a noob, but it did! Thanks! Pulling my hair out all night yesterday trying to figure this crap out. Now I gotta go back and figure out exactly why it works.

Never heard of visible overflow before.