KBD

Keith Devens .com

Wednesday, July 23, 2008 Flag waving
You can have premature generalization as well as premature optimization. – Bjarne Stroustrup
← Happy Birthday MomNothing ever works right →

Daily link icon Saturday, May 3, 2003

Tab navigation

Looking into doing tabs, so... I'm keeping track of this here.

Hey, what the hell... that was easy Smiley My CMS rules.

It's a little funky looking now, but I like it in general. I was tired of the old and tired three-column layout. Plus, I was just reading an article at Boxes and Arrows tonight, and I really dig the way the site looks.

Shortly I'll make the "current" tab stay highlighted when you're on that page, and I'll look into using CSS border properties to give the tabs a 3-D look.

On the downside, now it's really easy to tell which parts of my site still aren't run by my CMS Smiley winking

Update: You must check out my tabs in Mozilla. Rules. Check out the demo for this tab tutorial. I also used this example of css tabs as a resource.

Internet Explorer screwed me in this recent round of making the tabs prettier, and I couldn't find a hack that would hide something from every browser except Internet Explorer, which is what I needed to do. I found another way to get around the problem which I tested in Mozilla, IE6, and Opera that is just about as good.

But really, you have to check out my tabs in Mozilla.

Oops, a little more on webgraphics.

← Happy Birthday MomNothing ever works right →

Comments XML gif

Simon Willison (http://simon.incutio.com/) wrote:

You need to set the background colour of your site to white - my g/f has a custom background colour set in her browser so your site ends up looking a bit odd.

∴ Simon Willison | 3-May-2003 6:10am est | http://simon.incutio.com/ | #1975

Keith (http://www.keithdevens.com/) wrote:

Ok, thanks, I'll do that.

Keith | 3-May-2003 1:19pm est | http://www.keithdevens.com/ | #1977

sparticus (http://www.iamsparticus.co.uk) wrote:

Hey just to let you know, in Opera 7.10 the "Printer friendly version of this page" appears on a new line. I'm running in 1024x800 and it wasnt' doing this earlier today. Odd. Anyway I also get about a 5px margin around the entire page, so maybe if this was removed it'd clear it up. It's not that much of an issue, as everyone running under 1024 will get it anyway. But I thought I'd tell ya.

∴ sparticus | 3-May-2003 3:22pm est | http://www.iamsparticus.co.uk | #1978

Keith (http://www.keithdevens.com/) wrote:

Yeah, I don't run with my browser windows maximized usually (I run at 1600x1200). Right now I get the Amazon wish list and the printer-friendly tab on a second line. If you'll notice, I even made it so that they overlap a little when they wrap, so it's even more like "real" tabs Smiley

Keith | 3-May-2003 3:39pm est | http://www.keithdevens.com/ | #1979

sparticus (http://www.iamsparticus.co.uk) wrote:

Ah yes, I do see that actually. Quite nifty me thinks. Good work

∴ sparticus | 3-May-2003 6:12pm est | http://www.iamsparticus.co.uk | #1980

Keith (http://www.keithdevens.com/) wrote:

Thanks Smiley I'd like it if they looked a little more like actual "tabs" though...

Keith | 3-May-2003 8:51pm est | http://www.keithdevens.com/ | #1981

M. Bean wrote:

The site really does look better in Mozilla. Too bad I'm still going to continue using IE, along with 95% of everyone else out there on the internet.

I'm a fan of tabbed layouts myself, I like the way they look and the ease of navigation, when done right anyway. I think it was a good idea you killed the 3 column layout, to better utilize the space on the screen, though your tabs do look kinda funky with multiple rows (though less so in Moz) because the top row being longer than the bottom is visually offputting. You're right in the sense that if you could get it behaving like "real" tabs, where the active tab is highlighted and shuffled to the bottom row, it would look more appealing.

∴ M. Bean | 4-May-2003 9:22pm est | #1987

Keith (http://www.keithdevens.com/) wrote:

What I'd like to do is get rid of enough tabs that it won't need to wrap. I can probably put my resume, my Amazon wish list, and the link to "email me" on my "About me" page, and if I change "Printer-friendly version of this page" to just "Printer-friendly" I think I'll have it.

Keith | 4-May-2003 9:37pm est | http://www.keithdevens.com/ | #1988

M. Bean wrote:

Now that looks much nicer.

∴ M. Bean | 5-May-2003 2:05am est | #1991

Feel free to post a comment below. Please see my comment policy.

Formatting Rules (No HTML):

  • **bold**, *italic*, _underlined_, --strikeout--
  • "text"="url" creates a link, and URLs are auto-highlighted
  • Blockquote: Like e-mail, begin paragraph with > (greater-than sign)
  • Lists: begin paragraph with *,-, or + (unordered), or # (ordered)
  • Code block: ?!code:language=perl|php|sql|javascript|etc.{\n}...{\n}?!/code

:
(will be your IP address if blank)
: (optional)
(Will not be shown on site)

: (optional)
:

July 2008
SunMonTueWedThuFriSat
 12345
6789101112
13141516171819
20212223242526
2728293031 



RSS feed RSS feed for Keith's Weblog
Atom feed Atom feed for Keith's Weblog
Weblog archive

Generated in about 0.194s.

(Used 8 db queries)

mobile phone