• Home Page
• Nest
  • Stuff
  • Junk
  • Flotsam
• Item 3
• Item 4

Lists

Everything we work on today will involve lists. It is important to understand how lists work and how they interface with CSS. Consider the following:

ul.menu { list-style: none;
   padding: 10px;
   margin: 0px; 
   width: 200px;
   background: red;
   color: white; }

ul.dots { list-style: disk;
   padding: 0px 100px;
   margin: 0px; }

The first would be invoked by the following two class definitions:

<ul class="menu">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

and look like:

• Item 1
• Item 2
• Item 3
• Item 4

The second would be invoked by the following code:

<ul class="dots">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

and look like:

• Item 1
• Item 2
• Item 3
• Item 4

Notice that other than the change of the class name, nothing else changed in the HTML. All the formatting took place in the CSS. Want to change the menu to blue background this year? Change the one background: red to background: blue and you are done. Actually, you'll have much greater control over colors if you use numerical codes rather than the limited set of color names, but for clarity, I've used names in the examples.

Suppose you want to have a horizontal menu, rather than a vertical menu. How does one create that? Below is a centered, vertical menu, showing the current page. It makes more sense to have such a menu at the top of the page, but this will work for the demo. It uses the following style (and assumes you are viewing Item 3):

#tab { text-align: center; }
#tab ul {
	margin-left: 0;
	padding-left: 0;
	display: inline; } 
#tab ul li {
	margin-left: 0;
	margin-bottom: 0;
	padding: 2px 15px 5px;
	border: 1px solid #000;
	list-style: none;
	display: inline;
	background: #00f; }
#tab ul li a { color: #fff;
     font-weight: bold ;
     text-decoration: none;
     background: #00f;}
#tab ul li.here {
	border-bottom: 1px solid #fff;
	list-style: none;
	display: inline;
	color: #00f;
	background: #fff; }
#tab ul li.here a {
	color: #00f;
	background: #fff; }
#tab ul li a:hover {color: #f00;}

I stole the example of the above menu, with minor modifications, from A List Apart, one of the better resources on the Internet for articles on CSS and HTML.

Now suppose you want to use the techniques we've learned to create a breadcrumb trail of where you are in your deeply nested site. No problem. Create styles that look like:

#bread {
	color: #fff;
	background-color: #006;
	padding: 3px;
	margin-bottom: 25px;
	}

#bread ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
	border: none;
	} 

#bread ul li {
	margin-left: 0;
	padding-left: 2px;
	border: none;
	list-style: none;
	display: inline;
	}

And then add code that looks like:

<div id="bread">
<ul>
	<li class="first">Item 3
	<ul>
		<li>&#187; Stuff
		<ul>
			<li>&#187; Junk
			<ul>
				<li>&#187; Flotsam</li>
			</ul></li>
		</ul></li>
	</ul></li>
</ul>
</div>

You'll get something that looks about like: