Hi Franky, This is great--thank you! I'm hoping to incorporate as many of your suggestions as we can. One small correction: I believe you based the revision you did was based on this page: http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gateway/New/sports- ucb-nested.htm, not this (old) one: http://www.berkeley.edu/test/calendar-tabs/sports-tabs-1.html.
Unfortunately I can't use FANGS with Firefox 1.5, but on a 12/18 post on the Fangs site it looks like they will be finishing a version for FF 1.5 soon. I had actually downloaded FANGS previously, but am not sure I ever used it. We have other plans (which were not implemented in the navigation snippet I shared with the list) to increase the accessibility of this site by creating access keys (http://diveintoaccessibility.org/day_15_defining_keyboard_shortcuts.html) and by creating a "skip to main content" (http://www.jimthatcher.com/skipnav.htm) link--I think it might be helpful to indicate in your links that the "Calendar of Intercollegiate Golf Events 2006" is the "Main content". Thanks again! Allison -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of francky Sent: Saturday, December 31, 2005 2:17 PM To: Allison Bloodworth <[EMAIL PROTECTED]>;paul walker Cc: '{tonyFelice}' ;; css-d@lists.css-discuss.org Subject: Re: [css-d] position: absolute; width: 100%, IE width not 100% @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-lon glist.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-testmod el.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/ ______________________________________________________________________ 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/
