Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

HTML/CSS Tutorials

Using Lists

We're going to have a look at three different types of lists here: unordered lists, ordered lists, and definition lists.

examples:

Unordered ListOrdered ListDefinition List
·100g flour.1) Mix dry ingredients thoroughly.Lower cost
The new version of this product costs significantly less than the previous one!
·10g sugar.2) Pour in wet ingredients.Easier to use
We've changed the product so that it's much easier to use!
·2eggs.3) Mix for 10 minutes.Safe for kids
You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).

Don't forget to review all of the properties you can apply to style your lists using CSS.

Here is the code for the three preceding lists:

Unordered list:
<ul>
   <li>100g flour.</li> 
   <li>10g sugar.</li>
   <li>2 eggs.</li>
</ul>

Ordered List:
<ol>
   <li>Mix dry ingredients thoroughly. </li>
   <li>Pour in wet ingredients. </li>
   <li>Mix for 10 minutes. </li>
</ol>

Definition List:
<dl>
   <dt><strong>Lower Cost</strong></dt>
   <dd>The new version of this product costs significantly less than the previous one!</dd>
   <dt><strong>Easier to use!</strong></dt>
   <dd>We've changed the product so that it's much easier to use!</dd>
   <dt><strong>Safe for kids!</strong></dt>
   <dd>You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).</dd>
</dl>

What the tags stand for:

  • ul = unordered list
  • ol = ordered list
  • li = list item
  • dl = definition list
  • dt = definition term
  • dd = definition

Remember that we could style the definition term to be bold instead of using the <strong> tag.

Don't forget you can nest lists inside of each other, just remember to close your tags properly.

Looking at lists and CSS: creating navigation

We already defined our anchor tags earlier in the section on hyperlinks as:

<a href="index.html">Home</a>
<a href="aboutUs.html">About Us</a>
<a href="contactUs.html">Contact Us</a>
<a href="favoriteLinks.html">Our Favorite Links</a>
My Goal:

I want a horizontal navigation that looks like buttons but uses no images. I want to use anchors in a list.

First I decide that I will use an unordered list - there is no need to order it, and I'm not defining anything - so unordered it is. I already have my links coded so I will insert them into a list like this and give it an id:

<ul id="horizNav">
   <li><a href="index.html">Home</a></li>
   <li><a href="aboutUs.html">About Us</a></li>
   <li><a href="contactUs.html">Contact Us</a></li>
   <li><a href="favoriteLinks.html">Our Favorite Links</a></li>
</ul>

Now comes the tricky part - the CSS

#horizNav {margin: 0px; padding: 0px; width: 768px; height: 17px; list-style-type: none; margin-bottom: 16px; background-color: #8e9675; border: 1px solid black}
#horizNav li {display: inline;}
#horizNav a:link {text-decoration: none; text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
#horizNav a:visited {text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
#horizNav a:hover {text-decoration: none; text-align: center; display: block; background-color: #b5c69c; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
#horizNav a:active {text-decoration: none; text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}

How's that for a mouthful? Don't worry we'll go over it all.

Let's start with the first two:

#horizNav - A list is a block-level element and it comes with default padding and margins. Because we don't want the traditional display of a list we reset the margin and padding to 0px. We give the list a width of 768px (our website is 770px wide but we subtracted two pixels to accommodate the border on either side of the list) and a height of 17px to accommodate our anchor text. The property of list-style-type has several values including: disc, square, decimal and none (click to view the whole list). We don't want any bullets here, so we have set it to 'none'. I have put a margin-bottom of 16px because that is the width of our gutter and so the spacing will look even. Next, I have set the background-color of the list and a one pixel border.

#horizNav li - I have set all list items to display inline so that no line-break is forced between them.

I have created a new class to apply only to the links in our navigation. Our original anchor styles are still in our style section to accomodate links appearing in the body of our document:

Now any anchor tag within an element with the id="horizNav" (on our ul tag) will have the following styles:

#horizNav a:link {text-decoration: none; text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
#horizNav a:visited {text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
#horizNav a:hover {text-decoration: none; text-align: center; display: block; background-color: #b5c69c; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
#horizNav a:active {text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}

These styles will only apply to links that are wrapped in a container with the id="horizNav". I don't need to repeat my text styles or my text color because they have been applied by the first set of anchor pseudo-classes (don't forget styles cascade and default values are overwritten by class values). In the case of link and hover links I have reversed the value applied to text-decoration as I want none. I have used the text-align property in each pseudo-class to get centered text. I have used the display: block declaration to the anchor tag so that I can set a width (you can only set a width on a block-level element) and then countered the display: block with a float: left to keep the display 'inline'(I know?convoluted). I have applied borders and a margin-left of one pixel. Try adding and removing some of these styles to get a good feel for what they are doing.

Now we have a nav!

Note: a handy property pertaining to lists is list-style-image. With this property you can call a custom image for use as your bullet.

