selected link option in css

hi all !
i have created rounded corner button in in css
which works perfectly on mouse hover it work perfectly but i want option of selected link i.e if i visiting products link than it should be having same effect which is on mouse hover is mention the example mention below



css:
/* Set the page width */
#wrapper-menu-top, #wrapper-content, #wrapper-footer {
width: 100%;
margin: 0 auto;
font-size: 11px;
text-align: center;
padding-left:30px;
}

#menu-top ul {
margin: 0 auto;
padding: 0.85em 0 0 0;
list-style: none;
font-size: 100%;


}

#menu-top li {
display: inline;
margin: 0 auto;

}

#menu-top a {
float: left;
background:url(../images/menuleft.png) no-repeat left top;
margin-left:3px;
padding:0 0 0 4px;
text-decoration:none;
line-height: 2.00em;
}

#menu-top a span
{
background: transparent url(../images/menuright.png) no-repeat right top;
padding:1px 15px 1px 12px;

color:#000000;
display: block;
cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */

}




/*#menu-top a:hover { background-color:#00A6F0}
background-position:100% -42px;
#menu-top a:hover span{ background-color:#00A6F0}
background-position:0% -42px;*/

#menu-top a:hover
{
background:url(../images/menuleft-blue.png) no-repeat left top;
}


#menu-top a:hover span
{

background: transparent url(../images/menuright-blue.png) no-repeat right top;

color: #FFFFFF;
}
#menu-top a:selected
{
background:url(../images/menuleft-blue.png) no-repeat left top;
}


#menu-top a:selected span
{
background: transparent url(../images/menuright-blue.png) no-repeat right top;
color: #FFFFFF; }


---------------------------------------------

html


<div id="wrapper-menu-top">
<div id="menu-top">
<ul>
<li><a href="index.html" title="Downloads"><span>HOME</span></a></li>
<li><a href="#" title="Gallery"><span>PRODUCTS</span></a></li>
<li><a href="#" title="Links"><span>SELECT TYPE OF MOBILE</span></a></li>
<li><a href="#" title="Links"><span>TOP DOWNLOADS</span></a></li>
<li><a href="#" title="Links"><span>FREE STUFF</span></a></li>
<li><a href="#" title="Links"><span>TRIAL</span></a></li>
<li><a href="#" title="Links"><span>JUST ARRIVED</span></a></li>
<li><a href="about-us.html" title="Links"><span>ABOUT</span></a></li>
</ul>
</div><!--menu-top-->
</div>


------
warm regards
DA

 

Ok, first off I'd axe the title declarations - they don't actually do anything for SEO, and frankly if you are using natural link titles you don't need them.

Then I'd off at least one of the extra two containers as they too are completely unneccessary. You are NOT going to get consistant cross-browser auto-centering no matter how many times you nest it... though you CAN come close.

In any case I would try to condense all your images to a single file for all three states, both left and right... something like:



You are probably wondering why I have the right border on the left side - it's easier to move the span from being a sandbag to being a standalone:

<li><a href="index.html">HOME<span></span></a></li>

Then setting it as display:block and absolute positioned inside the anchor, or as display:inline-block - since we are doing three different states from one file, we can't use left/right to position our background-image, so 0px 0px and -8px 0px will do the trick.

Here's how I'd code it if working justified left:
http://battletech.hopto.org/for_others/digitalartist/template.html

Which is fully dynamic and works perfectly cross-browser. It also wraps when the screen gets too narrow.

There are two techniques for centering it, each with their own drawbacks.

First is fixing the width of the UL, padding it on one side to 'kind of' center it, then centering the UL
http://battletech.hopto.org/for_others/digitalartist/template_centered.html

Which is constrained to a 800px display, does not auto-wrap, and does not center perfectly outside windows (the whole problem with trying to center floats) - and if you edit the menu, you need to play with the padding to get it recentered.... But if you are making a drop-down menu from those items this is the best technique.

The other way of centering it is to use inline-block, which is... well, kind of flaky. You cannot turn this into a drop-down menu and have it work cross-browser due to both FF and Opera not having complete inline-block implementations as yet, and we need to do some positioning workarounds for opera.

http://battletech.hopto.org/for_others/digitalartist/template_inline-block.html

Still, if this is just going to be a flat menu, this method is great since it's dynamically centered, requires no extra containers around the ul, and requires the least 'fiddling' with settings - even if the CSS won't validate for the -moz specific codes. You don't even need padding between the buttons because our linefeeds are being treated as spaces since it's all 'inline' content.

As with all my examples they validate XHTML 1.0 strict, work in IE 6, 7, Safari, Opera, FF, and in this case the first and last examples work in IE 5.x too. (I didn't test 5.2 mac, but I see nothing that should be a deal breaker on those two)

I also went heavy on the comments in the CSS to explain a few things. If you aren't going to have dropdown menus off those buttons, I'd go with that last technique.

Hope this helps.

 

Hi!

Thanks allot really it is amazing examples really i too much appreciate it
but one prob is still not fix
that is i want a dynamic solution for selected tabs
actually you had apply (class="current") on selected tab which will be manually apply to the class but i want to do it dynamically if there is any othr way kindly let me know i will be very great full to you for this act of kindness
anyway thanks again

warm regards
DA

 

There is no reliable way client-side to do that. You either hardcode that by hand, or set a variable server-side and use a cgi/ssi/whatever they are calling it this week to serve the content, and even then you have to set that variable on each page. (though if using SSI for shared headers, it's 'good enough')

For example, if you were doing 'poor man's CMS' in php you could set each page thus:

<?php
define(privatesecurity,1);
include_once('settings.php');
$subtitle=' - Home Page'; /* attach to end of H1 */
$this_page='HOME';
include_once($theme_dir.'/header.php.inc');
?>

Document Body Here

<?php
include_once($theme_dir.'/footer.php.inc');
?>

Code (markup):

Then in your header.php.inc you'd output the title, then when you hit #menu you just compare each LI against $this_page... to facilitate that 'quickly' I'd probably drop each LI as a function.

function menu_item($url,$title) {
echo '
	<li><a href="',$url,'"',
	$this_page==$title ? 'class="current" : '',
	'>',$title,'<span></span></a>
';
}

Code (markup):

Making your menu read:

echo '<ul id="menu_top">';
menu_item('index.html','HOME');
menu_item('#','PRODUCTS');
menu_item('#','SELECT TYPE OF MOBILE');
menu_item('#','TOP DOWNLOADS');
menu_item('#','FREE STUFF');
menu_item('#','JUST ARRIVED');
menu_item('about-us.html','ABOUT');
echo '</ul>';

Or something to that effect. You HAVE to manually set it somewhere... it just a matter of how automated do you need it.

 

Thanx alot

let me try this but my code is in jsf lets see how to control it
anyway thanks