Learning xHTML and CSS – day 12 of 30
Well I took a one-day break from posting yesterday. I’m currently working on a few clients simultaneously, so I didn’t have time to post. Today we’ll continue our journey through the world of CSS and xHTML, and I will introduce the concept or lists. We’ll start with an unordered-list. You should know that most website navigation menus are based off unordered-lists combined with float CSS positioning. Therefore, you’ll have another quiz tomorrow. It’ll be our very first functional navigation menu. You’ll be able to copy/paste this menu into your site from now on. It’ll be the same menu most web-designers use (the smart ones anyway…)
The difference between ordered lists and unordered lists
An unordered list is like the one shown in the picture on the left. You can define an unordered list as square bullets, circle bullets, and non-shaded circle bullets.
An ordered list, on the other hand, is something that contains order. A number list (1,2,3..), roman numeral list (i,ii,iii,iv…). etc.
So what does an unordered list look like?
<ul id="unorderedlist"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
A list, like anything, can have an id as well as a class. Therefore, you can target it’s styling using CSS selectors. An unordered list starts with a <ul> tag, which stands for unordered-list.
Every list item is wrapped with a <li> tag, which stands for list-item. See how simple that is?
Now, if we give it a little styling using CSS, we can generate the following list:
The CSS
#unorderedlist { margin-left: 20px; }
#unorderedlist li { list-style-type: square;}
Therefore, the Entire xHTML is (continuing from the quiz HTML, removing the paragraphs):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My first website</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pagewrap">
<div id="header">
<h1>My first website!</h1>
</div>
<div id="content">
<ul id="unorderedlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="footer">
<p>This is our footer section</p>
</div>
</div>
</body>
</html>
And the CSS is:
body { background-color: white; font-size: 12px; }
a { color: red; font-size: 12px; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: 20px; border-bottom: solid 2px orange; }
#header { height: 30px; }
#navigation { height: 20px; }
#content { height: 50px; border-top: dotted 1px black;}
#footer { height: 20px; border-top: dotted 1px black; }
#unorderedlist { margin-left: 20px; }
#unorderedlist li { list-style-type: square;}
Finally, the result is:
Summary
Well today we learned about unordered lists. This may not be obvious to you yet, but an unordered list is the basis for any properly made navigation menu that you see. Tomorrow I’ll give you the xHTML code for a navigation menu and I’ll ask you to write the proper CSS definitions so that it looks like the picture I’ll show you. It’ll be Quiz #2. After that, we’ll review ordered lists, which are typically used to portray information. That’s it for now…
Be sure to subscribe to the RSS feed so you can get the new post by email (via the RSS feed link or through the Email RSS Subscription on the right). Also, feel free to contact me with any questions or use my contact form to send me any private comments or questions.
Tags: course, css, free course, html, quiz, Stylesheets, test, tutorial, XHTML