• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 560
  • Last Modified:

How to get fancybox above navigation menu?

Ok I have added a screen shot below with my source code and css. Basically you can see by the screen shot that my menu is above my fancybox image. Why is this and how can I fix this?

Thanks,
Tony
index.html
main.css
Screen-shot-2010-01-06-at-10.39..png
0
askurat1
Asked:
askurat1
  • 8
  • 4
  • 3
1 Solution
 
s8webCommented:
Is your menu flash?
0
 
Tony O'ByrneCommented:
It's tough to diagnose this without being able to use Firebug...  From the image I can't tell how much of the picture is being covered.  It could be something as simple as the white border on top pushing things down, or it could be a little more difficult in the positioning.

Have you got this online anywhere?
0
 
s8webCommented:
Never mind, I see that it isn't. Quaoar is right, it would be better if we could troubleshoot the output. The first thing that comes to mind is stack order (z-index). Try increasing the z-index values in fancybox.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
askurat1Author Commented:
0
 
Tony O'ByrneCommented:
@s8web: I did think of that, but then the issue becomes the images hiding the menu
0
 
Tony O'ByrneCommented:
There's something dynamically changing the position of the large image container.  When you resize the window, the picture moves around - that's what's causing the issue.  You need to look into keeping the position right where it needs to be.  I would suspect there's a fancybox option for this, but I've never used it before so I don't know for sure.

This is what's being changed (the style is being dynamically updated):
<div id="fancy_outer" style="left: 382px; width: 780px; height: 529px; display: block; top: 0px;">
0
 
s8webCommented:
That is the design of a modal window.

One layer is going to have to be on top of the other. You could move the image up with negative margin, but you're bordering on exceeding the display size of viewers that have their res set at 1024x768.

If it were me, I would reduce the size of the images.
0
 
s8webCommented:
The container is going to change to match the dimensions of the image. The fancybox js and css will attempt to keep the image centered.
0
 
askurat1Author Commented:
I understand that I could resize the image or put a negative margin but the real issue the the fact that fancybox blacks out everything on the page except for the image being viewed but its not blacking out my menu. Even if i resize it still shows the menu without being blacked out.
0
 
s8webCommented:
Try adding z-index:1; to

.navMenu { width: 516px; height: 20px; position: absolute; bottom: 8px; left: 28px; }

Like this:

.navMenu { width: 516px; height: 20px; position: absolute; bottom: 8px; left: 28px; z-index:1}

0
 
s8webCommented:
Actulaay, don't do that. Wrong div, sorry.
0
 
s8webCommented:
It's this that's causing the problem:

#mainHeader { width: 984px; position: absolute; overflow: hidden; z-index: 9998; bottom: 0; clear: both; margin:0; padding:0; height:75px; background:url(../images/layout/overview-gallerybottom20090106.jpg) no-repeat 0 0; }

Z-index is set to 9998 which is much higher than fancybox (100 I think) change 9998 to 1 and see what happens.

Sorry about the prior confusion.
0
 
askurat1Author Commented:
Thank you! Yes it was the wrong div but it helped me find my answer. I put it in the mainHeader and it worked.
0
 
askurat1Author Commented:
Yea I got it.

Thanks,
Tony
0
 
s8webCommented:
Good deal, thanks for the points.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 8
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now