PDA

View Full Version : centering images in the thumbnail viewer window



dibequiard
01-27-2009, 04:45 PM
div loadarea
http://www.barbaranascimbeni.com/Pages/EssaiGalerie.html

I'm using thumbnail viewer and it works fine, but I have pictures of different size and I'd like to have them always showing at the center of the viewing window, I went through the forum but couldn't find the answer. I believe it would be possible with a little code adjustement in the .js, but I don't know nothing about coding. could somebody help me?
I'd rather stick to div instead of introducing tabs, although if it's the only way (which I doubt) I'll do it.
Also I'd like to change the style of the text in the title under the picture, not so hot on times roman.
thank you
did

jscheuer1
01-27-2009, 05:39 PM
In future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

If this is the script I'm thinking about, you can use a table instead of a division for the loadarea:


<table><tr>
<td id="loadarea" style="text-align: center;vertical-align: middle;width: 250px;height: 200px;">
</td></tr></table>

Set its width to at least as wide as the widest image, set its height to at least as tall as the tallest image.

dibequiard
01-27-2009, 06:15 PM
thank you
I'll try again following your recommandations,
If I could I'd like to avoid using tabs and stick to div.
did

jscheuer1
01-28-2009, 12:31 AM
Why? There is virtually no difference in this case other than presenting your content as desired. Tables have drawbacks, but not in this case. If you want to make it otherwise just like a div:


<table style="border: none;border-collapse: collapse;table-layout: fixed;margin: 0;padding: 0;"><tr>
<td id="loadarea" style="margin: 0; padding: 0;text-align: center;vertical-align: middle;width: 250px;height: 200px;">
</td></tr></table>

Using the above styles (which of course can and should be in a stylesheet, selected for these elements by tag name, and/or class, and/or id), make it render just as fast as a div, and without any added layout space.

I know many folks are anti-table. But they are just fine when used either for tabular data (as they are really intended) or in the manner I just outlined, where none of their inherent weaknesses can come into play.