CHouseLive

Styling and Placement of Images within a Web Page

CSS can be used for both quick styling of images as well as placement within the web page copy. This tutorial will describe how CSS can be used to apply a border and drop shadow to images as well as demonstrate three CSS image placement techniques that also allow captions to be placed below each image.

Demonstration

Styling the Images

Images can be enhanced by adding borders and applying subtle drop shadows using the following CSS, which is applied directly to the image tag (img).

img{
  padding:5px;
  margin:0;
  border:#DBDBDB solid 1px;
  -moz-box-shadow: 2px 2px 5px #DBDBDB;
  -webkit-box-shadow: 2px 2px 5px #DBDBDB;
  box-shadow: 2px 2px 5px #DBDBDB;
}

padding between photograph and border

padding:5px;

Padding is used to create a 5px gap between the edge of the picture and the border.

background:#fff;

If your page background is not white, then you can apply a white background to the image by adding background:#fff; to your style.

border:#DBDBDB solid 1px;

Applies a light, 1 pixel, solid border around the image.

box-shadow

The CSS3 box-shadow property is used to apply the drop shadow.

At time of writing this tutorial, box-shadow is still very new and the exact method of use has not yet been set. The following provides the best cross browser support, although none of the properties are supported by Internet Explorer (IE).

  • box-shadow: x-off-set y-off-set blur color;
  • -moz-box-shadow: 2px 2px 5px #DBDBDB; /*Supports Firefox and other mozilla based browser*/
  • -webkit-box-shadow: 2px 2px 5px #DBDBDB; /*Supports Safari, Chrome and other webkit based browser*/
  • box-shadow: 2px 2px 5px #DBDBDB; /*Supports other browsers including Opera*/

Modern Browsers vs Internet Explorer

If it is very important that all browsers display the exact same thing, look at SohTanaka's tutorial entitled: 5 ways to spice up your images using CSS.

Image Placement

Now that we have added a little style to our images, we will look at three ways they can be placed within the copy of a web page; centered, aligned left with the text flowing past on the right hand side and aligned right with the text flowing down the left hand side of the page. The advantage to this technique is that image captions can easily be added above or below the image.

CSS

To make this possible, three class styles must be set up using CSS.

Centering Images

The first class we will create, will center an image within a column.

.image-center{
  text-align:center; /*Centre the image within the paragraph*/
  padding:10px; /*Creates a little space around the image*/
  margin:0; /*Remove any pre-set margin spacing*/
}
Image alignment - left

Second we will create a style to place the images on the left hand side and allow the paragraph text to flow down the right hand side.

.image-left{
  float:left; /*Places the image on the left while allowing paragraph text to flow down the right hand side*/
  padding:5px 20px 10px 5px; /*Creates space around the image.*/
  margin:0; /*Remove any pre-set margin spacing*/
}
Image alignment - right

Last we will create a style to place the images on the right hand side and allow the paragraph text to flow down the left hand side.

.image-right{
  float:right; /*Places the image on the right while allowing paragraph text to flow down the left hand side*/
  padding:5px 5px 10px 20px; /*Creates space around the image.*/
  margin:0; /*Remove any pre-set margin spacing*/
}
Styling the caption text

Although each of these properties can be set directly in the styles above, because we want the same look for each caption, it is easier to style them all at once as shown below:

.image-center, .image-left, .image-right{
  font-family:"Times New Roman", Times, serif; /*Changes the font type to a serif font*/
  font-style: italic; /*Changes the font style to italics*/
  text-align:center; /*Centres the caption below the image*/
}

HTML

Now the styles are set, it is just a case of applying the style to the paragraph tag which we want to place.

Image alignment - left
<p class="image-center">
  <img src="images/capetown/sign.jpg" width="400" height="195" alt="V & A Water Front - Capetown" />
  <br />A centered image
</p>

centred image

Image alignment - left
<p class="image-left">
  <img src="images/capetown/barrel.jpg" width="200" height="150" alt="Wine Farm" />
  <br />Image set to the left
</p>

image aligned left

Image alignment - right
<p class="image-right">
  <img src="images/capetown/lighthouse.jpg" width="150" height="200" alt="Light House" />
  <br />Image set to the right
</p>

image aligned right

Last Tip

These techniques make laying out images within a web page easy. The only problem with floating images left and right, it can happen that the paragraph text flowing down the alternate side sometimes creates orphans as it slides in under the image as shown below:

orphan

See how the last line of the paragraph text next to the image has slipped below the image, creating an orphan?

Thank you to SohTanaka it turns out the solution is simple. Add the property overflow: hidden; to your paragraph style, which will force the paragraph to remain aligned to the original margin.

stoping orphans

Demonstration

Copyright © CHouseLive - 2012 - All Rights Reserved