Hello!
I really hope that someone can help me.
I am trying to make my navigation list so that when a link is click, that link moves to the left and stays a certain color until you go to another link, then it does the same.
I have gotten it to where when I click the link it moves to the left, but it is not accepting the color change, I think some other style is taking it over but have tried getting rid of or changing them to no avail. here is the css code in dreamweaver:

body {
background: #CCCCCC;
text-align: left;
margin: 0px;
padding: 0px;
}

#holder {
width:815px;
background:#CCCCCC;
margin: 0 auto;
padding: 0px;
}

#nav {
background: #CCCCCC url(../IMages/idea01.jpg) no-repeat center;
height: 768px;
text-align: left;
text-indent: 0px;
margin: 0px;
padding: 0px;
}

#header {
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
white-space: nowrap;
background: #CCCCCC;
text-align: right;
height: 23px;
color: #006666;
padding-top: 10px;
}

#header a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #006666;
text-decoration: underline;
}

#header a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #006666;
}

#nav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 15px;
top: 250px;
width: 75px;
border: #FFFFFF;
margin-left: 25px;
}

#nav a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #66FFFF;
text-decoration: underline;
display: block;
width: 75px;
text-indent: 20pt;

}

#nav a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #66FFFF;
text-decoration: underline;
display: block;
width: 75px;
text-indent: 20pt;

}

#nav ul {
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}

#nav li {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;

}
#activelink {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #66FFFF;
text-decoration: underline;
text-indent: 20pt;
width: 75px;
}

The one I am worried about is in the #nav
and the #activelink is what is supposed to change the individual link color, etc.
here is the html that applies:

<div id="nav">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<ul>
<li><a id="activelink" href="hometest.htm">Home</a></li>
<li><a href="notification.htm">Notification</a></li>
<li><a href="Reports.htm">Reports</a></li>
<li><a href="password.htm">Password</a></li>
<li><a href="#">Logoff</a></li>
</ul>
</div>




Thanks!

Place the id on this list item like:

<li id="activelink"><a href="hometest.htm">Home</a></li>

Change the css for the active link to:

#activelink a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #66FFFF;
text-decoration: underline;
text-indent: 20pt;
width: 75px;
}

--------------------------------------------------
Patrick Woldberg
Web Developer at Dynamic Zones
Administrator at DMXzone.com, FLzone.net, FWzone.net and DNzone.com
--------------------------------------------------

Hate to jump on the end of someone else's topic, but I am having a similar problem. I have the following:

<pre id=code><font face=courier size=2 id=code>#header_botleflink a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
#header_botleflink a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
#header_botleflink a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
text-decoration: underline;
}
#header_botleflink a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
} </font id=code></pre id=code>

And my link on the page is like this:

<pre id=code><font face=courier size=2 id=code>a href="products.php" class="header_botleflink"&gt;Products&lt;/a</font id=code></pre id=code>

When I click on the item I see it briefly change to bold, but once the page is done loading it goes right back to the normal text.

Any help would be greatly appreciated.

that's because =&gt; #header_botleflink is to represent an id, not a class?

change #header_botleflink into .header_botleflink

and do the same for the rest of your css controlled links that you've given class's to

Edited by - NickNR on 12 Jun 2007 18:38:05

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Place the id on this list item like:

&lt;li id="activelink"&gt;&lt;a href="hometest.htm"&gt;Home&lt;/a&gt;&lt;/li&gt;

Change the css for the active link to:

#activelink a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #66FFFF;
text-decoration: underline;
text-indent: 20pt;
width: 75px;
}

--------------------------------------------------
Patrick Woldberg
Web Developer at Dynamic Zones
Administrator at DMXzone.com, FLzone.net, FWzone.net and DNzone.com
--------------------------------------------------

<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

I would've used: <b>text-align: left/right;</b> rather than indent.