Question

I am learning to style photos with css. I centered a photo, but when I resized it by halving its original dimensions, the left and right borders do not wrap around the image. The top and bottom of the border are correct.

I have not found any tutorials or responses for similar issues and I would appreciate your thoughts on resolving this issue.

.img {
         text-align:center;
         margin-top:80px;
         margin-bottom:0px;
         padding:0px;
         border:4px solid #F2F2F2;
         }

The example website is at http://nspowers.org.
A link to the full stylesheet used is http://nspowers.org/stylesheet/stylesimgquestion.css and the image properties are at the very bottom.

Thank you

Answer 1

You’re not styling the image itself rather the container div that has the image inside. If you change the selector of your CSS from .img which targets elements with the class img to img (note the missing dot) you will target all images.

Or if you want to be more specific, you could add it to all images with a certain class by calling img.myClass which will target all images that have the class myClass.

Although I’d advice you not to use .img as a class name since it can be confusing.

Update

Here’s a full example of the code, without all the clutter from other classes and elements.
You can view a live demo in this fiddle

HTML

<div class='centered'>
<img src='http://nspowers.org/excomm_photo.jpg' height="251" width="380"/>
</div>​

CSS

.centered{
    text-align:center;
}

.centered img{
    border:5px solid blue;
}​