stack a div under an absolutely positioned image that changes in scale

Question

Hello,

I used a jquery image scaling plugin for a large image on this page I am building: http://seans.ws/sandbox/test/thrive/

I am trying to put a navigation div below the image, but I cannot do so because the image is absolutely positioned, and the scale of the image changes, so I cannot just specify a padding-top value for the navigation to get it to show up under the photo.

Any help would be greatly appreciated

Answer 1

I would put both image and navigation div in one container and specify absolute position on it (instead of image). It seems to be simplest and most straightforward solution.

Answer 2

First, does the image have to be absolutely positioned? Generally if you want the image to be placed relative to other elements on the page or you want other elements on the page to be placed relative to the image they are placed relative, sometimes within an absolutely positioned <div>

If you explain why the image has to be absolutely positioned there may be an easier solution.

Assuming that absolute positioning of the image is required, the only possibility I can imagine is either modifying the jQuery plugin or making a second javascript to edit the padding-top as the image is resized.

If you need the image absolutely positioned on the page but relatively positioned to all other elements, I suggest putting the image and the content (which you want to appear underneath it) inside of an absolutely positioned <div> element, but leaving them each relatively positioned.

Answer 3

You could get the height value, and then work out how much padding you need.

var myheight = $('.maxAtOrigImageSize').height();
$('.nav').css('paddingTop', myheight+'px');

However, you would need to add an event for when the window changes size, so that if the user adjusts the window size, you can update the padding of the nav.

I'm answering your question, but I feel there is a cleaner solution. I would create a containing DIV for the resized image to sit in, and follow that with a nav DIV. The nav would always naturally be in the right place when resized, at the bottom of the image. You may want to consider changing the way you implement this.