Ultimate Fade-in slideshow not centering

[othelwaite]

I can't work out why it's not centering my images. None are being resized as they all fit within the 750 width and 450 height parameters. Any ideas?



HERE'S the DynamicDrive software page

thanks!

[jscheuer1]

This script doesn't resize your images. That can be arranged, but is best done in an image editing program. Generally images for the web should be optimized and (re)sized to be of the dimensions they will be presented to user as and with the least amount of bytes as possible.

The script will center your images of varying sizes within the presentational area of the slideshow provided that its dimensions are as large or larger than the widest image's width, and the tallest image's height. That is unless the page's layout uses <center> tags, align="center" attributes, and/or text-align: center; styles in such a way as frustrates the script's ability to do so.

The layout on the page linked to in your post does so at least via one or more uses of the align="center" attribute. The best solution to that is to redesign the page so as not to rely upon that, using instead the margin: 0 auto; style in conjunction with an explicit width to center elements. But that can get complicated to explain. If you want help on that, ask in the css section.

A quick fix on that page would be to set the align="left" attribute on the target container (addition highlighted):

<div align="left" id="fadeshow1"></div>

[othelwaite]

John - that didn't work at all for me. I removed all the center align tags and put in the margin: 0 auto; style and it turns out like this - all left-aligned:



I'm not a coder - so I'm probably not understanding something.

[jscheuer1]

That's not what I said to do. I said that if you want to you can, but that it's complicated. And that if you wanted to learn that you should open up a new thread in the css section for help laying out your page without align="center" attributes.

What I did suggest was keeping what you had and simply adding the highlighted to the fadeshow1 division:

<div align="left" id="fadeshow1"></div>

[othelwaite]

John - we were both correct. Your code worked - AND - I did not understand you. When you further explained I corrected it and it now works. Thanks!