CSS - Trying To Set Current Page Marker On Menu

I have a css list menu which uses background images in place of bullets. What I'd like is for the user to visit the 'about' page and have the 'about' links background image be different from the rest. So the user can see from looking at the menu, what page they are on.

Anyone able to suggest any methods of doing this?
Would be appreciated =D

I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't.

Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id.

This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in.


CSS Code:
Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }

  

 .nav1 {float:left; position:relative;display:block;}


 .nav1 li {margin:0px; padding:0px; display:inline;}


 .nav1 li a {height:30px; float:left; list-style:none;}


 a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/


  


 #home a{


     float:left;


     background-image: url(images/nav_main_1.png);


     display: block;


     height: 30px;


     width: 132px;


     text-decoration: none;


     background-position: 0px -31px;


 }


  


 }


 #home a:hover, a.current{


     background-image: url(images/nav_main_1.png);


     background-position: 0px 0px;


 }


 #news a{


     float:left;


     background-image: url(images/nav_main_2.png);


     display: block;


     height: 30px;


     width: 131px;


     text-decoration: none;


     background-position: 0px -31px;


 }


 #news a:hover, a.current {  


     background-image: url(images/nav_main_2.png);


     background-position: 0px 0px;


 } 

html4strict Code:
Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul>

  

 <ul class="nav1">


         <li id="home" class="current"><a href="#"><span>Home</span></a></li>


         <li id="news"><a href="#"><span>News</span></a></li>                    


 </ul> 

Any help is greatly appreciated, I would imagine I am missing something simple.

I'm trying to use Eric Meyer's css tabbed navbar to navigate a form. It works, except that I can't seem to get the navbar to indicate the current tab by changing the tab background and bottom border to white. I've been reading and trying different css commands, but haven't been successful.

I'm including my html and css below and would appreciate any help.

Thanks, Keith Silva

CSS:

textarea{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
button{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
/*table{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}*/
caption{
font-size: 1.5em;
}
.add{
font-size: 0.6em;
text-align: right;
}
.frm_tbl{
border-spacing: 5px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: Navy;
}
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}

/*#navlist li:target*/

#mail_frm #mail_nav a,
#loc_frm #loc_nav a,
#other_frm #other_nav a{
background: white;
border-bottom: 1px solid white;
}
#mail_frm{display: none}
#mail_frm:target{display: block}

#loc_frm{display: none}
#loc_frm:target{display: block}

#other_frm{display: none}
#other_frm:target{display: block}

HTML:

