Forum Moderators: not2easy
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
#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url("navBarBg.gif") repeat-x 20px;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}
#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 70px;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
}
#navcontainer li#active { background: url("navBarBgHover.gif") repeat-x 20px; }
#navcontainer a:hover { background: url("navBarBgHover.gif") repeat-x 20px; }
[edited by: SuzyUK at 7:28 am (utc) on Jan. 4, 2007]
[edit reason] removed specifics [/edit]
<ul id="navlist" style="{margin-left: 0;}">
ul,ol,dl {
text-indent: 0em;
margin: 0;
padding: 0;
list-style-type: none;
display:block;
}
I then add to the styles for individual things, like floating the list if I want it to be off to one side, floating <li> tags if I want a "tabnav," etc.
For the record, this works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css">
/* <![CDATA[ */
html,
body
{
margin:0;
padding:0;
}ul,ol,dl
{
list-style-type:none;
text-indent: 0em;
margin: 0;
padding: 0;
}#navcontainer ul li
{
float: left;
background-color: #eee;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}#navcontainer a
{
display: block;
color:black;
text-decoration: none;
width: 70px;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
}#navcontainer li#active { background-color: #ccc; }
#navcontainer a:hover { background-color: #333;color: white; }
/* ]]> */
</style>
</head>
<body>
<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>
</body>
</html>
