Box with tabs (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Andy from Spain -> Box with tabs (9/29/2006 11:36:55)

Hi folks

I have a client looking for a tabbed box like the one here http://www.w3.org/Style/Examples/007/target.html#default2 but that also shows fine in IE. The simpler the better - anyone seen anything similar?

Cheers
Andy



jaybee -> RE: Box with tabs (9/29/2006 11:45:03)

There are several tabbed menus in listamatic and it tells you which ones work with what.

Or take a look at Stu Nichols stuff at www.cssplay.co.uk
like this one
http://www.cssplay.co.uk/menu/lightbox3.html



rdouglass -> RE: Box with tabs (9/29/2006 11:52:19)

I have a simple one I use that is all CSS and uses a simple list. I have an example of it here:

<old dead link>

and that page uses a list like this:

<div id="header">
<ul>
<li id="current"><a href="offers.asp?pid=1">Home</a></li>
<li><a href="offers.asp?pid=2">Open Offers</a></li>
<li><a href="offers.asp?pid=3">Completed</a></li>
<li><a href="offers.asp?pid=4">My Blogs</a></li>
<li><a href="offers.asp?pid=5">My Account</a></li>
<li><a href="default.asp">Exit</a></li>

</ul>
</div>


and CSS of this:


#header {
float:left;
width:100%;
background:#14285f url("/blogads/images/1px_white.PNG") repeat-x bottom;
/*border-bottom: solid 1px white;*/
font-size:93%;
line-height:normal;
white-space:normal;
}
#header ul {
margin:0;
bottom:0px;
/*border-bottom: solid 1px #14285f;*/
padding:10px 10px 0;
list-style:none;
white-space:normal;
}
#header li {
float:left;
background: #14285f;
border-left: solid 1px white;
border-top: solid 1px white;
border-right: solid 1px white;
margin:0;
padding:0 0 0 9px;
white-space:normal;
}
#header a {
float:left;
display:block;
background:#14285f;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#FFF;
white-space:normal;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#CCC;

}
#header #current {
background:white;
border-width:0;
border-bottom: solid 1px white;
white-space:normal;
}
#header #current a {
background:white;
color:#333;
padding-bottom:5px;
white-space:normal;
}

It works rather nicely for me and works in both IE and FF. Hope it helps.



Tailslide -> RE: Box with tabs (9/29/2006 13:03:31)

If you mean switching the content of the tabbed box while remaining on the same page then Bon Rouge has a lovely script here: http://bonrouge.com/br.php?page=switchcontent3 which I've used along with a normal CSS menu on this page: http://www.amandaleighsmith.com to achieve the effect of several pages on one.

Edit: I should say that it degrades nicely with JS off too.



rdouglass -> RE: Box with tabs (9/29/2006 13:35:56)

quote:

Edit: I should say that it degrades nicely with JS off too.


I always like this load-once-and-use-tabs pages but I never found any to 'degrade nicely with JS off'.[:'(] That's why my tabs don't use JS. I try very hard to do stuff without it.

(I mean isn't that always stressed here? Cross-browser, no JS, blah, blah...?[8|])

I know in the past, there was a big focus on reducing the round-trips to the server but with today's higer bandwidths, servers, and processors, we can be a little more liberal about sending requests to the server. At least IMO.

And I do know that there are a lot of people still on dialup but all those folks writing AJAX apps and the like don't seem to know it. And lastly, if we do our pages "properly", they'll be lean and mean and won't overtax the connection anyways.

Just my $.02



Tailslide -> RE: Box with tabs (9/29/2006 13:40:18)

The tab menu is a CSS menu with a bit of JS added - it uses Javascript to change the visible area in the box below. With Javascript off you just get the content of the box one after the other and no tabs.

There's absolutely nothing wrong with using Javascript as an enhancement - but the whole thing has to function without it. This example works fine with JS off.

If you're talking about JS links to other actual pages then obviously no, that would be a bad, naughty idea (not "good" naughty either!).




rdouglass -> RE: Box with tabs (9/29/2006 13:43:42)

quote:

but the whole thing has to function without it.


Completely agree. I just try hard to do it without it anyways. Having said that, I have some sites where they have an incredible amount of JS and the site itself would be totally useless without it so it is absolutely a requirement.



Tailslide -> RE: Box with tabs (9/29/2006 13:51:39)

I know what you mean - there is often a sense that Javascript is evil and to be avoided. But like everything else it's a case of using common sense and being thoughtfull about it.

On that particular site for instance, is the only example you're likely to find of me using a JS popup windows[:o] Because I felt it was a good use of them and less disorientating than not using them. But it'll still work with JS off and I do warn people about it (and I said four hail marys and two our fathers after).

--------- sorry to go off at a tangent Andy! ------------------



rdouglass -> RE: Box with tabs (9/29/2006 13:59:24)

I think it was all those early years of scrolling, flashing text[:'(] that scarred me for life.[:D]

quote:

-------- sorry to go off at a tangent Andy! ------------------


Yes, I apolgize too.



Andy from Spain -> RE: Box with tabs (9/29/2006 14:06:30)

Hi folks

Please feel free and thanks for the links and suggestions, I'll have a good look over the weekend - incredibly lazy but time dictates it's a quick copy 'n' paste jobbie for this one.

Cheers
Andy



jaybee -> RE: Box with tabs (9/29/2006 14:13:55)

quote:

ORIGINAL: Tailslide

If you mean switching the content of the tabbed box while remaining on the same page then Bon Rouge has a lovely script here: http://bonrouge.com/br.php?page=switchcontent3 which I've used along with a normal CSS menu on this page: http://www.amandaleighsmith.com to achieve the effect of several pages on one.

Edit: I should say that it degrades nicely with JS off too.
Sheesh! How come you get all the jewellers and sopranos and I get Blacksmiths and Helicopters? [&:]

That is a really nice piece of kit. I've bookmared it as it'll same me some time with a site I have coming up.

I try to avoid js as well but there are occasions where it makes sense to use it. As long as everything can still be accessed with js off then I'm fine with it.



Tailslide -> RE: Box with tabs (9/29/2006 15:42:56)

I guess it's my sweet nature that wins 'em over!! [8D]

(On that particular example I've used document.write to write the menu so that with JS off, there's no menu to confuse people.)



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.1090088