Aligning images at bottom of div

[Gazzieh]

I have a footer div, containing an image which is has a z-index to bring it forward so that the text can be scrolled behind it. However, this single image is a gif with transparency and where this transparency exists, you cannot click on any hyperlinks that rest behind it.

So (whew) I did think of separating the image into sections and floating them left. However, the images then scatter along the top of the div and fail to line up.

I did try vertical-align in the holding div and in the #footer img declaration but to no avail.

Any ideas? Address is

http://www.garynewport.com

 

[ChrisHirst]

and where this transparency exists, you cannot click on any hyperlinks that rest behind it.

Well, no you wouldn't, because you are still clicking on the image.

I would slice the image into 3 sections horizontally along the top of the trough, then the top section vertically with the high peak in one and the two lower peaks in another piece, so you can use the z-index to put the left hand section below the text.

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[Vragabond]

Since the image is acting as background, should you not put it in the code as a background image?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Gazzieh]

Thanks Chris. I had sliced it into pieces (and yes, I did know the reason why I couldn't click btw) but only vertically into 5. I'll try it your way.

Not too sure Vragabond if you mean because it is the background to the footer or is a background image per se. The latter is not correct but the former was tried. However, it was far more difficult to position it correctly, with the image partly repeating at the right edge. I'll try again though and see where it takes me.

 

[Vragabond]

I added the background to your #page element. It worked well apart from the content iframe overflowing into the background. Are you expecting the content from the iframe to flow over the mountain or is that a glitch in your design that you're still working on?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Gazzieh]

Yeah, the image as a background is fine so whatever was the problem before has been sorted in all the fitting together.

Yes, it is the glitch I want to fix. I want the text to scroll from behind the mountains but at present the hyperlinks for the climbing photos is unclickable because it rests behind the image.

Chris' idea was good but the div that holds the images together is set to a z-index of 2. No matter what I set the z-index to for the images they will be all relative to the container div and so in front of the text! AHHHH!

My idea was to split the image and then only put those with the mountain back in but then the images do not float correctly (damn them!).

 

[Gazzieh]

okay. Solution!

Firstly, the issue is NOT the image but the containing div. After doing a little reading it turns out that an overlaying div, even when empty, does not allow the user to click on any underlying links. So, my footer with a z-index of 2 would never allow anyone to click on a link that fell behind it, which would happen whenever the text flowed more than half way down the iframe.

Solution? I have separated the image into smaller divs and positioned these absolutely in relation to the bottom, left (or right) in relation to their original positions. This has even allowed the scrollbar to be available all the way down (before you couldn't scroll easily once the scrollbar was down at the bottom.

Works in Firefox3, Opera, Safari and IE7.

Thanks for the help Chris and Vragabond.