Thumbnail Viewer II Center image

[arnolfo]

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem: I cannot control the center function of the enlarged image.

I was able to sent my small thumbnails in a centered table, however the enlarged image will only display to the left. I've tried css on the div with no results. Does the .js file need to be edited? I have no .js experience.

Thanks in advance.

site is below. (very 1.0)
http://www.martinezillustration.com/...ustration.html

[jscheuer1]

Add these styles to the page:

#loadarea {
	text-align: center;
}
#loadarea img {
	float: none !important;
}
#Main {
	height: auto !important;
	min-height: 550px;
}

As long as they don't mess anything up for other pages using the same stylesheet (probably won't, but might), they can go in the martinez.css file. Otherwise put them in a separate stylesheet used only by that page.

[arnolfo]

Thank you John, that worked.

I'm left wondering what this "important" function is. Does that actually control css or is that just a notation? I had set the the float for the img to none before I submitted my question but it had no effect.

Anyway, thanks again!

-a

[jscheuer1]

!important is a keyword in css. It overrides other conflicting styles regardless of their precedence. Normally a conflicting style will have precedence if it comes after a given style it conflicts with. But sometimes, depending upon the specificity and/or weight of the selector, it can still have precedence even if it comes before the given style it conflicts with. Classes are often given more weight than id's. I believe the style for the page floats all images in an element with a specific class left. The loadarea is an id and falls inside that classed element, so we have class vs. id, as well as the order in the stylesheet(s) (order counts even when there are separate stylesheets, later sheets generally having precedence) to consider. To be assured of enough weight to have precedence, I used the !important keyword. Same basic logic for the height, as it is defined elsewhere as 550px, though I don't think class is involved there, so it would just be order.

If you were to carefully go through the existing and the new styles that bear upon this, their order and selectors, you should eventually be able to come up with a way to do it without the use of the !important keyword.

But since this is just for this one feature, it's much easier to just use !important.

[arnolfo]

Aha! Thanks for the explanation. Very useful.

-a