Are you tired of the same old boring bullets and horizontal rules? This tip will tell
you how to break out of the use of browser generated bullets and horizontal rules.
Horizontal Rules
Here's the browser's version of a horizontal rule.
Simple, plain, and Boring!
Now here's a custom horizontal rule.
Now an explanation. Our custom horizontal rule is merely an image mocked up to look
and act like a horizontal rule. Here's the HTML code.
<DIV align="center">
<IMG SRC="pic.gif" border=0 width="100%" height=4>
</DIV>
The <DIV> tags make it centered while the width
and height image attributes make it thin and as long as the document.
However, you can customize it through these settings. Changing the width attribute to
a different percent will make the horizontal rule smaller while the height attribute
will make it thicker. Keep in mind when you create the image to make it long and thin.
640 x 5 are good dimensions to make a custom horizontal rule.
Bullets
For information about bullets and lists go to our
HTML tutorial.
Here's the browser's version of bullets.
- The disc bullet.
- The circle bullet.
- The Square bullet. Notice when there's a long phrase
that it's started on a new line and indented from the bullet.
Now here's some customized bullets.
The custom bullet.
A red custom bullet. This sentence will wrap and start on the new line under the bullet,
not indented from it. That's one bad thing about using custom bullets.
This is similar to the horizontal rule in that its just images mocked up to look and
act like bullets. Here's the code.
<DL>
<DD><IMG src="pic.gif" align="absmiddle" width=10 height=10>
text goes here...
<DD><IMG src="pic.gif" align="absmiddle" width=10 height=10>
next bullet text goes here...
...
</DL>
You have to repeat the <DD><IMG> tags for every bullet.
By using the <DD> tags we can control the amount of indenture by
simply adding <DD>s. The align attribute must be set to
absmiddle for it to sit like a bullet. A quick note about absmiddle.
The absmiddle attribute insures that the text is vertically centered next to
the image. The bad side to all this is that if
a phrase wraps, it starts under the image, not indented from it. There's two ways
around this. You could make sure the phrases are short enough to not cause a wrap, or
use tables to format the bullet's and phrases
placement.
Upload
