Coding Probelm

[stevan]

I am using this code

What i want to do is when it is on the id=current to have the same color as the hover

That is all

I have tried a few things no work This is my first BIG CSS script

THXS Steve

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</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>


<style>
#navcontainer
{
margin: 0;
padding: 0 0 0 12px;
}

#navcontainer UL
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer LI
{
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;
}

#navcontainer A
{
color: #444;
display: block;
width: auto;
text-decoration: none;
background: #DDDDDD;
margin: 0;
padding: 2px 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #aaa;
}

#navcontainer A:hover, #navcontainer A:active { background: #BBBBBB; }

#navcontainer A.active:link, #navcontainer A.active:visited
{
position: relative;
z-index: 102;
background: #BBBBBB;
font-weight: bold;
}

#subnav
{
position: relative;
top: -1px;
z-index: 101;
margin: 0;
padding: 0px 0 3px 0;
background: #BBBBBB;
border-top: 1px solid #fff;
border-bottom: 1px solid #aaa;
}

#subnav UL
{
list-style: none;
margin: 1px 0 0px 13px;
padding: 0px;
border-right: 1px solid #fff;
border-left: 1px solid #aaa;
}

#subnav LI
{
position: relative;
z-index: 102;
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;
}

#subnav A
{
color: #fff;
display: block;
width: auto;
text-decoration: none;
margin: 0;
padding: 2px 12px 2px 10px;
}

#subnav A:hover, #subnav A:active { color: #444; }
#subnav A.active:link, #subnav A.active:visited { color: #444; }
#subnav BR, #navcontainer BR { clear: both; }
</style>

[Vladdy]

Why do you need to have a link to a page itself?
Use <span> and style it as a:hover
<div id="navcontainer">
<ul id="navlist">
<li><span>Home</span></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>

#navcontainer a, #navcontainer span
{
color: #444;
display: block;
width: auto;
text-decoration: none;
background: #DDDDDD;
margin: 0;
padding: 2px 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #aaa;
}

#navcontainer A:hover, #navcontainer A:active, #navcontainer span
{ background: #BBBBBB; }

[stevan]

THXS Very Much

I have been reading on CSS alot and i saw it in a book so when i started on it I put it there

I understand what you are saying BUT being new thought it had to be there


Thxs STEVE

[Vladdy]

That is actually primarily HTML question.
When you have a list of links:
<ul id="navlinks">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
...
</ul>
and you are putting this fragment on, say, page 1, does it make sense to keep the link to that page? Does not seem so, since it would serve no function. Therefore pure HTML solution would be:
<li>Page 1</li>
However, when you try to keep styling consistent, you find out that it is easier to replace anchor element with span instead of just removing the anchor elements alltogether.
<li><span>Page 1</span></li>
While it does add an element you do not need to add any extra classes, because every span child of ul with "navlinks" id will represent the current page.