Images Used as Bullets
I found a tutorial that teaches how to replace an image file with a bullet.
- This is a regular bullet.
- Regular bullets get a little old.
- Maybe it's because all regular bullets look the same.
This is a different kind of bullet.- And this is another cool bullet.
- This technique allows any image to be used as a bullet.
Identification
I found this trick at Big Nose Bird.com. The link in the preceeding paragraph will take you to the actual tutorial I used to create these neat looking bullets. The bullets are actually images from the Big Nose Bird.com website. I simply linked to the images used on the tutorial.
What I Learned
Fistly, I learned a neat trick that will add character to my site. More importantly, I learned that I should be creative with the way I use html. The bullet is inserted into a definition list as the definition, and the text after it is the definition data.
The whole "picture used as a bullet" thing is simply a creative way to use definition lists. This technique has taught me to be creative by using the rules of html to achieve the design I want.
It makes sense that images can be inserted anywhere: lists, tables, links, and anywhere else that an image link can be coded between html syntax. The overall moral of this exercise has taught me not to rely solely on what others have taught me. Html is a set of rules that allow web designers to create things, and the language should be able to create whatever the designer can think up. I only need to figure out which rules to manipulate to create the end result I'm looking for. Of course, proper form is also importanat. I'm not saying make sloppy pages, I'm saying that I should find a technique that will give my page the features and look I want by creatively using html in new ways--not just the direct techniques people and tutorials have pointed out directly.
Implementation
I added character to my site by using these bullets on my index page.
To do this, I replaced the unordered list with a definition list. The definition term contains a link to the image on Big Nose Bird.com, and the definition data contains the text which follows the image.
The old unordered list used to contain a single list item which was a link to the "Plan" page. This unordered list (ul) was replaced with a definition list (dl) and the list item (li) was replaced with a definition term (dt) followed by definition data (dd).
Where the old list item once contained a link to the "Plan" page, the link was inserted into the new definition data. This was how I replaced the old, boring bullet with a new, cool-looking bullet. Really, it was a lot easier than this explanation makes it seem.