(Site Identification)

'Eye' Focus: Web Support Tutorials

(Page Content)

Image Help: Lines & Rules

Table of Contents:

These are graphical lines that give parts of a page a visual separation, otherwise known as horizontal rules.

(to Top) Sampling of Image Rules


blue marble, bluemarb.gif

colorful celtic design, celtic_bar.gif

cyan and cylindrical, cy_bar.gif

white to gray gradient, gradiate.gif

short rainbow, rain_lin.gif

long rainbow, rain_lin2.gif

crumpled paper, crumpled.gif

sand texture, line_desert.gif

blue to green bar burning like a fuse, net_bar.gif

(to Top) Advanced CSS Technique

Instead of simply putting an image in your page to serve as replacement for an HTML horizontal hule, try using an advanced CSS technique. By following the example below you will still be providing the proper HTML context while displaying the rule graphically.

CSS Coding for the Horizontal Rule: (skip code)
<style type="text/css" media="screen, projection"><!--
div.hr{
 text-align: center;
}
div.hr div{
 background-image: url('/PATH_TO_IMAGE/IMAGE_NAME');
 background-repeat: none;
 background-position: center;
 width: WIDTHpx;
 height: HEIGHTpx;
 margin: auto;
}
hr{
 display: none;
}
--></style>

Remember to replace the necessary code pieces for your image rule.

Notice also that this CSS code is defined only for the media: screen, and projection. This is important as you only want to use the graphic on the visible screen. Other media types like print, Braile, teletype, and others should recieve the standard HTML rule.

You may wish to place this CSS code in your linked style sheet, intead of using the STYLE block. To do that, simply place the CSS code within a media definiton and add it to your CSS file: (skip code)
@media screen, projection{
 ... place CSS definitions here ...
}

HTML Coding for the Horizontal Rule: (skip code)
<div class="hr"><div><hr></div></div>

Example Horizontal Rule using this techique: (skip code)

What's the benefit?

You might think it a waste of effort to code the rule in this maner, after all, the result looks the same. The difference is that when CSS is not supported the HTML rule is then displayed. This is very much preferred over the absense of the desired separation. Small screen devices most often do not support CSS and this method will still provide the desired content separation.

Another benefit to using this approach is that you can now change all the horizontal rule images throughout your site from your style sheet. Imagine changing dozens or hundreds of rules in a large site by changing a few lines of CSS code.

Main Page of Tutorial Next Page of Tutorial


[Updated: Sunday, November 18, 2007]