Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Css Tabs

  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Css Tabs

    I'm trying to create a tabbed menu with the "Sliding Doors" effect and would like to be able to have each tab have a different color (5 all together all with images) and each colored tab would have a corresponding light color for when the mouse is over top of that tab or for when the page is currently being visited it will remain the light color.

    This is what I have so far (unmodified):

    http://www.spanishmania.ca/tabs/tabs.html

    css can be seen here:

    http://www.spanishmania.ca/tabs/v1.css

    all images used are listed below:

    http://www.spanishmania.ca/tabs/bg.gif
    http://www.spanishmania.ca/tabs/left.gif
    http://www.spanishmania.ca/tabs/left_on.gif
    http://www.spanishmania.ca/tabs/norm_left.gif
    http://www.spanishmania.ca/tabs/norm_left_on.gif
    http://www.spanishmania.ca/tabs/norm_right.gif
    http://www.spanishmania.ca/tabs/norm_right_on.gif
    http://www.spanishmania.ca/tabs/right.gif
    http://www.spanishmania.ca/tabs/right_on.gif

    I will just use these images and import into psp x and overlay them with a color to get my different color of tab, but I don't know how to put the css together and so that it changes the tab to the on state when you hover your mouse over top...

    Any help with this would be graciously appreciated,
    Titanic_Fanatic

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    More sliding doors

    Flicker-free image rollovers are described in detail in the other Sliding Doors article, Sliding Doors Part II.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This article shows me how to implement a rollover for one color of tab, but I need to implement a different color for each tab... tab 1 will be light green when not current and then it will be dark green on hover and tab 2 will be light blue when not current and then it will be dark blue on hover and so on and so forth with a differnet color for each tab... how do I do this?

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Five

    Erm... use five different images?
    The same styles apply, but you'll need to assign a different background image to each one; this can be accomplished by giving each tab a unique id. Most other styles still apply to all five tabs.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok... so now I have five different images and I've gone through the sliding doors part 2 and the problem that I seem to be having is that I can't get the images to rollover and also I can't seem to get the "current" id to work.

    you can see what I have here:
    http://www.spanishmania.ca/tabs/index.html

    and you can see the css here:
    http://www.spanishmania.ca/tabs/v1.css

    please help guide me through this as I'm still new to css and this seem a little complicating although, I love the effect it creates and that's why I'm willing to learn.

    Thanks for your continued patience,
    Titanic_Fanatic


  •  

    Posting Permissions

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