I have an example of a horizontal menu.
It contains an example of a fixed width and elastic version of a horizontal menu.
I am posting the code since I cannot upload it:
Code:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu Example</title>
<style type="text/css">
body {
margin: 20px;
}
#container {
margin: 0 auto;
}
#navcontainer_stretch {
margin: 0 auto;
width: 90%;
height: 25px;
background: #E9E9E9;
border-width: 1px;
border-style: solid;
border-color: #555555;
}
#navcontainer_fixed {
margin: 0 auto;
width: 700px;
height: 25px;
background: #E9E9E9;
border-width: 1px;
border-style: solid;
border-color: #555555;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav li {
margin: 0px 10px 0px 10px;
padding: 0px;
display: inline;
line-height: 24px;
}
.links {
font-family: Verdana, Arial;
font-weight: bold;
font-size: 12px;
color: #666666;
}
.links a {
font-family: Verdana, Arial;
font-weight: bold;
font-size: 12px;
color: #666666;
text-decoration: none;
}
.links a:hover {
font-family: Verdana, Arial;
font-weight: bold;
font-size: 12px;
color: #790000;
text-decoration: none;
}
p {
width: 500px;
border-style: dashed;
border-color: #999999;
border-width: 1px;
margin: 0px;
padding: 3px;
background: #DBEAEF;
font-family: Verdana;
font-size: 11px;
color: #333333;
line-height: 20px;
margin: 0 auto;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="container">
<div><br /><br /><br /></div>
<p>This is an example of a horizontal menu that stretches a width of 80%:</p>
<div id="navcontainer_stretch" class="links">
<ul id="nav">
<li><a href="http://www.talkfreelance.com">Talkfreelance</a></li>
<li><a href="http://forum.yaxay.com">YaXaY</a></li>
<li><a href="http://www.webhostingtalk.com">WebHostingTalk</a></li>
</ul>
</div>
<div><br /><br /><br /></div>
<p>This is an example of a horizontal menu with a fixed width:</p>
<div id="navcontainer_fixed" class="links">
<ul id="nav">
<li><a href="http://www.talkfreelance.com">Talkfreelance</a></li>
<li><a href="http://forum.yaxay.com">YaXaY</a></li>
<li><a href="http://www.webhostingtalk.com">WebHostingTalk</a></li>
</ul>
</div>
</div>
</body>
</html>