CSS Lists

I have been developing a new page lately. And because I am a beginner in the field, I use Paddings and Margins to seperate list.
Until I encounter the <ul> and <li> tags. I felt noob. I mean, seriously? How could I make an easy job hard? With the use of these tags, lists and menus are easily separated.

The <ul> tag defines an unordered list. While the <li> tag consists of lists in bullet type.

List Style Position

Determines whether the bullet is located inside the list’s containing box or outside.

<ul style=”lsit-style-position:outside;”>
  <li>Water</li>
  <li>Coffee</li>
</ul>

<ul sty;e=”lsit-style-position:inside;”>
  <li>frapuccino </li>
  <li>espresso</li>
</ul>

And here is how it will appear:

*Water
*Coffee
   *frapuccino
   *espresso

What if I want my list to look like a menu?

We must identify each attribute and indicate the type of list we want on our stylesheet.

In example:

<div id=”menu”>
  <ul>
   <li><a href=”about.html”>ABOUT MY PAGE</a></li>
   <li><a href=”presentation.html”>PRESENTATION</a></li>
   <li><a href=”downloads.html”>DOWNLOADS</a></li>
   <li><a href=”terms.html”>TERMS OF USE</a></li>
   <li><a href=”contact.html”>CONTACT ME</a></li>
  </ul>
</div>

Now, you may define the attributes on your stylesheet.

#menu {
  float: left;
  height: 40px;
  width: 950px;
}
#menu ul{
  margin:0;
  padding:0;
  padding-top:8px;
  margin-left: 20px;
}
#menu li{
  display:inline;
  padding-left: 40px;
  padding-right: 40px;
}

as you can see, we wrote INLINE at #menu li{} so as to make the list horizontal. Hence, the codes we have just written will appear as follow:

ABOUT MY PAGE  |  PRESENTATION  |  DOWNLOADS  |  TERMS OF USE  |  CONTACT ME

There are too much to learn and share but everything has its own end.

Remember that errors come from elements you often neglect and you think are unimportant

If you happen to have some questions, simply write a comment on this post or email me at himerej@gmail.com.

Thanks! :D