zindexed div shows up in the wrong place

April 12th, 2008, 12:10 pm

Well, it's been a few months since I've posted and apparently Ozzu got upgraded to a new version of phpbb and my password didn't convert. Apparently I didn't use my current email address when I signed up so I can't get my new password emailed to me, so here I am as Ishii the second.

Anyway, on to my current problem. I am redesigning my web site and I'm almost done with it, but as soon as I dropped my slideshow into the background div on my main page, it shifted my popup divs down. I'm pretty sure that's completely confusing in text, but you can see the problem here: http://www.staticfreephoto.com/new. When you click on about, contact, or pricing, I need the div that shows up to show up over top of the background image, not shifted down towards the bottom of the page like it is now. I can't figure out what's causing this.

April 12th, 2008, 12:40 pm

So I'm really confused... in my css I changed my top:60px; to top:0; saved it, then changed it back, and now it's working. I have no idea why that would make a difference but it seems to be working now.

April 12th, 2008, 2:07 pm

OK... having a new problem now. In IE my site renders fine, however, when I load it up in firefox I have a problem where I am unable to click on any links except on the div with the highest z-index value. Currently this is my navbar div on the left side, however, I would like to have links on the divs that are 'behind' that one and have them work. Any suggestions?

[righteous_trespasser]

April 13th, 2008, 11:36 pm

I don't see the difference ... all that I see is that on the gallery page the header image is missing ...

April 14th, 2008, 7:53 am

Click on contact, then try clicking on my email address - IE allows you to click on it and it will bring up the mailto: link, but in firefox you can click all day and nothing will happen.

Edit - just noticed that the email link on my pricing window works fine... going to investigate what's different between the two. Could have sworn that I made them the same.

April 14th, 2008, 8:12 am

Try using position: relative; it should get the link on the top

April 14th, 2008, 12:14 pm

SteeleR wrote:

Try using position: relative; it should get the link on the top

You mean in the css for the div that contains the link? I did this and it does not make any difference. I haven't had time to experiment with it, but I noticed that the link does work on my pricing page, I'm thinking that the problem is that About, Contact, and Pricing are all on the same z-index, and since Pricing is the last one in the html it is "on top" of the others.

[jameson5555]

April 14th, 2008, 1:11 pm

Quote:

I'm thinking that the problem is that About, Contact, and Pricing are all on the same z-index, and since Pricing is the last one in the html it is "on top" of the others.

I think that's it, too. Have you tried moving it forward by putting a higher z-index on your contact div?

Code: [ Download ] [ Select ]

#contact{z-index:9999;}

April 14th, 2008, 2:16 pm

jameson5555 wrote:

Quote:

I'm thinking that the problem is that About, Contact, and Pricing are all on the same z-index, and since Pricing is the last one in the html it is "on top" of the others.

I think that's it, too. Have you tried moving it forward by putting a higher z-index on your contact div?

Code: [ Download ] [ Select ]

#contact{z-index:9999;}

It seems the only thing that does anything is to change the order of the divs in my html file... changing z-index values doesn't change anything. This doesn't really work for me as I need to place links on more than one of my divs and have them work. I also have onclick events tied to each of the divs and that only works in the div that is defined last in the html file. Any other suggestions?

[jameson5555]

April 14th, 2008, 2:32 pm

Hmm.. so it sounds like using display:none makes the divs transparent but keeps them there so you can't interact with the divs beneath...

What if, instead of using display:none you used positioning to get them out of the way? For example, position all the maincontainer divs at margin-left-9999px; Then, use your JavaScript onclick function to change it to margin-left:auto; when you click on the nav links.

By the way, how do you like using mootools? Has it been pretty easy to work with, or do you have to have a lot of JavaScript knowledge first?

April 14th, 2008, 11:17 pm

jameson5555 wrote:

Hmm.. so it sounds like using display:none makes the divs transparent but keeps them there so you can't interact with the divs beneath...

What if, instead of using display:none you used positioning to get them out of the way? For example, position all the maincontainer divs at margin-left-9999px; Then, use your JavaScript onclick function to change it to margin-left:auto; when you click on the nav links.

By the way, how do you like using mootools? Has it been pretty easy to work with, or do you have to have a lot of JavaScript knowledge first?

I'll have to give this a try in the morning... too late to try making changes right now. I actually didn't write the mootools script, I found what I'm using on a page that offered it up as a free gallery script and it fit what I needed so I integrated it and wrote a bit of php for it to generate the image list based on a directory listing... nothing terribly complicated. I'm a hack at most everything... I learn just enough to get the job done, which is probably why I'm struggling with this so much.

[jameson5555]

April 15th, 2008, 6:53 am

Ishii the Second wrote:

I learn just enough to get the job done

Is there any other way?

April 15th, 2008, 10:22 am

jameson5555 wrote:

Ishii the Second wrote:

I learn just enough to get the job done

Is there any other way?

I suppose not. On a side note... Woohoo! I have my original account back

April 15th, 2008, 10:49 am

I also notice all the second posts got merged with yours

[jameson5555]

April 15th, 2008, 10:56 am

Nice! Welcome back Ishii the First