|
| |
|
|
Andy from Spain
Posts: 922
From: Ipswich
Status: offline
 |
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
|
|
|
|
rdouglass
Posts: 9228
From: Biddeford, ME USA
Status: offline
|
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.
< Message edited by rdouglass -- 2/26/2008 14:52:49 >
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
|
|
rdouglass
Posts: 9228
From: Biddeford, ME USA
Status: offline
|
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...? )
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
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
|
|
Tailslide
Posts: 6046
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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!).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
rdouglass
Posts: 9228
From: Biddeford, ME USA
Status: offline
|
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.
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
|
|
Andy from Spain
Posts: 922
From: Ipswich
Status: offline
|
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
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
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). 
