title.gif

« Make CSS tabbed pages with backgrounds | Main | Hey, Bo Diddley »

Remember back in the Paleolithic era when we could design sites using percentages and know that they would work in any resolution? Remember that fabled time before CSS? Before we had to make tiny static designs that float pea-sized on great big screens? Well I guess we can still do such things, but these days we feel guilty about it and hide our heads in shame if we use tables instead of CSS positioning. Okay, but guess what I did. I took yesterday's layout, changed it up for variety, and recoded it (keeping the CSS) using percentages. Yes, really! Here it is! Of course I had to do a couple of strange things, didn't I? Because a day without strange is a day without sunshine.

The first strange thing is using percentages at all, but after that, I couldn't give the top tabs specific lengths, could I? I had to use a percentage - four tabs, 25%, right? But of course, again, this isn't going to work, because it doesn't take the borders into account, so I did something I've never done before, the second strange thing - I gave them a percentage with a fraction: 24.85 percent, to be exact. Which, of course means that there is still a nasty hole on the right in IE, but I handled that like any stalwart girl should - cosmetically. I gave the container a background color to match the "off-state" background pattern, then, in the htm of the only page where it matters (the last, gallery, page), I gave the menu list a background color to match the "on-state" background pattern. And just because I felt like it, I put the whole CSS-positioned contraption in a table so it could be centered on the page. And then, just for fun, I gave the scrollbar colors for IE. (Here's a nice generator for doing that.) It's not perfect, because in IE you can see that there's a slight shortfall on the bottom border of the "on" tab when you are on the last page, but for the convenience and pleasure of having a dynamic layout, it's not a bad deal. I've checked this in IE6 and 5, Mozilla, and Firefox, and they all look fine to me. If anybody sees anything goofy, though, please let me know!

By the way, I haven't had a chance to post the backgrounds I've used here to the patterns section yet, so if you want them, just grab them from here and here.

Posted by taz on July 8, 2004 at 04:23 AM in CSS, My Layouts, Site design | Permalink

TrackBack

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

Listed below are links to weblogs that reference Tabbed Pages using Percentages:

Comments

Coolio. You're sooooo creative.

Posted by: Anne | Jul 8, 2004 11:21:10 AM