Articles > Creative Dividers for Your Web Pages

Creative Dividers for Your Web Pages

1. Horizontal Rules. Typically, horizontal rules <hr> are used to separate sections of text or images. It gives a clean, professional look to a web page. But horizontal rules make nice decorative elements, too. Here's an example. The dark blue lines at the top and bottom of the page are horizontal rules. As such, they add little or no load time to this page.

   Here's how to do it...

   The following code produces a horizontal rule one pixel high and coloured red (using a "named" colour). Note: This doesn't work in old browsers like Netscape 4. We have a solution for this below.

   <hr size="1" color="red">

This code produces a horizontal rule four pixels high and coloured dark green (using a hexadecimal colour). In addition I have made the rule 50% of the page width.

<hr size="4" color="#009933" width="50%">

You do NOT need to use the attribute "noshade" to make a coloured horizontal rule solid. It will always be a solid colour. Only if you leave out the "color" attribute does shading come into play.

2. One-pixel GIF. Netscape Navigator doesn't recognize the "color" attribute. Here's how you can get around it.

   Here's how to do it...
   
   Create a one pixel GIF in Photoshop or Paint Shop Pro and colour it whatever colour you want the line to be. Save it to the "images" directory of your web site.

   Then insert the tiny GIF image into your web page HTML code...wherever you want the horizontal rule to show up. Resize the image to fit the space you want it to occupy by adding the width and height attributes.

   You can use the same GIF over and over again, resizing it as necessary. Here are two lines you could use on the SAME Web page or different Web pages on your Web site. They look very different, but they use the very same one pixel, purple GIF.

   <img src="images/one_pixel.gif" height="1" width="400">

<img src="images/one_pixel.gif" height="5" width="200">

3. Cascading Style Sheets: Now, to bring this all into the 21st century, as far as Web design goes anyway, you can use CSS (Cascading Style Sheets) to add similar design elements and dividers to your Web page.
   
   I created a CSS class called "dottedline." The main attribute is called "border" and can be defined in many ways. Here I'm specifying a 1 pixel high, dashed grey line. I added an attribute called "padding-bottom" and specified it should be 20 pixels in height. That way my line won't be too close to the element it defines. I chose to apply it to the <li> element, but I could apply it to almost any other element on a Web page by using the element itself, as I did here with the <li> tag, or by using a <DIV> or <SPAN> tag.

Here's the CSS rule for the above dashed line:

<style type="text/css">
.dottedline {
border-bottom: 1px dashed #999999;
padding-bottom: 20px;
}
</style>

Have fun!

Request a Free Web Design Consultation Today

Copyright © 2001 - 2009 Able Webs, Burnaby, B.C. All rights reserved. Contact us at andrea@ablewebs.com.
Burnaby|Vancouver Web Site Design Company