VIAV Eagle Head Logo

Experience The Beauty of Canada's West Coast - Plan an Adventure Vacation, Come Visit Us!

Building a Graphics Panel With CSS - No Tables Please

Close up of bottle brush

Close-ups can be intricate and ornate

The Lime

Great detailed photo - lousy composition for stock

Yellow Flower

Feel the clean air after a summer shower

Leaf Close Up

Close-ups can be fine art

Center Picture

Sometime you only show the center cut

According to most stock pricing sources, photos of flower are so plentiful that they are of very little value. These photographs were enlarged to 30 inches by 40 inches. I sometime rent space at arts & craft fairs and display them. The size, color and brightness of the photos draw attention. Passersby stop to observe. I later convert them to portrait customers. ...

Working With the CSS Code

Close up of bottle brush

The same CSS code can be used to float single pictures left or right with captions below them.

This page was built to demonstrate that it is possible to build a display of graphics and text without using a table structure. If you click the Restore Down button on the top right corner of your browser and make this page narrower you will see how the page rearranges itself. You will notice that I have set a min-width which is supported by FireFox and Netscape. IE automatically lengths the container so it decays gracefully. If you want to fix the width of the graphic panel so it does not squish or expand remove the comments around the width command in the .OuterPanel definition below.

The CSS code to build this page is shown in the following box. You can either include this in your page or block or house it externally in a CSS file. If you want to hold it internally you can copy and paste the code below directly since it begins and end with the appropriate Style commands.

Creating and Linking an External CSS File

If you already have an external CSS file you can copy the code above and place it in the external file. Remove the beginning and ending style commands if you do this. If you don't have an external css file create one in your support-files folder (for uploaders) or in a know location for block builders.

To hook the external CSS style sheet your page or block use the following command in your file header (for uploaders) or in an early header block (for block builders). (Can someone tell me which block is the best place to insert it? Thanks)

<link href="yourccsfilename.css" rel="stylesheet" type="text/css" />

Be sure to insert your chosen css file name in the statement above.

The HTML Code for The Graphics Panel

The code in the following box goes on your html page or building block. Here you can change the images and text as you see appropriate. The display is built with three ImageBlock objects. Note the nesting in each block to group images and titles.

The first ImageBlock is floated left, the second is floated right and the third is centered in the OuterPanel by setting its left and right margins to auto. I hope you can use this code to spring board your knowledge and confidence working with CSS code.

Eagle Head LogoLast updated: . Privacy Guarantee: Your privacy is guaranteed. No personal information, including email addresses, will ever be sold or passed to third parties.
Don Cowper, #17, 500 Colwyn Street, Campbell River, BC, Canada, V9W 5J2 Tel: +01 250-286-4661

© 2005-2006, All Rights Reserved.