SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS cross-browser image tabs - a simple way is needed

    I am needing to create cross-browser tabs using css, with the tabs as images. Please post a link to the best tutorial here. Thanks in advance.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Could you say a bit more about what you mean by 'tabs'? That can mean a lot of different things—often involving JS.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't really say anymore until I find out what you need to know, so could you please maybe ask me what you need to know?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by !designer! View Post
    I can't really say anymore until I find out what you need to know, so could you please maybe ask me what you need to know?
    What are you picturing on your page? What would the tab look like and what would it do? To me, 'tabs' conjours a scenario where you have a row of horizontal links (the tabs), and each time you click one of those links different content appears that was previously hidden. Is that what you are talking about?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The tabs will be rounded, with a hover state, in a horizontal line. As this project will be one web page, the tabs will act as links to the content within the page.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by !designer! View Post
    The tabs will be rounded, with a hover state, in a horizontal line. As this project will be one web page, the tabs will act as links to the content within the page.
    OK, so you really just want some links styled with rounded corners. The nicest way to do that is with CSS3, but older browsers (IE8 and under) don't recognize that, though you can give them a nudge with some JS, which is my preferred option. The alternaitve is to do this with images, but honestly, they suck.

    There are hundreds of links online for CSS3 rounded corners, such as this and this, but I've just chosen them at random.

    Firstly, it sounds like you need an UL with the LIs floated left to make them horizontal. From there, it's just a matter of adding the border-radius code to your styles. Personally, I just let older browsers get square corners these days.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I have now made the tabs appear in the page without any images.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Cool. What solution did you end up going with?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •