Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: Web Design
Using Special Keyboard Characters as List Bullets and Link Separators
By BasicTemplates.com with External CSS

Are you bored with the old, ugly list bullets that HTML provides? Of course, we all know that it is possible to use images as list bullets and link separators. However, this is not what this week's article is about. We are suggesting using special keyboard characters in a combination instead. Hmmm .. isn't that interesting, you say?

Traditional HTML list bullets are either a solid dot representing an unordered list <ol>, a number representing an ordered list <ol> or a definition list <dl>. And we know that there are more options for list bullets when using CSS. Oh, you didn't know that? Well, be sure to hop on over to this week's CSS Tip and find out how to do it.

The most common link separators are | or - or [ Link ] or > or images. Well, what if we told you that there are other alternatives using special keyboard characters that in most cases will not interfere with the majority of browsers? Below we have listed a few brainstorms we came up with. If you can think of others, give us a shout, and we will add them to this article. We will also credit you for the intuitive idea. This article is syndicated and your site will get some nice exposure and fresh new hits.

Alternative list bullets and link separators:

[]
(-)
>>>
\^/
[-]
-]-[-
--}
|=|
=)(=
)|(
)(
{|}
~|~
/*\
=>
}|{
-{|}-
:|:
{:
:[:]:
-{!}-
]:[
\!/
\:::/
:}
<*.*>
>:|:<
:{:}:
_|_
---{@
)-(
(|=|)
)|-|(
o)|-
=:o:=
-o-o-
o)::(o
: : :
-|o|-
-o)|(o-
:|:|:
o)(o
:-|-:
:o:
o:=:o
"|"
\1/
/2\

Pretty cool, right? Okay, so how do these r-e-a-l-l-y look as list bullets and link separators?

Well here are a few examples. You be the judge! :)

My to-do list:

:o: Dust the cat.
:o: Walk the car.
:o: Iron the computer.
:o: Brush the furniture.
:o: Wax the dog.
:o: Defrag the children's clothes.

OH wait! That doesn't sound right. Oh dear. Let's try this again ...

\1/ Defrag the cat.
\2/ Dust the car.
\3/ Wax the computer.
\4/ Walk the furniture.
\5/ Iron the dog.
\6/ Brush the children's clothes.

Hmmm ... I guess I have been coding and writing so much today that my brain has pixelized ... one more time:

:} Brush the cat.
:} Wax the car.
:} Defrag the computer.
:} Dust the furniture.
:} Walk the dog.
:} Iron the children's clothes.

Phew! That's much better, and I think the children, dog and cat will like these tasks much better too. ;)

Let's look at a few link separators examples now, and I'll try to behave myself this time.


Home =:o:= Web Templates =:o:= Join =:o:= About =:o:= Webmaster Tools