« Gone Fishin' | Main | Tabbed Pages using Percentages »

Sorry I was gone so long, but, look! I've brought you back something smashing: all-CSS tabbed page layouts with background patterns on the tabs, one and two! I began with Kalsey Consulting's CSS Tabs with Submenus when putting these together, but I removed the submenus and added a footer. My goal was to make a version with the tabs taking up the entire top of the box, and this is where I ran into trouble - it took me a whole day to overcome the problem with the difference between how IE and Mozilla interpret the box size. Here's the solution I finally used. I think this makes a really pretty, (deceptively) simple, tidy page design. I know I can never really read the instructions to get my information on CSS and HTML, I just have to view the source and parse out what is doing what to what on the page, but I've included some information here for those things that might be a little bit tricky to understand. Continue on, intrepid explorer, to discover more.

So, this is what you need to know about these layouts:

• First, I put the styles on every page so you could easily view the source to see what is going on, but of course you would want to use just one, linked stylesheet.
• I centered the page horizontally with this technique.
• The section of the html that tells the page which tab to show (without the background) is at the beginning, in the body tag.
• The height of the tabs in both layouts is determined by the padding in the "#menu a:link, #menu a:visited" section of the CSS. In both these examples, the text is 14 pixels, with padding of 5 pixels on the top and bottom, for a total of 24 vertical pixels.
• So, keeping this in mind, if you change the tab height, you also need to change the bottom padding on "#menu" section of the CSS to make that border appear in the right place; if you use 12 pixel text, with 8 pixels of padding (top and bottom), for example, change that #menu bottom padding to 28 pixels (12 + 16).
• On the regular tabbed layout the width of the tabs will be determined by the left and right padding in the "#menu a:link, #menu a:visited" section of the CSS. On the other version you want the tabs to take up the total space along the top, so you divide your total width by the number of tabs to come up with the width declaration in the "#menu a:link, #menu a:visited" section. If you want six tabs in an 800 pixel-wide box with a one-pixel border, you must do this: add up all the left and right borders for the tabs - for six tabs, that would be 12 pixels, then subtract 12 from 800 (788) then divide this by six (131.3333), and round the number up or down if needed. We'll make this 131. so, 131 X 6 = 786 (for the tabs) + 12 (for the borders) = 798. Give the container a width of 798 and the tabs a width of 131.
• But, you are going to run into that problem I mentioned with IE, so you have to add that second bit of container information to the CSS to solve this IE box problem. IE wants the full width to be just the total of the width of the tabs, or, in this case, "786", so you need to add that Tan hack that I talked about earlier. You can see an example of this layout with six tabs right here.

  So there you go - have fun with it. I'll make you another example tomorrow if I have the time...

  Posted by taz on July 7, 2004 at 12:03 AM in CSS, My Layouts, Site design | Permalink

  TrackBack

  TrackBack URL for this entry:
  http://www.typepad.com/services/trackback/6a00d83420dec753ef00d8345e887069e2

  Listed below are links to weblogs that reference Make CSS tabbed pages with backgrounds:

  Comments

  you ARE a clever girl! These look fantastic!

  Posted by: anan | Jul 7, 2004 9:37:44 AM

  damn woman, you're good!

  Posted by: Kitty | Jul 7, 2004 4:44:18 PM

  Well, thank you both! But of course, it's not so hard to do something clever when you start with somebody else's clever thing, and then just add patterns to it. It's a good thing I wasn't around when Edison invented the lightbulb, or we would probably have such a thing as paisley lighting.

  Posted by: taz | Jul 8, 2004 6:25:11 AM

  Paisley lighting? heh, heh, heh.

  Posted by: Daisy | Jul 8, 2004 4:18:53 PM

  Very nice ... would this still work if you kept Kalsey's submenus?

  Posted by: jcat | Sep 1, 2004 5:50:56 PM