Build your Own!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>My dog Billie-Mae</title>
      <meta name="keywords" content="billie-mae, dog, mutt, canine, pet, friendship, animal, rescue">
      <meta name="description" content ="Pictures and stories about my dog Billie-Mae and the funny things she does">
      <meta name="author" content ="Andrea">
      <meta name="copyright" content ="Copyright ? 2006 Andrea">
      <link rel="stylesheet" type="text/css" href="css/billie-style.css">
      <style type="text/css">
         body {background: #b5c69c url(img_36.gif) repeat}
         #header {width: 768px; background-color: #b6c39a; border: 1px solid #000000; border-bottom-width: 0px; text-align: center;}
         .column { width: 355px; height: 400px; padding: 10px; border: 1px solid #000000; float: left; background-color: #b5c69c}
         .column p { font: 12px arial, sans-serif;}
         .column img { float: right; margin-left: 5px;}
         h1 {width: 355px; font: bold 16px arial, sans-serif; color: #af0b1c; border-bottom: 1px solid #af0b1c}
         #wrapper {width: 770px; font: 12px arial, sans-serif; margin: auto;}
         a:link {font: bold 12px arial, sans-serif; color: #5e6151; text-decoration: underline;}
         a:visited {font: bold 12px arial, sans-serif; color: #5e6151; text-decoration: none;}
         a:hover {font: bold 12px arial, sans-serif; color: #af0b1c; text-decoration: underline;}
         a:active {font: bold 12px arial, sans-serif; color: #af5962; text-decoration: none;}
         #horizNav a:link {text-decoration: none; text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
         #horizNav a:visited {text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
         #horizNav a:hover {text-decoration: none; text-align: center; display: block; background-color: #b5c69c; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
         #horizNav a:active {text-decoration: none; text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
         #horizNav {margin: 0px; padding: 0px; width: 768px; height: 17px; list-style-type: none; margin-bottom: 16px; background-color: #8e9675; border: 1px solid black}
         #horizNav li {display: inline;}
      </style>
   </head>
	
   <body>
      <div id="wrapper">
         <div id="header"><img src="http://photos.bravenet.com/166/366/683/3/4B3DA81507.gif" border="0"></div>
         <!--here is my navigation -->
         <ul id="horizNav">
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutUs.html">About Us</a></li>
            <li><a href="contactUs.html">Contact Us</a></li>
            <li><a href="favoriteLinks.html">Our Favorite Links</a></li><br>
         </ul>
         <!--this is the section on how I found billie -->
         <div class="column">
            <h1>How it Started</h1>
            <img src="http://photos.bravenet.com/166/366/683/3/F88EB5A65E.gif" border="0">
            <p>It was a warm sunny spring day in <a href="javascript:void(0);" onclick="window.open('map.html','PedroOhio','toolbar=0,menubar=0,location=0,directories=0,staus=0,scrollbars=0,resizable=0,width=400,height=400,top=100,left=100');">Pedro Ohio</a> when a colleague and I went to a local farm to ask if we could do some surveys on the <em>'crick'</em> that ran through the back of their property. </p>
            <p>The farmer who owned the land approached us with a jocular, gap-toothed smile and asked us "do y'all like puppies?". I responded with a tentative "yyeeesss -why?". "Well..." he said, "my girlfriend found this puppy out in the back forty, and I'm a gonna have-ti shoot it... that is... unless you want it." I responded immediately with "don't shoot the little puppy, I will come back for it at the end of the day."</p>
            <p>This is the story of how I found Billie-Mae. When I went back to pick her up she was a tiny five week old puppy, bloated with worms, covered in lice, ticks and fleas, starving, with a puncture hole through one eyeball.</p>
         </div>
         <! - this is the section on how she turned out -->
         <div class="column" style="margin-left: 16px;">
            <h1>How it Turned Out</h1>
            <img src="http://photos.bravenet.com/166/366/683/3/AF337E590C.gif" border="0">
            <p>With time and care and a lot of flea baths, Billie's hair grew back in the soft velour of most puppies. The local vet told me that she was a very special dog because of her genetic history. The story in that area is one of dog over-population due to a general lack of spaying and neutering. </p>			
            <p>Dogs run wild <em>-literally</em>. According to the vet, Billie-Mae is about a sixth generation wild dog. After this period of interbreeding and feral living she has become just like many other dogs in the world that are feral. They develop common characteristics such as medium height, stocky chest, pointy ears and curly tail. I like to call her my "Yankee Dingo".</p>
            <p>Apart from a few allergies she has turned out to be quite healthy and vivacious despite her rough start.</p>
         </div>
         <hr style="clear: left; margin-top: 20px; color: #8e9675; width: 100%; height: 1px;">
         <a href="mailto:myemail@addie.com">Email me</a>
      </div>
   </body>
</html>

If you also want a nav at the bottom of your page - delete the 'mailto:' link (shown above in green) and replace it with the following code:

<!-my page footer -->
<ul id="footerNav">
   <li><a href="index.html">Home</a>  |</li>
   <li><a href="aboutUs.html">About Us</a>  |</li>
   <li><a href="contactUs.html">Contact Us</a>  |</li>
   <li><a href="favoriteLinks.html">Our Favorite Links</a>  |</li>
   <li><a href="mailto:myemail@addie.com">Email me</a></li><br>				
</ul>

The CSS is much simpler this time because our navigation looks much simpler; add this to your embedded style sheet:

#footerNav {margin: 0px; padding: 0px; list-style-type: none;}
#footerNav li {display: inline;}

Can you believe it? We have a webpage!

Yes...rejoice...but we're not done yet.