//
#include settings
#cgivar id
#cgitextvar notes
#cgitextvar directions
#if @id != ""
//edit existing record
#sql load select * from tbl_org where org_id = @id
#else
//new record
#sqlblankrow tbl_org
#endif
<form method="POST" target="_self" name="org_form">
#formtarget org_save
<div id="navcontainer">
<ul id="navlist">
<li id="mail_nav"><a href="#mail_frm">Mail</a></li>
<li id="loc_nav"><a href="#loc_frm">Location</a></li>
<li id="other_nav"><a href="#other_frm">Other</a></li>
</ul>
</div>
<table id="mail_frm" class="frm_tbl" border="0">
<tr>
<td colspan="2">Office<br><input name="office" type="text" size="45" maxlength="45" value="@office" title=""></td>
<td>Type<br><select name="type" size="1" class="">
#optionlist selected=@type
#options
muni Municipality
state State
discharger Discharger
consultant Consultant
law_firm Law Firm
dischgr_assoc Discharger Assoc
elected Elected Official
lab Laboratory
public Public
academia Academia
tribe Tribe
other Other
</select></td>
</tr>
<tr>
<td colspan="2">Division<br><input name="division" type="text" size="45" maxlength="45" value="@division" title=""></td>
<td>Region<br><select name="region" size="1" class="">
#optionlist selected=@region
#options
none None
north AZ-North
central AZ-Central
south AZ-South
rb1 CA-North Coast(1)
rb2 CA-San Francisco Bay(2)
rb3 CA-Central Coast(3)
rb4 CA-Los Angeles(4)
rb5r CA-Central Valley North(5r)
rb5s CA-Central Valley(5s)
rb5f CA-Central Valley South(5f)
rb6 CA-Lahontan(6)
rb7 CA-Palm Desert(7)
rb8 CA-Santa Ana(8)
rb9 CA-San Diego(9)
</select></td>
</tr>
<tr>
<td colspan="2">Department<br><input name="dept" type="text" size="45" maxlength="45" value="@dept" title=""></td>
<td>Mail Code<br><input name="mail_code" type="text" size="15" maxlength="15" value="@mail_code" title=""></td>
</tr>
<tr><td colspan="2">Organization<br><input name="org" type="text" size="45" maxlength="45" value="@org" title=""></td></tr>
<tr><td colspan="2">Mailing Address<br><input name="mail_addr" type="text" size="45" maxlength="45" value="@mail_addr" title=""></td></tr>
<tr>
<td>Mailing City<br><input name="mail_city" type="text" size="20" maxlength="20" value="@mail_city" title=""></td>
<td>State<br><input name="state" type="text" size="20" maxlength="20" value="@state" title=""></td>
<td>Mailing Zip Code<br><input name="mail_zip" type="text" size="10" maxlength="10" value="@mail_zip" title=""></td>
</tr>
</table>
<table id="loc_frm" class="frm_tbl" border="0">
<tr><td colspan="2">Location<br><input name="location" type="text" size="45" maxlength="45" value="@location" title=""></td></tr>
<tr><td colspan="2">Location Address<br><input name="loc_addr" type="text" size="45" maxlength="45" value="@loc_addr" title=""></td></tr>
<tr>
<td>Location City<br><input name="loc_city" type="text" size="20" maxlength="20" value="@loc_city" title=""></td>
<td>Location Zip<br><input name="loc_zip" type="text" size="10" maxlength="10" value="@loc_zip" title=""></td>
</tr>
<tr><td colspan="2">Directions<br><textarea name="directions" rows="7" cols="60">
#showtext ./directions/org_@org_id
#+ </textarea></td>
</tr>
</table>
<table id="other_frm" class="frm_tbl" border="0">
<tr><td colspan="2">Main Office<br><input name="main" type="text" size="45" maxlength="45" value="@main" title=""></td></tr>
<tr><td colspan="2">Main Address<br><input name="main_addr" type="text" size="45" maxlength="45" value="@main_addr" title=""></td></tr>
<tr>
<td>Main City<br><input name="main_city" type="text" size="20" maxlength="20" value="@main_city" title=""></td>
<td>Main Zip<br><input name="main_zip" type="text" size="10" maxlength="10" value="@main_zip" title=""></td>
</tr>
<tr><td colspan="2">Web Site<br><input name="web_site" type="text" size="45" maxlength="45" value="@web_site" title=""></td></tr>
<tr><td colspan="2">Notes<br><textarea name="notes" rows="7" cols="50">
#showtext ./notes/org_@org_id
#+ </textarea></td>
<td><input name="selected" type="checkbox" value="y" title="">Select<br><br>
<input name="archive" type="checkbox" value="y" title="">Archive</td>
</tr>
</table><br>
org_id&nbsp;<input name="org_id" type="text" size="8" value="@org_id" title="">
<button name="save" class="save_org" onclick="save_form(this.form);return false;">Save</button>
<button name="cancel" class="cancel_org" onclick="cancel_form(this.form);return false;">Cancel</button>
</form>

Hi,

Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise.

I am not very good at coding or editing HTML/CSS, so I don't know how to do this.

All I know is that my website has a class on the body, and each menu item has a unique ID.

My website is: http://firstcareambulance .org/
Any help is appreciated.

Thanks

I'm a CSS newbie, so forgive me if I'm going about this the wrong way entirely. I'm trying to build a website with a menu that changes the source of an iFrame. So I have:

Code:

<html>
<body>
<div>**MENU**</div>
<div><iframe id="contentFrame" src="home.htm"></iframe></div>
</body>
</html>

Clicking a menu item, say "Contact Us", changes the src of the iFrame using:

Code:

<a href="javascript:document.getElementById('contentFrame').src='ContactUs.htm'">Contact Us</a>

The menu is pure CSS, with each item underlining as it's rolled over, and some submenus that show up when hovering.

What I'm looking to do is have the selected menu item have a different text color. So when you click "Contact Us", that item will change color and stay that other color while navigating the ContactUs.htm page in the iFrame.

Is that even remotely do-able? I saw some examples where you use body classes and id's to match the id of the menu item to the body class of the related page. However, I think that would require loading completely separate pages (with the same menu, header, and footer code). I want to avoid the entire page flickering when changing content.

I don't seem to be able to access the body class value of the page being loaded in the iFrame. Is that possible to do?

Thanks for any guidance you all could offer.