SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tricky - Tabs and content to share one background image

    Hi,

    I am trying to create tabs with content using jquery ui, where both the tabs and content share one background image, as seen in the image below.



    And click on each tab changes the background to its corresponding image.

    I am a bit lost on this, so any idea how this can be achieved in terms of div and css, with or without jquery?

    Many thanks in advance!

  2. #2
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way you could do it, is make the content div extend to the top of the tabs and give it a top padding to make sure the content starts below the tabs.
    Then make the active tab transparent, and give the other tabs a background color, as well as adding a white div in between the tabs to hide the rest of the background.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Things get a lot trickier once you add rounded corners to both the tabs and the content.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I would first probably attempt to just position the same image in each tab. By using background position you should be able to position it pixel perfect.

  5. #5
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I would first probably attempt to just position the same image in each tab. By using background position you should be able to position it pixel perfect.
    I didn't think of that, that's probably a much better solution.
    You'd probably not want to show the background image to a user without javascript though as it will look really weird if they aren't positioned. (This is supposing you will position the background image with javascript, which makes the most sense)

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kokos View Post
    I didn't think of that, that's probably a much better solution.
    You'd probably not want to show the background image to a user without javascript though as it will look really weird if they aren't positioned. (This is supposing you will position the background image with javascript, which makes the most sense)
    Here is how to do that if your asking. { visibility: inherit; } Graceful Degrading Javascript ~ Add CSS With Javascript!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I'd do it much like Eric said and here's a quick (rough and ready) demo. (Excuse the jquery but it would take me to long to do it manually) .


Tags for this Thread

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
  •