lmw1
03-02-2008, 05:26 AM
I have my main menu nav set-up and working like a champ. However, I am having difficulties with the current active page class.
Could someone give me a hand here? See attached image.
Here's my CSS:
#top-menu {
float: left;
width: 800px;
background: #ffffff;
font-size: 100%;
font-weight: bold;
line-height: normal;
border: none;
}
#top-menu ul {
margin: 0;
padding:0 0 0 14px;
list-style: none;
}
#top-menu li {
display:inline;
margin:0;
padding:0;
}
#top-menu a {
float:left;
margin:0;
padding:0;
text-decoration:none;
}
#top-menu a span {
float:left;
display:block;
background:url(images/menu_tabs.gif) no-repeat right top;
padding:10px 15px 8px 30px;
color:#BDDCF0;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#top-menu a span {float:none;}
/* End IE5-Mac hack */
#top_menu a:hover span {
color:#FFF;
}
#top-menu a:hover {
background-position:0% -42px;
}
#top-menu a:hover span {
background-position:100% -42px;
}
#top-menu .current_page_item a {
background:url(images/tab_active.gif) no-repeat;
padding:10px 15px 8px 30px;
color:#000000;
}
And here's my XHTML:
<div id="top-menu">
<ul>
<li class="current_page_item"><a href="index.html" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
Thanks in advance!
LMW1
Could someone give me a hand here? See attached image.
Here's my CSS:
#top-menu {
float: left;
width: 800px;
background: #ffffff;
font-size: 100%;
font-weight: bold;
line-height: normal;
border: none;
}
#top-menu ul {
margin: 0;
padding:0 0 0 14px;
list-style: none;
}
#top-menu li {
display:inline;
margin:0;
padding:0;
}
#top-menu a {
float:left;
margin:0;
padding:0;
text-decoration:none;
}
#top-menu a span {
float:left;
display:block;
background:url(images/menu_tabs.gif) no-repeat right top;
padding:10px 15px 8px 30px;
color:#BDDCF0;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#top-menu a span {float:none;}
/* End IE5-Mac hack */
#top_menu a:hover span {
color:#FFF;
}
#top-menu a:hover {
background-position:0% -42px;
}
#top-menu a:hover span {
background-position:100% -42px;
}
#top-menu .current_page_item a {
background:url(images/tab_active.gif) no-repeat;
padding:10px 15px 8px 30px;
color:#000000;
}
And here's my XHTML:
<div id="top-menu">
<ul>
<li class="current_page_item"><a href="index.html" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
Thanks in advance!
LMW1