Design Resources
The HR Tag
The HR (Horizontal Ruler) tag is a very helpful html element for
dividing up sections of text in a page, without having to resort to
one pixel high graphic. The problem is that left unstyled, your
leaving it up to the browser to determine how it looks. Which can
be indifferent at the best of times.
One way to control this is by using the available HTML
attributes:
align: [ left, center and right ]
noshade: (solid line)
size: [ pixel value ] line height of the
element
width: [ pixel or percentage value ] width of the
element
example.
<hr noshade size="1"
width="90%" align="center">
Sadly not all browsers will interpret these attributes the same
way, so the best way to get a consistent look is to use CSS.
What properties can you use?
width: [ pixel or percentage value ] specifies
the width of the element
height: [ pixel value ] specifies the line height
of the element
border: [ pixel value ] in this case it should be
set to zero
color: [ hex value ] this describes the color of
text within an element
background-color: [ hex value ] sets the
background color for the current element
text-align: [ ]details how the element will be
horizontally aligned.
You'll need to include both the color
and background-color attributes in the
style sheet as not all browsers will understand them. Browsers that
understand both, will draw a border around the element so it is
important to use the height attribute to control this.
example.
hr {
border: 0;
color: #9E9E9E;
background-color: #9E9E9E;
height: 1px;
width: 100%;
text-align: left;
}