Pretty images with easy CSS

by Peter

A pretty flower for a pretty girl

A pretty flower is pleasing.

It is useful to have a “fnutt” for quickly placing an image in a blog post or on a website. I find that I like to use images a lot – they make things prettier and friendlier, I feel.

Here is a fnutt I use – often slightly modified, for instance with a thinner frame or with box shadows.

I keep it around for quickly and easily posting images that are floated either left or right, have a little frame around them, some padding, and with a nice centered caption underneath. All I have to do is to paste in the HTML code, decide which side I want the image on, and write in the link to the image and a little text, and there it is.

I use “.imgleft” and “.imgright” to position the images to the left or right and use margins that depend on the side the image is on. I could easily have added classes for other small presentational variations too, say for a shadowed frame or for different sizes of images.

Here is the CSS:

1
2
3
4
5
6
.imageholder { text-align:center; margin:0; width:258px; }
.imgright { float:right;margin:1em 0 2em 1.5em; }
.imgleft { float:left;margin:1em 1.5em 2em 0; }
.imageholder img { border:4px solid #ddd }
.imageholder p { font-size:90%; font-style:italic;
    margin:0; padding: 0.2em 0.7em; }

In the CSS I add a 4px border to the image. So a 250px wide image needs an imageholder that is 258px wide. Also note that in the CSS for “imageholder p” the first value – 0.2em – is the padding on the top and bottom of the caption. It is easy to adjust!

Here is the HTML:

1
2
3
4
<div class="imageholder imgleft">
<img src="/folder/image_name.jpg" width="250" height="210" 
     alt="" /><p>Some text.</p>
</div>

If I had wanted it on the right side, I would have used:

1
2
3
4
<div class="imageholder imgright">
<img src="/folder/image_name.jpg" width="250" height="210" 
     alt="" /><p>Some text.</p>
</div>
A pretty flower for a pretty girl

Notice that it is set up for images that are 250px wide. To use it every once in a while with differently sized images, I simply alter the width definition in CSS on the page.

As I mentioned, it is easy for you to add elements to the “fnutt” to make it more useful for you. Say you wanted a fancy CSS3 effect like box shadows. All it would take would be to add a new CSS style definition, for instance:

1
.imgshade { box-shadow: 3px 3px 5px #999; }

And now, to produce the image above, perhaps this time without a caption, you could use this HTML:

1
2
3
4
<div class="imageholder imgright imgshade">
<img src="/folder/image_name.jpg" width="250" height="210" 
     alt="" />
</div>

It is very useful to have a few “fnutts” for doing some of the most basic and elementary tasks involved in building web pages. Using and reusing them with the same style gives style consistency. It also makes it easy to improve and change the site: just an added touch to the CSS, and all your pages magically look different!

Related Posts:

Leave a Comment