Home
3DS MAX
Alias Maya
HTML & CSS
Photoshop
Forum
Contact Us
The right way to do lists. E-mail
Written by Dzordz   
Tuesday, 14 March 2006
There are many ways to do list, but there is only one good way to do them. HTML is forgiving, very forgiving. You can type all sort of rubish and somehow you just might stay afloat with that, but to have a good CSS compatible list you need to put in some thinking. First we think of a list, I will use Super Heroes.
Superman
Batman
Catwoman
Storm
Wolverine

Step 1.
Making a list by just braking lines.
*start HTML
Superman<br>
Batman<br>
Catwoman<br>
Storm<br>
Wolverine<br>
*end HTML

This is the worst possible way to make a list, even the <br> tag is not written properly as they should be written <br /> to indicate an empty element, but that is another story.
Here you will get a list of some kind or should we say several names one under the other (what else is a list.

Step 2.
Making a list with the help of link tags <li>

*start HTML
<li>Superman<br>
<li>Batman<br>
<li>Catwoman<br>
<li>Storm<br>
<li>Wolverine<br>
*end HTML

From time to time this might work as some will add a bullet to the left of each name, but some will not. And it is not even properly closed!

Step 3.
Properly enclosing a list element.

*start HTML
<li>Superman</li>
<li>Batman</li>
<li>Catwoman</li>
<li>Storm</li>
<li>Wolverine</li>
*end HTML

This is better but still not good enough, <li> is a block-level element and renders the <br> tag useless since it does that on its own. Here we have a group of list items but no list.

Step 4.
A good list!

*start HTML
<ul>
   <li>Superman</li>
   <li>Batman</li>
   <li>Catwoman</li>
   <li>Storm</li>
   <li>Wolverine</li>
</ul>
*end HTML

Now this is what a good list looks like! Properly enclosed withing an unordered list element.
You will get a bullet next to each of the items, if you don't like them, well learn some CSS.

Ok, ok I will show you :)

Just add this on top in the code and no list will have bullets!

<STYLE type="text/css">
<!--

li { list-style-type: none;}
-->
</STYLE>

<STYLE> tags are use to signal the browser that there are styles associated with this document, li { list-style-type: none;}  sets a style type for all the list elements in this page to none.

Happy creations! :)
 
< Prev   Next >
[ Back ]