Wow - a lot of you responded :)  Thanks so much!  Let me see what I can 
say about this...

1)  I'm trying to avoid javascript solutions at all costs - I'd love for 
this to work in CSS-only.  I've been playing with the idea for a loooong 
time and I've partially gotten it to work (got it to work *great* in 
Firefox, but IE (of course!) and ::gasp:: Opera aren't playing nice) so 
I have more "playtime" on it to try and figure it out.

2)  I've made tabbed sites before using different classes for things, so 
when the page switches the tab will switch as well.  However, what I'm 
trying to do here is make it *all on one page*.  No loading of new 
documents as you click through the tabs - just one page.

3) I did try the a:focus thing, and it didn't work, either.

Now, since I've been playing with this, I can explain better what's 
going on, I think.  I *did* look at Stu Nicholl's stuff (as well as that 
"pmob" sute) to get some ideas.  They are *close* to what I want, but no 
cigar.  I think Stu was the one that did the closest version of what I 
wanted: a smaller container with nav/tabbed links on the side, and 
content on the right.  The container is set with "overflow:hidden" so 
the *loooong* page of content looks like one short page (as anything set 
below it is invisible).  The nav links basically lead to anchored links 
within the document.  So when you click on the 2nd link, the anchor tag 
pulls up the 2nd area of content into the viewable area of the window - 
making it *appear* that the end user has switched pages, but you're 
really still on the same page.

What I did to keep the "tabbed" area the same color once clicked was to 
place a colored bar *over* the link in question with some positioning - 
so it gives the illusion of tabs with "sticky colors".  (Hope that makes 
sense!)

My problems have been this:  Firefox requires the use of 
"position:fixed" to keep the menu in the same place on the page (if I 
don't use it, then as the links jump through the content, the menu 
"scrolls up" and disappears).  *But* this screws things up in IE...*and* 
in Opera 7 & 8.  I've found a way to make it work in Opera - but I've 
also discovered that my solution renders the links useless - I guess 
there's a bug in Opera<9 that renders anchored links within a document 
useless when they are placed in a container with "overflow:hidden".  I'm 
starting to wonder if I could hide this fact by making it 
"overflow:auto" (which works, but adds a scrollbar) and somehow hiding 
the scrollbar with z-indexing or something.  But I'm thinking that's a 
bit too complicated :)

Anyway - this is just a big experiment for me - I'm only playing around, 
but I do love challenges.  If you all would like to see what I've done 
so far:

http://www.foolishvisions.com/test/tabbed/index6.html

This does *exactly* what I want it to do in Firefox.  Now, if you view 
that in IE6 and/or Opera (I'm gradually working my way backwards and 
eventually to the Mac) you'll see what I mean about the sidebar menu 
shifting. Just keep in mind (if you *do* come up with suggestions for 
me, which would be muchly appreciated!) that this is me just playing 
around...nothing more :)

But thanks for your assistance so far!  I do appreciate it!

~Shelly

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to