DarrenLCB

A list can be a vertical list such as one you would write down for a grocery list. Another type of list is a horizontal list which contains links, just like a navigator list, similar to the one I have on the top of my page.

This type of list goes more in depth, and is more advanced for starting bloggers, but if you get a moderate amount of traffic, or have lots of content and pages, a list can help in organizing and making your site more proffesional.

This list includes CSS and HTML, in case your not familiar with either, don't worry my guide has author's view in case you just want to copy and paste.




Step 1: Create your HTML

As normal you want the
<ul> 
<li>(enter words here)</li>
<li>(enter words here)</li>
</ul>


Step 2: Create your CSS

In order to make your list horizontal, add the following CSS

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}


 So now we have what should look like this

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Explanation: The "id" (identity, duh) is just like a name, Darren or Ivan, and for this guide, we're ganna name it "navcontainer"

The div means that the navcontainer has it's own section on a page. Don't worry much about it.

As for the actual ul, we're going to give it the name navlist,

The CSS code is not part of html, but it corresponds to the id's you put in the html, for example #navlist.

#(id) is how you want it to correspond to something in the html

{                      (<-- starts the css code)
display: inline;     (<--- makes it horizontal)
list-style-type: none;
padding-right: 20px; (<--- the spacings between each <li> you have, you can adjust the 20 around)
}                     (<-- ends css)



Step 3: Adding Decorations


In the CSS code you can add the following


background-color: #036;  <-- gives text a blueish background, you can change the #036 to any color

#navlist a:hover         <-- this css makes it the tab change colors if you move your cursor on it
{
color: #fff;                <-- makes text whatever color you want if you need
background-color: #369;              <-- changes the background color
}


http://css.maxdesign.com.au/index.htm

Gives loads of help, but also remember to subscribe to here!

Thanks for reading!

And remember, if you have any questions about these guides, or on html css and how to make them work on your layouts, feel free to comment below!