@Paul:
You wrote:
>> "... I have split up the submenu into another div:
http://www.paulwalker.tv/tabs.htm. Please take a look and offer advice.
I've only tested on IE and Firefox."
- In general: now it is cross-browser, enlarging-proof and looks fine!
Some details:
- I tried Opera: functionality allright, but in Opera 7.54 the
top-background (the horizon-line + white to blue sky) doesn't show up
(stays white). In the newer Opera 8.01 it's o.k.
- All browsers: hovering causes hopping of the tabs, because of the
changing normal/bold font-weight. Shoud say: no bold needed, the color
change of the tab-background and the text must be enough to show there
has been action of the mouse.
And you wrote:
>> "Without CSS, the user is presented with a list of the main menu
items and then individual lists for the submenu items grouped by ul's. I
can live with that."
- Perhaps you can place some normally invisible line (with: .txtonly {
margin-left: -9999px;}) between the ul's of the menu/submenus: "Submenu
of Browse:", "Submenu of Division:", etc. Then nobody can complain. -
See also below.
============
@Allison:
You wrote:
>> "I recently discovered that you can download 40 minute versions of
JAWS and Window Eyes ... Here's an article on this: ..."
- Thanks for that!
- I use the Firefox "Menu > Extra", that has the "FANG"-option: which
immediately gives a screen reader output. Very paedagogic, to notice
what people hear when they open your webpage! (Don't know if there are
significant differences with JAWS / Window Eyes).
- This option is built-in when you have the Developers Toolbar in FF.
- (for who are unknown of this:) There exists a special toolbar for easy
analysing and 1-click checking of lots of aspects of webpages. I don't
like extra toolbars at all ("never-never-never!"), but this is the
exception: I can't miss it anymore. - So: everybody already using Chris
Pederick's marvellous Web Developer Extension for Firefox? If not, I
should say: get it! Free downloadable at
http://chrispederick.com/work/webdeveloper/.
And you wrote:
>> "I'm not entirely sure what you are suggesting for the work-around,
but I would *really* love to see it, or maybe you could give a brief
code example of what you are talking about?"
- Yes, I promised that, so here we go. Please take some time, it's not
so brief ;-).
- When we take your most recent split-level testversion of
http://www.berkeley.edu/test/calendar-tabs/sports-tabs-1.html,
then without style (Firefox > Menu View > Page style > No style; in
Opera similar) you get a reasonable long list of 31 items, that the user
has to go through in order to get to the Lorem (the real content of this
page). See screenshot:
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/longlist.gif.
- In a text-reader, there will be a similar affect. See screenshot of
FANG:
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/fang-longlist.gif.
Remark there is not any hierarchy in the items: list after list, and a
lot to hear before the Lorem comes. Hopefully the visitor is on the
wanted page, for the next page wil start with the same ...
- Without style I should prefer to see some order in the unordered
lists, and to have some navigation-options for fullspeed going to the
content. Somehow as this screenshot:
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/nostyle-new.gif.
- For the text-reader I should like also the navigation first.
Screenshot:
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/fang-new.gif.
Not only ther is a navigation-menu in the beginning, the user can also
jump through the headings of different levels.
- *Q: is this possible in one and the same html-page?*
- *A: yes, that is the power of css!*
- Before making this statement, I had to see it myself first... And I
could not resist the challenge to make a testmodel:
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-francky-testmodel.htm.
- Notes are in the sourcecode.
- Normal screen-viewing doesn't show there is more behind the screen.
- No-style viewing (with Firefox or Opera) or using the FANG-option will
show the hidden treasures (I hope you think they are).
- My method was: first make the page o.k. as no-style version, then hide
the elements which are not needed on screen when using visual styles,
then styling with css for the visible layout.
- I would have preferred to get the content just in the beginning of the
html, and the menu and submenu's in the end. But that seemed to be
impossible.
- The order of the menu-levels for screen-viewing is from general to
specific, and for screenreader I thought it would be beter upside down
(once that you are in a specific page, it is most likely that you want
to go 1 level higher, instead of beginning at the most general menu).
- Now when you place the content first in the normal flow (so in the
beginning for the text-reader), you have to manage the menu and submenus
visually in a space between the header and the content. But as long as
we want the option for enlarging of the font-size (and thats what we
want too!), this distance has no concrete value, and must have different
heights for different font-sizes. Then the content-position can follow
the last line of the last submenu. But when the content is first in the
normal flow, we have to give him a startingpoint, and we don't know
that! - So I think the menu's must be first in the normal flow.
- Placing the navigation-menu before everything will overcome this: now
it is easy to get straight forward to the Lorem, or jump to the
menu-level you want.
- Then some remarks about Universalizing.
The more you ID-alize the html-elements, the easier is recycling of
(almost) the same html-lines.
For instance a menu with one <li class="selected"> in it: for one page
of the total # of <li>'s of that list. When *all* the <li>'s get a small
ID, you can include the whole menu-block serverside (with php or ssi).
In the head of the selected page you give the special css for the ID
which has to be seen as selected. All the other <li>-ID's of the menu
can remain empty (ready for use in other pages).
Saves a lot of copy&paste work (1 line instead of 1 menu), combined with
the same advantages as a separate stylesheet: 1 change is change for all!
Also the making of a new page is easier: instead of going down through
each html-line to see where adaptation is needed, you can just change
something in the css of the head, and you are ready.
Especially when you have a lot of pages: for Intercollegiate Sports
there are already 17 pages; and there are more tabs with things behind!
- I wondered why it took so much time before all the tab-images were on
my screen (even with quick ADSL-connection: drip-drip-drip). For slow
telephone-modems it will be about half a minute before everything is on
screen. See speed rapport:
http://www.websiteoptimization.com/services/analyze/wso.php?url=http://home.tiscali.nl/developerscorner/css-discuss/berkeley-ori-cssloos.htm.
- The reason is: there are 27 small tab-images.
Fore every image there must be an http-request from the client-pc to the
server of the provider (= upload = slow). Then the server has to send
the 27 images in a separated package down to the visitor. That takes the
time.
- Therefore if have combined all tab-image in just 1 for the same effect
(!):
http://home.tiscali.nl/developerscorner/css-discuss/berkeley-images/berkely-tabs.gif.
This one is small enough (3kB) for quick coming down, and it needs only
1 http-request. With positioning as background-image you can use the
wanted tab(color) by moving the vertical start-position upwards as much
as needed.
Used technique: see article "The Porthole Theory"
(http://home.tiscali.nl/developerscorner/port-hole/porthole.htm).
So far, so good?
Well, local time here is 23:15, and some fireworks already.
To everybody before and after 00:00 is my wish: a very good 2006!
francky
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
