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.
Could you say a bit more about what you mean by ‘tabs’? That can mean a lot of different things—often involving JS.
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?
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 [URL=“http://jonraasch.com/blog/css-rounded-corners-in-all-browsers”]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.
Thanks, I have now made the tabs appear in the page without any images.
Cool. What solution did you end up going with?