1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

selected link option in css

Discussion in 'CSS' started by Digital Artist, Jul 28, 2007.

  1. #1
    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

    top-nav.png

    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
     
    Digital Artist, Jul 28, 2007 IP
    khushal likes this.
  2. deathshadow

    deathshadow Illustrious Member

    Messages:
    7,132
    Likes Received:
    1,119
    Best Answers:
    173
    Trophy Points:
    445
    #2
    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:

    [​IMG]

    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.
     
    deathshadow, Jul 28, 2007 IP
  3. Digital Artist

    Digital Artist Active Member

    Messages:
    562
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    60
    #3
    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
     
    Digital Artist, Aug 12, 2007 IP
  4. deathshadow

    deathshadow Illustrious Member

    Messages:
    7,132
    Likes Received:
    1,119
    Best Answers:
    173
    Trophy Points:
    445
    #4
    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.
     
    deathshadow, Aug 13, 2007 IP
  5. Digital Artist

    Digital Artist Active Member

    Messages:
    562
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Thanx alot

    let me try this but my code is in jsf lets see how to control it
    anyway thanks
     
    Digital Artist, Aug 16, 2007 IP