Menu
Hi I was wondering if someone could help me with adding another divider to the right side of this CSS script to add more categorical content.
Thanks.
<html>
<head>
<STYLE TYPE=”text/css”>
html, body {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #3F4554;
text-align: center;
line-height: 1.8em;
}
#wrapper {
width: 800px;
margin: 15px auto 15px auto;
padding: 0px;
text-align: left;
border: solid 1px #dadada;
}
#header {
width: 100%;
height: 70px;
background-color: #f1f1f1;
border-bottom: solid 1px #dadada;
}
#container {
width: 100%;
height: auto;
margin: 0px;
padding:2px 0px;
background-image: url(images/divider.gif);
background-repeat: repeat-y;
background-position: 200px 0px;
}
#left {
width: 160px;
height: auto;
float: left;
padding: 20px;
margin: 0px;
}
#right {
width: 530px;
height: auto;
float: left;
padding: 20px 50px 20px 20px;
margin: 0px;
}
#right p {
margin: 0px;
}
.clearer {
font-size: 0px;
height: 0px;
width: 100%;
display: block;
clear: both;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
list-style-image: none;
}
#nav li {
margin: 0px;
padding: 0px;
display: inline;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color:#3F4554;
text-decoration: none;
display: block;
margin: 0px;
padding: 0px;
width: 160px;
}
#nav li a:hover {
color: #ccc;
text-decoration: none;
}
#footer {
padding: 0px;
margin: 0px;
border-top: solid 1px #dadada;
text-align: center;
}
#footer p {
margin: 0px auto 0px auto;
padding: 10px 0px 10px 0px;
color: #aaa;
}
#footer a:link, #footer a:visited, #footer a:active {
color: #aaa;
text-decoration: none;
}
#footer a:hover {
color: #ccc;
text-decoration: none;
}
</STYLE>
</head>
<body>
<div id=”wrapper” style=”width: 800px; height: 250px”>
<div id=”header” valign=”middle” align=”center”><br>
<span style=”font-size: 11pt”>Title</span></div>
<div id=”container”>
<div id=”left”>
<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
</ul>
</div>
<div id=”right”>
Text
</div>
<div class=”clearer”></div>
</div>
<div id=”footer”><p>Footer</p></div>
</div>
</body>
</html>