i'm using jquery to crossfade images... after much searching i found a script that works for me... capable of displaying images at 100% width of container (height is not set therefore remains variable to width) and remain partially overlapped by nav bar...

the only problem i face... since height is not set... the div's below the rotator are hidden behind the images... i cannot realize how to get the text to appear below the images... here's a look at the code... any thought's or ideas would be greatly appreciated:

Otherwise some images are going to stretch all the way down the page unless you have cropped images to all the same initial size.

Be careful with absolute positioning for your columns as it means you won't be able to have a footer stretch under both columns. Usually in a two column layout you would float one of the columns if you need a full width footer.

Hyperdelicious
—
2011-05-09T13:52:05Z —
#3

Yes, all images are of equal height... to maintain some consistency so nothing funky happens between transitions...

I also thought about adding a min-height to the slide div... however ... since the layout is fluid in width and height... a smaller browser window creates greater spacing between the slideshow images and the copy... and a larger browser window creates smaller spacing between images and copy... this is not consistent... therefore undesirable

would it be possible... to have a place holder image... one that loads before the slide show... or maybe a transparent gif over the slide area... and actually that might be a viable solution... any ideas to quickly put a transparent gif (png) on top of the slide area?

Hyperdelicious
—
2011-05-09T14:35:28Z —
#4

GOT IT!

Thanks Paul O'B for hinting to a solution "The images in the slide are placed absolutely and so take no space in the flow" ... so filling the space with a transparent image of the same dimensions and set to 100% width... will work to offset the lack of space set by the rotator and cause copy div to show up underneath the slideshow: