SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot themusicman's Avatar
    Join Date
    Nov 2004
    Location
    Wales
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to get three states on a CSS button... how??

    Hi All

    I am creating a new set of tabs for navigation on my forums which will run across the top rather like the Articles | Books | Blogs | Forums buttons effects on here, and am using CSS for the buttons set. I am trying to get 3 states on these CSS buttons but don't know how to get the third. Here's what I want the buttons to show;

    1 - Normal - when page that button links to is not displayed

    2 - Mouseover - when mouse is over the button on the new tab

    3 - Selected - when the page that the button is linked to is displayed


    How can I accomplish this please using the various states in CSS...?


    .my_nav {
    background-image: url('http://www.themouthpiece.com/images/navselected.gif');
    }

    .my_nav a, .my_nav a:visited {
    background-image: url('http://www.themouthpiece.com/images/navtop.gif');
    }

    .my_nav a:hover, .my_nav a:active {
    background-image: url('http://www.themouthpiece.com/images/navbottom.gif');
    }
    Last edited by themusicman; Apr 2, 2006 at 09:57.
    John

  2. #2
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    The typical order for styling links is as follows -
    just leave off the ones you don't need/combine them
    if the same styles:

    .my_nav a{
    general, all-purpose styles}
    .my_nav a:link{
    for normal state}
    .my_nav a:visited{
    duh ;-)}
    .my_nav:focus{
    keyboard focus}
    .my_nav:hover{
    duh squared}
    .my_nav:active{
    gonna go to pg.}

    Hope that helps - think you just need :link,
    El
    F-Fox 2.0 :: WIN :: el design :: US

  3. #3
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easiest way it do give your body tag an ID, ie.
    <body id="articles">

    Then apply css
    body#acticles .my_nav
    {background-image: url('http://www.themouthpiece.com/images/navselected.gif');}

    have a look at the tutorial on http://www.cssmagic.wordpress.com, it is explained a little better on there.

  4. #4
    SitePoint Zealot themusicman's Avatar
    Join Date
    Nov 2004
    Location
    Wales
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both, but is there a state where the css shows the currently selected button.? ie. if I have

    Forum | Home | Other

    ... when mouseover Home I see

    Forum | Home | Other

    ... and if currently viewing Home I see;

    Forum | Home | Other

    Not sure if I am making myself clear here? Sorry if not!
    John

  5. #5
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    That's the A:ACTIVE pseudo element, but it doesn't work properly all the time in IE (the ACTIVE pseudo element only works when the link is activated on the partular page, not when a page is loaded and one of the links points to the page itself).

    It's all mute anyway - it is a bad idea to make a link to the page the user is on, which is why the IE bug doesn't matter anyway. Simply load a different menu for each section, where the active part of the menu isn't a link, but just have the orange button background.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  6. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this is what you are looking for:

    http://www.simplebits.com/bits/tab_rollovers.html

  7. #7
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by themusicman
    Thanks both, but is there a state where the css shows the currently selected button.?
    I think blain got it right, you can do it by adding ID to body tag + two other tweaks

    for example on Home page put <body id="home">, on books page put <body id="books"> etc


    also mark every url separately in your navbar by giving it its own class (i presumed you used ul for your navbar)

    <li class="home"><a href="">Home</a></li>
    <li class="books"><a href="">Books</a></li>


    then add something like this to css stylesheet of every page (better use one external of course)

    body#home li.home a:link, body#home li.home a:visited,
    body#books li.books a:link, body#books li.books a:visited {
    background-image: url('http://www.themouthpiece.com/images/navselected.gif');
    }


    this will ensure for the part youre asking about - currently selected page button orange. Of course you have to add alike code for all pages (links) that are in your navbar (not just home and books).
    I know it can be confusing at first but the concept is simple, that css bit first identifies what page you're on (thats why you need body ID), then it chooses which of all those links to style as currently displayed page (thats why you need list item class).

    for hover and active state just use usual way thats independent of body ID, like in your first post

    I hope I got it right this time
    Last edited by marbly; Apr 2, 2006 at 15:38.

  8. #8
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using one image for all three states and shifting the background position, because that is the easiest way of putting all the buttons on the page. The body id is also best for the active state.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •