Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Vertical image tab rollovers? (a la Simplebits)

Bottom of Page

1 to 7 of 7

  1.  
    • CommentAuthormista3
    • CommentTimeJun 20th 2006
     permalink
    I'm trying to recreate the effect from http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html, but with a vertically arranged navbar.... are there any tutorials or examples of this online?

    (I've started my own version, but it might take a while so thought I should ask....)
    • CommentAuthorjvleuten
    • CommentTimeJun 20th 2006
     permalink
    It is not very difficult to do, just place the tab-states in vertical position next to each other.
    In the css you have to change the x-position instead of the y-position, for example
    #nav a:hover {
    background-position: -20px 0;
    }

    #nav a:active, #nav a.selected {
    background-position: -40px 0;
    }

    hopes this helps,
    Jos
    • CommentAuthormista3
    • CommentTimeJun 20th 2006 edited
     permalink
    Hey thanks for this Jos... I can't work out how to hide the actual link text though....

    #nav {
    list-style: none;
    display: inline;
    overflow: hidden;
    }

    #nav li {
    margin: 0;
    padding: 0 10px 0 0;
    }

    #nav a {
    overflow: hidden;
    height: 0px !important;
    height /**/:18px; /* for IE5/Win only */
    }

    .n-home {
    background: url(images/n_home.gif) no-repeat 20px;
    width: 110px;
    }

    .n-products {
    background: url(images/n_products.gif) no-repeat 20px;
    width: 110px;
    }

    .n-benefits {
    background: url(images/n_benefits.gif) no-repeat 20px;
    width: 110px;
    }

    .n-clients {
    background: url(images/n_clients.gif) no-repeat 20px;
    width: 110px;
    }
  4.  permalink
    I can't work out how to hide the actual link text though....

    #nav a {
    text-indent: -9000px;
    }
    • CommentAuthormista3
    • CommentTimeJun 20th 2006
     permalink
    Beat me to it! Was just about to add the same thing :)

    Thanks for the tips guys!
    • CommentAuthorjvleuten
    • CommentTimeJun 20th 2006
     permalink
    If you mean with link text <a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">link text</a> then don't use link text
    i use display:block; in the li and that works fine, but perhaps display:inline; is also ok

    cheers,
    Jos
    •  
      CommentAuthorcola
    • CommentTimeJun 20th 2006
     permalink
    I'm a bit confused as to why yu're using "display:inline". If you want a vertical rather than a horizontal list then you don't require the "display:inline" attribute. Or am I going bananas?

    This link should help you - some good css examples:
    http://css.maxdesign.com.au/listamatic/vertical13.htm

    Secondly, for preventing visual display of text, what Darren suggests is perfect.

1 to 7 of 7

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page