If you add the following code to your CSS, it should solve the problem of the images shifting to the left after you mouseover them:
img.image_r { margin: 0 auto; }
This code makes sure that the images are centered within the thumbnail divs. I'm not sure why they were shifting, but you never explicitly centered them in the first place.
Also, I noticed you're using a few bad habits. In particular: -never use <b> tags or any other old HTML tags that dictate design styles. This should be done in CSS instead. -close all image tags, so they should look like: <img src="something.jpg" /> -close all br tags. they look like: <br /> -make sure all XHTML and CSS code is indented properly so you can easily see which elements are nested inside of which. Use tabs to indicate hierarchical structure. -the width you've set for #container in the CSS is 1200px - this is very wide... that's fine, so long as you're aware that some people may have to scroll to see the full width of the page.
Also, you're not using JQuery, so you might as well remove the jquery script from your code. The way you've done it is with plain Javascript, which is a good exercise. Once you're comfortable with it, you should try to use JQuery.
If you add the following code to your CSS, it should solve the problem of the images shifting to the left after you mouseover them:
ReplyDeleteimg.image_r {
margin: 0 auto;
}
This code makes sure that the images are centered within the thumbnail divs. I'm not sure why they were shifting, but you never explicitly centered them in the first place.
Also, I noticed you're using a few bad habits. In particular:
-never use <b> tags or any other old HTML tags that dictate design styles. This should be done in CSS instead.
-close all image tags, so they should look like: <img src="something.jpg" />
-close all br tags. they look like: <br />
-make sure all XHTML and CSS code is indented properly so you can easily see which elements are nested inside of which. Use tabs to indicate hierarchical structure.
-the width you've set for #container in the CSS is 1200px - this is very wide... that's fine, so long as you're aware that some people may have to scroll to see the full width of the page.
Also, you're not using JQuery, so you might as well remove the jquery script from your code. The way you've done it is with plain Javascript, which is a good exercise. Once you're comfortable with it, you should try to use JQuery.