CODE
<frameset cols="120,*">
<frame src="navbarexample.htm">
<frame src="pageexample.htm"
name="showframe">
</frameset>
but couldn't get it to work with that so I did this:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="welcome index.htm" id="current">Welcome</a></li>
<li><a href="#">About</a></li>
<li><a href="Registration index..htm">Registration</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
<style type="text/css">
#navcontainer ul
{
margin-left: 30px;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navcontainer li { margin: 0 0 3px 0; }
#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 160px;
background-color: #999;
background-image: url(images/l1_down.gif);
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
border: 1px solid #333;
background-color: #F60;
background-image: url(images/l1_over.gif);
color: #333;
}
#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(images/l1_over.gif);
color: #333;
}
</style>
<frame src="navbarexample.htm">
<frame src="pageexample.htm"
name="showframe">
</frameset>
but couldn't get it to work with that so I did this:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="welcome index.htm" id="current">Welcome</a></li>
<li><a href="#">About</a></li>
<li><a href="Registration index..htm">Registration</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
<style type="text/css">
#navcontainer ul
{
margin-left: 30px;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navcontainer li { margin: 0 0 3px 0; }
#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 160px;
background-color: #999;
background-image: url(images/l1_down.gif);
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
border: 1px solid #333;
background-color: #F60;
background-image: url(images/l1_over.gif);
color: #333;
}
#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(images/l1_over.gif);
color: #333;
}
</style>
But I can't seem to figure out where I need to add the border or how to add the frame to it with CSS. Any clue? Thanks guys.

