homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Tab Active Problem
I am confused. Help would help
seo_design




msg:3919933
 9:07 pm on May 25, 2009 (gmt 0)

Hello All,

I tried many ways to make my tabs active when clicked but it did not work. Can someone help in this? Thanks in advance.

HTML CODE

<ul class="tabs">
<li> <span id="nav"><a href="#">HOME</a></span> </li>
<li> <span id="nav"><a href="#">WEB DESIGN SEO</a></span> </li>
<li> <span id="nav"><a href="#">WEBSITE SEO</a></span></li>
<li> <span id="nav"><a href="#">WORKS</a></span> </li>
<li> <span id="nav"><a href="#">BlOG</a></span> </li>
<li> <span id="nav"><a href="#">CONTACT</a></span> </li>
</ul>

CSS CODE

ul.tabs {
list-style-type: none;
padding: 0;
margin: 1%;
line-height: 20px;
margin-left: 1%;
}

ul.tabs li {
float: left;
padding: 3px;
background-color:#633;
margin: 0.5%;
line-height: 20px;
font-weight:bold;

}

ul.tabs li a {
display: block;
padding: 0px 7px;
color: #fff;
text-decoration: none;
}

ul.tabs li a:hover {
color: #ff0;
background-color:#933300;

}
ul.tabs li a:active{
background-color:#933300;

}

 

swa66




msg:3920015
 1:41 am on May 26, 2009 (gmt 0)

In all likelihood :active works, it's probably just not what you think it is.

[w3.org...] :
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

To have a "selected" tab, you need to:
- either add a class on the selected item and style that one differently
- either add a class (or ID) on each of them , and match up the item with a class or ID on a wrapper like the body (more difficult to get, but once you have it, it' easier as the menu doesn't change from page to page anymore

seo_design




msg:3920635
 12:04 am on May 27, 2009 (gmt 0)

Ok. Thanks,

Actually I tried it but it did not affect it.

Do I need put as a part of ul.tabs li selected or just different class?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved