Creating "Picture Frames" Using Style Sheets

Okay, so you have been working on a nice picture that you want to display on your web page. If it was an actual physical picture that you were going to hang on the wall, then you would frame it before hanging it. Being a picture to go on your web page, you can't place it in a physical frame but wouldn't it be nice sometimes to be able to place a picture on your web page in such a way as to give it the appearance of being in a frame.

Well now you can (at least for some browsers), and it doesn't even require the creation of another graphic image to use as the frame, just a little manipulation of the html used to place the picture on your page.

Image without frame. Okay so here at the left of the screen, we have an image that we think would look nicer if it were to be placed in a frame.

To create the frame around the image, we use some style sheet class definitions and use them on div tags that are nested inside a table defined to have the same width as the image (the borders will automatically enlarge the table to the required size to make them fit). In browsers that don't support the attributes, we wont get an error but we wont have the picture frame display either. We are no worse off in this case than if we hadn't defined the picture frame in the first place.

The style sheet declarations that we need are as follows (don't forget the dots at the start of each line or the code wont work).

 .frame{border-style:ridge; border-width:15px; border-color:#cc9999 #996666 #996666 #cc9999;}
.innerframe{border-style:solid; border-width:25px; border-color:#ffffff;}

To display the above image centred in the page and surrounded by a picture frame we use the following code.

 <table class="centre" width="150" border="1" bgcolor="#ffffff"
cellpadding="0" cellspacing="0"><tr><td><div
class="frame"><div class="innerframe">
<img
src="img/thirlmer1.jpg" align="middle" width="150" height="203" border="1"
alt="Image without frame." /></div></div></td> </tr></table>

The code shown in bold is that which needed to be added around the image in order to create the frame. If the browser that you are using to display this page supports this effect then you will see a picture frame around the image displayed below.

 

Image without frame.

Assuming that you are using a browser that supports this effect, you can see for yourself how much the frame improves the appearance of the enclosed picture.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate