PDA

View Full Version : w3c validator shows errors in my menu code



needsomehelp
Jan 27th, 2010, 07:59 PM
i have the menus that seem to kick up a fuss now when the indented menu is diaplayed...

this seems to follow the same as before <ul><li>.....</li></ul>

do you know why does this not work


<ul class="menu">
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>Previous meetings</strong></a></li>
<li><a href="#"><strong>Events</strong></a></li>
<li><a href="#"><strong>Gallery</strong></a></li>
<li><a href="#"><strong>Membership</strong></a></li>

<li><a href="#"><strong>About us&nbsp;&nbsp;<font size="1pt">&gt;&gt;</font></strong></a></li>
<ul><li><a href="#"><strong>Annual report</strong></a></li></ul>
<ul><li><a href="#"><strong>Executive Committee</strong></a></li></ul>
<ul><li><a href="#"><strong>Meetings</strong></a></li></ul>
<ul><li><a href="#"><strong>this</strong></a></li></ul>
<ul><li><a href="#"><strong>Membership</strong></a></li></ul>

<li><a href="#"><strong>Purpose</strong></a></li>
<li><a href="#"><strong>How to join</strong></a></li>
<li><a href="#"><strong>Contact us</strong></a></li>
</ul>

Excavator
Jan 27th, 2010, 08:50 PM
Hello needsomehelp,
Your list is not formatted correctly. See how to nest ul here (http://www.howtocreate.co.uk/tutorials/html/lists).
Also, something that will help you a lot, look at the links about validating in my sig below.


Try your list like this -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<ul class="menu">
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>Previous meetings</strong></a></li>
<li><a href="#"><strong>Events</strong></a></li>
<li><a href="#"><strong>Gallery</strong></a></li>
<li><a href="#"><strong>Membership</strong></a></li>
<li><a href="#"><strong>About us&nbsp;&nbsp;<font size="1pt">&gt;&gt;</font></strong></a>
<ul>
<li><a href="#"><strong>Annual report</strong></a></li>
<li><a href="#"><strong>Executive Committee</strong></a></li>
<li><a href="#"><strong>Meetings</strong></a></li>
<li><a href="#"><strong>this</strong></a></li>
<li><a href="#"><strong>Membership</strong></a></li>
</ul>
</li>
<li><a href="#"><strong>Purpose</strong></a></li>
<li><a href="#"><strong>How to join</strong></a></li>
<li><a href="#"><strong>Contact us</strong></a></li>
</ul>
</body>
</html>

needsomehelp
Jan 27th, 2010, 11:55 PM
hey thanks for that seems to validate ok now

but the About Us sub menu does not indent now?




<h3>Main Menu</h3>
<ul class="menu">
<li><a href="<?=$siteurl;?>"><strong>Home</strong></a></li>
<li><a href="?ac=pi"><strong>Previous meetings</strong></a></li>
<li><a href="?ac=e"><strong>Events</strong></a></li>
<li><a href="?ac=g"><strong>Gallery</strong></a></li>
<li><a href="?ac=m"><strong>Membership</strong></a></li>
<li>
<a href="?ac=au"><strong>About us&nbsp;&nbsp;<font size="1pt">>></font></strong></a>
<? if (substr($_GET['ac'], 0, 2) == "au") { ?>
<ul>
<li><a href="?ac=auar"><strong>Annual report</strong></a></li>
<li><a href="?ac=auec"><strong>Executive Committee</strong></a></li>
<li><a href="?ac=aumt"><strong>Meetings</strong></a></li>
<li><a href="?ac=aump"><strong>this</strong></a></li>
<li><a href="?ac=aumb"><strong>Membership</strong></a></li>
</ul>
<? } ?>
</li>
<li><a href="?ac=pu"><strong>Purpose</strong></a></li>
<li><a href="?ac=j"><strong>How to join</strong></a></li>
<li><a href="?ac=c"><strong>Contact us</strong></a></li>
</ul>

Excavator
Jan 28th, 2010, 12:07 AM
The code you have posted would indent the second ul. There must be more to your code that you haven't provided.
Are you using a DocType?
Are you using a CSS reset?
Are you styling the ul and the ul li ul seperately?

Did you try my example? Just copy/paste the entire bit into a new .html document and view it in your browser.

needsomehelp
Jan 28th, 2010, 09:29 AM
is there another way to have a list using another tag ?



having looked at my code i have a template.css file which seems to have some references to the ul and li.

below is that file...




/* OpenID icon style */
input.system-openid {
background: url(http://openid.net/login-bg.gif) no-repeat;
background-color: #fff;
background-position: 0 50%;
color: #000;
padding-left: 18px;
}

/* System Messages */
#system-message { margin-bottom: 10px; padding: 0;}
#system-message dt { font-weight: bold; }
#system-message dd { margin: 0; font-weight: bold; text-indent: 30px; }
#system-message dd ul { color: #0055BB; margin-bottom: 10px; list-style: none; padding: 10px; border-top: 3px solid #84A7DB; border-bottom: 3px solid #84A7DB;}

/* System Standard Messages */
#system-message dt.message { display: none; }
#system-message dd.message { }

/* System Error Messages */
#system-message dt.error { display: none; }
#system-message dd.error ul { color: #c00; background-color: #E6C0C0; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}

/* System Notice Messages */
#system-message dt.notice { display: none; }
#system-message dd.notice ul { color: #c00; background: #EFE7B8; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}












html {
height: 100%;
margin-bottom: 0px;
}

form {
margin: 0;
padding: 0;
}

img,table {
border: none;
}

body {
font-family: Tahoma, Arial, sans-serif;
/* line-height: 1.3em; */
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
background: #f8f8f8;
}

body.contentpane {
background: #f8f8f8;
}

a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #555;
}

a:hover {
text-decoration: none;
font-weight: normal;
color: #333;
}

input.button, .validate {
color: #333;
font-size: 10px;
border: 1px solid #555;
}

.search input.button {
text-align: right;
}

input.button:hover, .validate:hover {

}

p {
margin-top: 0;
margin-bottom: 5px;
/* text-align: justify; */
}

.inputbox {
border: 1px solid #555;
color: #333;
padding: 2px;
}
.inputbox:hover {

}

#search {
padding: 6px 0 0 0;
}

#search .search .inputbox {
background: transparent url(images/searchbg.jpg) top center no-repeat;
width: 106px;
height: 12px;
font-size: 10px;
color: #666;
padding: 2px;
border: 1px solid #FFF;
}

#search .search .button {
background: transparent url(images/searchbut.jpg) top center no-repeat;
height: 18px;
font-size: 10px;
color: #666;
padding: 0 2px 0 2px;
border: 1px solid #dadada;
margin: 0 0 0 10px;
text-align: center;
}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
padding: 0;
background: #FFF;
}

div.center {
text-align: center;
margin: 0 auto;
padding: 0;
width: 960px;
}

div#wrapper {
margin: 0 auto;
width: 960px;
text-align: left;
background: url(images/content.jpg) top center repeat-y;
}

#header {
height: 140px;
background: url(images/scandpf_header.jpeg) top left no-repeat;
margin: 0 auto;
width: 960px;
}

#content_top {
background: url(images/content_top.jpg) top center no-repeat;
width: 960px;
height: 4px;
margin: 0 auto;
font-size: 0;
}

#gradient {
background: url(images/content_top_gradient.jpg) top center no-repeat;
}

#content {
width: 932px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
}

#content_bottom {
width: 960px;
height: 4px;
background: url(images/content_bottom.jpg) top center no-repeat;
font-size: 0;
}

#logo {
padding: 30px 0 0 170px;
text-align: center;
margin: 0 auto;
width: 740px;
}

#logo a, #logo a:link, #logo a:hover {
font-weight: bold;
font-family: Verdana, Arial, sans-serif;
font-size: 24px;
padding: 0;
margin: 0;
letter-spacing: 1px;
color: #666;
text-decoration: none;
outline: none;
line-height: 36px;
}

.pill_m {
text-align: center;
margin: 0 auto;
padding: 0;
background: url(images/menu.jpg) top center no-repeat;
width: 952px;
height: 5px;
}

#pillmenu {
float: left;
margin: 0;
}

#pillmenu ul {
margin: 0;
padding: 0;
list-style: none;
}

#pillmenu li {
float: left;
margin: 0;
padding: 0;
height: 46px;
background: url(images/menu_li.jpg) top right no-repeat;
}

#pillmenu li:hover {

}

#pillmenu li a#active_menu-nav {
color: #555;
background: url(images/menu_li_a_hover.jpg) top right repeat-x;
}

#pillmenu li a {
font-family: Arial, Verdana, Tahoma, sans-serif;
font-size: 14px;
float: left;
display: block;
line-height: 46px;
padding: 0 20px;
color: #666;
text-decoration: none;
font-weight: normal;
}

#pillmenu li a:hover {
color: #555;
background: url(images/menu_li_a_hover.jpg) top right repeat-x;
}

#leftcolumn ,#rightcolumn {
margin: 0;
width: 180px;
float: left;
padding: 0 4px 10px 0;
text-align: left;
}

div#maincolumn {
float: left;
width: 720px;
margin: 0 0 6px 0;
}

div.nopad {
overflow: hidden;
padding: 0;
}

div.nopad ul {
clear: both;
}

td.middle_pad {
width: 20px;
}

#banner_l {
text-align: left;
padding: 0 0 0 24px;
}

#footer {
margin: 0 auto;
width: 902px;
height: 50px;
text-align: right;
vertical-align: top;
padding-bottom: 10px;
}

#footer p {
height: 20px;
text-align: right;
padding: 10px 30px 0 0;
color: #666;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}

/* headers */
div.componentheading {
height: 22px;
padding: 0 0 0 10px;
}
table.blog {

}
h1 {
padding: 0;
font-family: Tahoma, Arial, sans-serif;
font-size: 1.3em;
font-weight: bold;
vertical-align: bottom;
color: #333;
text-align: left;
width: 100%;
}

h2, .contentheading {
padding: 0;
font-family: Tahoma, Arial, sans-serif;
font-size: 16px;
vertical-align: middle;
color: #333;
text-align: center;
font-weight: bold;
text-decoration: underline;
margin-bottom: 18px;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

h4 {
font-family: Tahoma, Arial, sans-serif;
color: #333;
}

h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
text-align: left;
color: #555;
padding: 0;
}
/* small text */
.small {
font-size: 10px;
color: #555;
font-weight: normal;
text-align: left;
}

.modifydate {
height: 20px;
vertical-align: bottom;
font-size: 10px;
color: #555;
font-weight: normal;
text-align: right;
}

.createdate {
height: 20px;
vertical-align: top;
font-size: 10px;
color: #555;
font-weight: normal;
vertical-align: top;
padding-top: 0px;
}

a.readon {
display: block;
float: right;
line-height: 14px;
font-size: 10px;
text-decoration: none;
padding: 1px 2px 1px 2px;
}

a.readon:hover {
color: #333;
text-decoration: underline;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
background-color: #f1f1f1;
color: #333;
}

.ol-background {
background-color: #f1f1f1;
color: #333;
}

.ol-textfont {
font-family: Tahoma, Arial, sans-serif;
font-size: 10px;
}

.ol-captionfont {
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
}
.ol-captionfont a {
background-color: #f1f1f1;
color: #333;
text-decoration: none;
font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
display: block;
height: 20px;
}

.article_column {

}

.column_separator {

}

td.buttonheading {
text-align: right;
width: 0;
}

.clr {
clear: both;
}

table.blog span.article_separator {
display: block;
height: 20px;
}



/* table of contents */
table.contenttoc {
margin: 5px;
border: 1px solid #ccc;
padding: 5px;
}

table.contenttoc td {
padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
color: #333;
font-weight: bold;
padding: 4px;
border-bottom: 1px solid #666;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
color: #333;
font-size: 11px;
}


/* content styles */
.contentpaneopen, table.contentpane {
margin: 0;
padding: 0;
}

table.contentpane td{
text-align: left;
}

table.contentpane td.contentdescription {
width: 100%;
}

table.contentpane {
text-align: left;
float: left;
width: 100%;
margin: 8px;
}

table.contentpane ul li a .category {
color: #FF8800;
}

table.contentpane ul li {
color: #333;
}

table.contentpaneopen {
margin: 2px 8px;
width: 98%;
}

table.contentpaneopen li {
margin-bottom: 5px;
}

table.contentpaneopen fieldset {
border: 0;
border-top: 1px solid #669933;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

table.contentpaneopen h4 {
font-family: Tahoma, Arial, sans-serif;
color: #669933;
}

.highlight {
background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable {
margin-bottom: 0px;
}

div.moduletable, div.module {
margin-bottom: 25px;
}

div.module_menu, div.module {
margin: 0;
padding: 0;
}

div.module_menu div, div.module {

}

div.module_menu div div, div.module div div {
margin-bottom: 14px;
padding: 0 0 1px 0;
background: none;
}

div.module_menu div div div, div.module div div div{
padding: 0;
width: auto;
margin: 0;
background: none;
}

div.module_menu div div div div, div.module div div div div {
background: none;
padding: 4px 8px;
}

div.module div div div form {
padding: 4px 0 0 0;
width: 164px;
margin: 0 auto;
}

div.module div div div form

div.module_menu ul {
list-style: none;
}

div.module_menu ul li{
margin: 0;
padding: 0;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
font-weight: bold;
background: transparent url(blue/bullet2.jpg) top left no-repeat;
padding: 2px 0 2px 25px;
line-height: 24px;
}


#leftcolumn div.module table ,#rightcolumn div.module table {

}

#leftcolumn div.module table.poll {

}

#leftcolumn div.module table.poll td {
text-align: left;
}

/* LEFT COL H3 */
#leftcolumn h3, #rightcolumn h3 {
color: #8b8a8a;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 12px;
text-align: left;
height: 16px;
width: 165px;
text-decoration: none;
padding: 0 0 0 15px;
font-weight: normal;
line-height: 16px;
margin: 0;
border-top: 1px dotted #777;
border-bottom: 1px dotted #777;
background: #ececec url(images/h3.jpg) top left no-repeat;
}

#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c,
#rightcolumn .moduletable_menu, #rightcolumn .moduletable, #rightcolumn .moduletable_text, #rightcolumn .c {
margin: 0 0 16px 0;
padding: 0 0 8px 0;
}

#leftcolumn ul.menu, #rightcolumn ul.menu, ul.latestnews {
margin: 0 auto;
padding: 0;
list-style: none;
width: 170px;
}

#leftcolumn ul.menu li, #rightcolumn ul.menu li, ul.latestnews li {
margin: 0;
padding: 0;
}

#leftcolumn ul.menu li:hover, #rightcolumn ul.menu li:hover {

}

/*LEFT COL LINK*/
#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link, ul.latestnews li a {
line-height: 18px;
padding: 0 0 0 8px;
text-decoration: none;
color: #666;
font-weight: normal;
font-size: 11px;
background: url(images/menu_row.jpg) center left no-repeat;
margin: 0;
height: 18px;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover, ul.latestnews li a:hover {
color: #333;
}

/*LEFT COL CURRENT LINK*/
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link,
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
line-height: 18px;
padding: 0 0 0 8px;
text-decoration: none;
color: #666;
font-weight: normal;
font-size: 11px;
background: url(images/menu_row.jpg) center left no-repeat;
margin: 0;
height: 18px;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {

}

/*LEFT COL SUB LINK*/
#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link {
text-decoration: none;
color: #666;
margin: 0 0 0 6px;
font-size: 11px;
background: url(images/submenu_row.jpg) center left no-repeat;
font-weight: normal;
display: block;
line-height: 18px;
padding: 0 0 0 18px;
border: none;
height: 18px;
}

#leftcolumn ul.menu li ul li#current a, #leftcolumn ul.menu li ul li#current a:link, #leftcolumn ul.menu li ul li#current a:visited, #leftcolumn ul.menu li ul li#current a:hover {
font-size: 11px;
margin: 0 0 0 6px;
padding: 0 0 0 18px;
text-decoration: none;
border: none;
color: #333;
background: url(images/submenu_row.jpg) center left no-repeat;
height: 18px;
line-height: 18px;
}
/*SUBMENU POSITION*/
#leftcolumn ul.menu li#current ul {
margin: 0;
padding: 0;
}

#leftcolumn ul.menu li#current ul li {
margin: 0;
padding: 0;
}

/*CURRENT SUBMENU POSITION*/
#leftcolumn ul.menu li ul {
margin: 0;
padding: 0;
}

#leftcolumn ul.menu li#current ul li a:hover {
color: #333;
}

#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
list-style: none;
}

/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
margin: 6px 0;
padding: 0;
list-style: none;
}

#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
margin: 0;
padding: 0 2px;
}

table.adminform textarea {
width: 540px;
height: 400px;
font-size: 1em;
color: #000099;
}

form#form-login fieldset {
border: 0 none;
margin: 0;
}
form#form-login ul li{
padding: 0;
}

form#form-login ul li a {
text-align: left;
padding: 0;
font-size: 10px;
color: #555;
}

/* thumbnails */
div.mosimage { margin: 5px; }
div.mosimage_caption { font-size: .90em; color: #333; }

div.caption { padding: 0 10px 0 10px; }
div.caption img { border: 1px solid #CCC; }
div.caption p { font-size: .90em; color: #333; text-align: center; }

/* Parameter Table */
table.paramlist {
margin-top: 5px;
}

table.paramlist td.paramlist_key {
width: 128px;
text-align: left;
height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
font-family: Tahoma, Arial, sans-serif;
font-weight: bold;
font-size : 14px;
color : #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem {
}

/* Text advert style */

.banneritem_text {
padding: 4px;
font-size: 11px;
}

.bannerfooter_text {
padding: 4px;
font-size: 11px;
text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a { padding: 2px; }

/* Polls */
.pollstableborder td {
text-align: left;
}

/* Frontend Editing*/
fieldset {
border: 1px solid #ccc;
margin-top: 15px;
padding: 15px;
}

legend {
margin: 0;
padding: 0 10px;
}

td.key {
border-bottom:1px solid #eee;
color: #333;
}

/* Tooltips */
.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}

.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
font-size: 100%;
margin: 0;
}

/* System Standard Messages */
#system-message dd.message ul {
padding: 0;
margin: 0;
background: none;
border: none;
}

/* System Error Messages */
#system-message dd.error ul {
color: #c00;
background: none;
border: none;
padding: 0;
margin: 0;
}

/* System Notice Messages */
#system-message dd.notice ul {
color: #c00;
background: none;
border: none;
padding: 0;
margin: 0;
}

#system-message dd {
text-indent: 0;
}

#system-message dd ul {
list-style-type: none;
color: #c00;
background: none;
border: none;
}

#system-message {
margin-top: 5px;
}



/* ****************************************************************************** */
/* blue */
input, button {

}
/* blue */
input[type="checkbox"], input[type="radio"]{
background: transparent;
border: none;
}

/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
color: #555;
font-family: Tahoma, Arial, sans-serif;
text-decoration: none;
}
a.sgfooter:hover {
color: #555;
font-family: Tahoma, Arial, sans-serif;
text-decoration: none;
}
#sgf {
font-size: 12px;
text-align: center;
width: 100%;
margin: 0 auto;
color: #555;
font-family: Tahoma, Arial, sans-serif;
}
.sgf {
text-align: right;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
color: #555;
text-decoration: none;
}
.sgf1 {
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
color: #555;
text-align: left;
}

a.sglink:link, a.sglink:visited {
color: #555;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
text-decoration: none;
}
a.sglink:hover {
color: #555;
font-family: Tahoma, Arial, sans-serif;
text-decoration: none;
}

jenius
Jan 28th, 2010, 09:40 AM
This is tough to piece together with just little bits of your code. Maybe paste the whole thing in here?

To make one item indent, you could always add a span tag to it, then define it in your css to have a margin-left

needsomehelp
Jan 28th, 2010, 09:47 AM
thing is i really want to keep the same look as before with the small round circle and the sideways triangle then the sub menu text all in the indented sub menu item.

would this still work ?

needsomehelp
Jan 28th, 2010, 09:49 AM
oh just thinking about it the text is a hyperlink would this cause a problem ?

needsomehelp
Jan 28th, 2010, 09:56 AM
ok i now have this and all works ok now, thanks for your help.


span.submenuindent {
margin-left: 30px;
}

just one last thing now do i get this <span> to have a bullet point before the text link ?

Excavator
Jan 28th, 2010, 05:22 PM
is there another way to have a list using another tag ?


See HTML lists (http://www.w3schools.com/html/html_lists.asp).