Frameset Infinity!
http://xahlee.org/js/frame2/frameset.html

HTML Frame tutorial + Infinity!
http://xahlee.org/js/frame/0.html

Xah
xah@xahlee.org
∑ http://xahlee.org/

"Xah Lee" <xah@xahlee.org> wrote in message
news:1139914830.681973.322740@z14g2000cwz.googlegr oups.com...
Frameset Infinity!
http://xahlee.org/js/frame2/frameset.html

HTML Frame tutorial + Infinity!
http://xahlee.org/js/frame/0.html

Why oh Why????

Just created Tab Menu tutorial.

Two tutorials for Tab Menu.

JavaScript implementation:
http://xahlee.org/js/tabs/a.html

Pure CSS implementation:
http://xahlee.org/js/tabs2/a.html

Xah
xah@xahlee.org
∑ http://xahlee.org/

In article <1140330763.309744.84630@g47g2000cwa.googlegroups. com>,
Xah Lee <xah@xahlee.org> wrote:
I avoid javascript whenever possible. Tabs are much simpler in CSS.

This is an example of how NOT to do it, in my opinion.

You don't need to express tabs as a list. This is especially
important for tabs, which you may want to look like a horizontal
list of links for non-css browsers, rather than a vertical list of
links.

All you need is a border and color definition for the 'A' tag. Then
your tabs are as simple as a series of links:

<div id="nav">
<a name="#" id="current">current active tab</a>
<a href="page1.html">page 1 tab</a>
<a href="page2.html">page 2 tab</a>
</div>

See? No <ul...> list required.

The following CSS definitions for the HTML above will result in a nice
series of tabs, with the current tab having no bottom border to look
continuous with the page:

#nav { /* navigation bar which will have the tabs */
font-size: 1em;
text-decoration: none;
clear: both;
padding-top: 1px;
padding-left: 4px;
border-bottom: 1px solid #000000;
white-space: nowrap;
}
#nav a, #nav a:hover, #nav a#current { /* basic tab properties */
font-size: 1em;
text-decoration: none;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
padding-left: .2em; padding-right: .2em;
padding-bottom: 0px;
}
#nav a { /* normal color of tab is CCCCCC */
border-bottom: 1px solid black;
color: #000000;
background-color: #CCCCCC;
}
#nav a:hover {
border-bottom: 1px solid black;
color: #000000;
background-color: #CCFFFF;
}
#nav a#current { /* color of "current" tab is white with green text */
border-bottom: 1px solid white;
color: #009933;
background-color: white;
}

-A

axlq wrote:
When CSS isn't applied, a vertical list is a much better fallback than a
horizontal list, from both usability and accessibility standpoints.

And how do you think a screen reader will interpret this, as opposed to
list markup? How about Lynx? You've created a serious readability
problem, if nothing else.

....but only for graphical desktop browsers. You've completely ignored
any other browsing environment.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

In article <45rv69F85sp4U1@individual.net>, kchayka <usenet@c-net.us> wrote:
I always TEST things on Lynx. The example will look like a horizontal
list of links, exactly as I intend. It's a horizontal list of links on
ALL browsers. The only difference is that on CSS browsers, pretty
little borders appear around the links.

Wrong. What I proposed was INTENDED for other environments.

-A

axlq wrote:

The relevance this discussion once had to J(ava)Script/ECMAScript
programming, it does not have it anymore. Please stop crossposting
to comp.lang.javascript, unless you are going to introduce that
relevance again, and set Followup-To where it is appropriate.

Thanks in advance.


PointedEars

Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:

Please stop replying to posts with just header tweaking to keep your
precious cljs group clean. It doesn't work, as I explained to you before.

A crosspost without a follow up can not be "fixed" afterwards. Trying to
change things only add to the noise.

--
John Skilled Perl programmer for hire: http://castleamber.com/

Fox noGO:http://johnbokma.com/firefox/removin...earch-bar.html

axlq wrote:
Hmmm... seems you've ignored the readability part.

You are quite mistaken. A horizontal list of links like you suggested is
just a bunch of words that all run together. It is a PITA to parse with
your eyes, or with a screen reader.

You have both an accessibility and a usability problem here. A vertical
list with proper list markup makes everything better, *especially* in
non-CSS situations. Too bad you don't see this.

But you haven't really thought it through, have you?

HAND

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Events: A Introduction to the Model of GUI programing
http://xahlee.org/js/events.html

Comments welcome. Thanks.

Xah
xah@xahlee.org
∑ http://xahlee.org/