RE: [WSG] Accessible Multi-Column List
Have you considered styling your LIs so that they sit side-by-side within the list? Then you would have one single list, with list items taking up 49% of the width of the list, giving the appearance of two columns on screen, but only one physical list for accessibility. I am sure there are many different ways of doing this, but the most obvious starting point would be to style the LIs as 'display:inline' and take it from there. Regards, Mike -Original Message- From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Paul Novitski Sent: Thursday, October 26, 2006 10:35 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Accessible Multi-Column List At 10/26/2006 01:44 AM, Sarah Peeke (XERT) wrote: Basically I need to show a list of links in two columns, alphabetical vertically (one column will not suffice as the list is too long). *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Accessible Multi-Column List
This solution would be great, except that I need the list to remain alphabetical *vertically*. Have you considered styling your LIs so that they sit side-by-side within the list? Then you would have one single list, with list items taking up 49% of the width of the list, giving the appearance of two columns on screen, but only one physical list for accessibility. I am sure there are many different ways of doing this, but the most obvious starting point would be to style the LIs as 'display:inline' and take it from there. Regards, Mike -- XERT Communications email: [EMAIL PROTECTED] mobile: 0438 017 416 http://www.xert.com.au/ web development : digital imaging : dvd production *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
Hi Paul The methods I describe in this article use ems for positioning, not pixels: http://www.alistapart.com/articles/multicolumnlists/ My favorite method is the last (#6). Have you found that it doesn't survive cross-browser? I'd be interested in your findings. I saw your example 6, and it looks great. I maybe nitpicking but the columns don't line up in Safari 2.0.4 or Opera 9.0.2 Mac. I know they've got a small audience generally, but I'm hoping to find something more x-browser if possible. Do you know a workaround for this? -- XERT Communications email: [EMAIL PROTECTED] mobile: 0438 017 416 http://www.xert.com.au/ web development : digital imaging : dvd production *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
Thanks Paul, A great read of the options for multi column lists. You have helped another activist and cat lover trying to give up using Tables. Thanks Tim On 26/10/2006, at 7:34 PM, Paul Novitski wrote: At 10/26/2006 01:44 AM, Sarah Peeke (XERT) wrote: Basically I need to show a list of links in two columns, alphabetical vertically (one column will not suffice as the list is too long). I've seen a number of options for styling a list in two columns (or more) using line-height and a negative margin, but they either don't render well across a number of browsers, or rely on pixels etc. The methods I describe in this article use ems for positioning, not pixels: http://www.alistapart.com/articles/multicolumnlists/ My favorite method is the last (#6). Have you found that it doesn't survive cross-browser? I'd be interested in your findings. The other option is to use two separate lists (part a and part b) - but I imagine that this won't be as accessible. eg h2Sub Heading/h2 ul class=parta ul class=partb liApples/li liOranges/li liBananas/liliPineapples/li /ul /ul It doesn't seem inaccessible to me, it's just not true to the actual content which is one list, not two. I don't think DLs or tables are appropriate here. Does anyone disagree? Not I. How could a DL help you here? You mean by putting half the list in one or more DTs and the other half in one or more DDs? Unless the first half of the list defines the second half in some way, using a DL would be inappropriate. Splitting the list in two with any markup purely for the sake of presentation seems inappropriate to me (of course, I'm not facing your deadline!). I still think your best bet is working for better cross-browser styling of a single unordered list. Regards, Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** The Editor Heretic Press http://www.hereticpress.com Email [EMAIL PROTECTED] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
On Oct 26, 2006, at 7:26 PM, Sarah Peeke (XERT) wrote: The methods I describe in this article use ems for positioning, not pixels: http://www.alistapart.com/articles/multicolumnlists/ My favorite method is the last (#6). Have you found that it doesn't survive cross-browser? I'd be interested in your findings. I saw your example 6, and it looks great. I maybe nitpicking but the columns don't line up in Safari 2.0.4 or Opera 9.0.2 Mac. I know they've got a small audience generally, but I'm hoping to find something more x-browser if possible. Do you know a workaround for this? Unfortunately, there are no workarounds. It all depends on how the browser decides to round off the numbers: assume the computed height of one li is 2.1em (font-size/line-height/padding); this might compute to 33.6 px (@font-size=16px). Then you have to take the total computed height of one column (number of li by 2.3em). Depending on how browsers round the numbers of, you end up with a few (screen) px difference. How do you slice pixels on screen ? All browser use different methods with Gecko being one of the more 'exact'. In the case above, assuming five li in a column, Gecko will compute the following numbers: 33/34/33/34/33 (equals 167px, where as the compute height of the column is 168px). Other browsers will round off the height of each li to 33px but make the total computed height 168px. See where we are going ? Note: I simplify slightly above. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
At 10/26/2006 05:58 AM, Mike at Green-Beast.com wrote: Not sure if this one's messed up on various platforms/browsers but I think it's stable. It might yet another option for you. It's good and resizes well in everything *I've* tested it in (including IE7). The ordering is left - right - down, left - right - down, and so on. Very accessible. Write-up: http://mikecherim.com/gbcms_xml/news_page.php?id=4#n4 Experiment/demo: http://mikecherim.com/experiments/css_double_lists.php The main drawback of this technique is that, although the markup sequence is correct, the presentational sequence is fractured, with consecutive list items appearing in adjacent columns: A B C D E F The challenge is to present the list items in two or more vertical sequences: A D B E C F ...while maintaining a single, correctly-sequenced list in the markup. Regards, Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
Hello Paul, Thanks for the feedback. I did note it was left - right - down so it was more or less just an option for if wanting a presentational list in that format (not sure if it's wrong or fractured per se). That said, maybe I'll have to offer it the other way in a future experiment. I do suspect I'll have to measure heights in EMs, though to prevent breakage (assuming I'll end up using some negative margin-top). Cheers. Mike - Original Message - From: Paul Novitski [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, October 26, 2006 2:13 PM Subject: Re: [WSG] Accessible Multi-Column List At 10/26/2006 05:58 AM, Mike at Green-Beast.com wrote: Not sure if this one's messed up on various platforms/browsers but I think it's stable. It might yet another option for you. It's good and resizes well in everything *I've* tested it in (including IE7). The ordering is left - right - down, left - right - down, and so on. Very accessible. Write-up: http://mikecherim.com/gbcms_xml/news_page.php?id=4#n4 Experiment/demo: http://mikecherim.com/experiments/css_double_lists.php The main drawback of this technique is that, although the markup sequence is correct, the presentational sequence is fractured, with consecutive list items appearing in adjacent columns: A B C D E F The challenge is to present the list items in two or more vertical sequences: A D B E C F ...while maintaining a single, correctly-sequenced list in the markup. Regards, Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
At 10/26/2006 11:54 AM, Mike at Green-Beast.com wrote: Thanks for the feedback. I did note it was left - right - down so it was more or less just an option for if wanting a presentational list in that format (not sure if it's wrong or fractured per se). Sure -- perhaps I shouldn't have used such prejudicial language! There are instances in which horizontal list wrap is perfectly acceptable, e.g. gallery thumbnails. It's when the designer (such as the OP for this thread) wants vertical sequences of list items that the horizontal format seems inappropriate. That said, maybe I'll have to offer it the other way in a future experiment. I do suspect I'll have to measure heights in EMs, though to prevent breakage (assuming I'll end up using some negative margin-top). If you haven't already, please read my List Apart article http://alistapart.com/articles/multicolumnlists/. I'd love it if you could improve on any of those techniques or come up with ones I hadn't considered. Warm regards, Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
Paul Novitski wrote: If you haven't already, please read my List Apart article http://alistapart.com/articles/multicolumnlists/. I'd love it if you could improve on any of those techniques or come up with ones I hadn't considered. Hi Paul, What about this one?: http://www.tjkdesign.com/test/ ;-) BTW, there are typos in the markup box on http://www.alistapart.com/d/multicolumnlists/example5.html You're missing the opening A tags... --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
Thanks Paul, I will for sure. Part of my learning methodology is to roll up my sleeves and get my hands dirty so to speak, but often before doing my experiments I do like to take a look around to see what others have done, then I try to do things differently. To experiment. That's the fun part. My next experiment, to be published after the 1st, will be an odd-ball image replacement technique that I think is unique. I refuse to call it MIR though ;-) Cheers. Mike - Original Message - From: Paul Novitski [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, October 26, 2006 4:07 PM Subject: Re: [WSG] Accessible Multi-Column List At 10/26/2006 11:54 AM, Mike at Green-Beast.com wrote: Thanks for the feedback. I did note it was left - right - down so it was more or less just an option for if wanting a presentational list in that format (not sure if it's wrong or fractured per se). Sure -- perhaps I shouldn't have used such prejudicial language! There are instances in which horizontal list wrap is perfectly acceptable, e.g. gallery thumbnails. It's when the designer (such as the OP for this thread) wants vertical sequences of list items that the horizontal format seems inappropriate. That said, maybe I'll have to offer it the other way in a future experiment. I do suspect I'll have to measure heights in EMs, though to prevent breakage (assuming I'll end up using some negative margin-top). If you haven't already, please read my List Apart article http://alistapart.com/articles/multicolumnlists/. I'd love it if you could improve on any of those techniques or come up with ones I hadn't considered. Warm regards, Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
At 10/26/2006 04:06 PM, Thierry Koblentz wrote: Paul Novitski wrote: If you haven't already, please read my List Apart article http://alistapart.com/articles/multicolumnlists/. I'd love it if you could improve on any of those techniques or come up with ones I hadn't considered. Hi Paul, What about this one?: http://www.tjkdesign.com/test/ ;-) Table-based markup! How ingenious! You're a regular pioneer of the untrod realms, Thierry. BTW, there are typos in the markup box on http://www.alistapart.com/d/multicolumnlists/example5.html You're missing the opening A tags... Thanks! Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
http://www.christianmontoya.com/2006/09/18/revisiting-image-rollovers/ If you're talking about the Ryan Rollovers that you link to, it looks very similar to the Gilder-Levin method which is mentioned at http://www.mezzoblue.com/tests/revised-image-replacement/ (dated 2004) and was updated to become the Gilder Levin Ryznar Jacoubsen method - http://www.ryznardesign.com/web_coding/image_replacement/ -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
On 10/26/06, John Faulds [EMAIL PROTECTED] wrote: http://www.christianmontoya.com/2006/09/18/revisiting-image-rollovers/ If you're talking about the Ryan Rollovers that you link to, it looks very similar to the Gilder-Levin method which is mentioned at http://www.mezzoblue.com/tests/revised-image-replacement/ (dated 2004) and was updated to become the Gilder Levin Ryznar Jacoubsen method - http://www.ryznardesign.com/web_coding/image_replacement/ Oh well, in 2004 I thought CSS was just for scrollbar colors... but I still don't know how image replacement is similar to image rollovers. Did you notice that Ryan's rollover, um, changes on roll-over? Not that any of this is on topic, so I'll leave it at that. -- -- Christian Montoya christianmontoya.com ... portfolio.christianmontoya.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
Lol, MIR is taken... I did not know. Mike - Original Message - From: Christian Montoya [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, October 26, 2006 7:54 PM Subject: Re: [WSG] Accessible Multi-Column List On 10/26/06, Mike at Green-Beast.com [EMAIL PROTECTED] wrote: Thanks Paul, I will for sure. Part of my learning methodology is to roll up my sleeves and get my hands dirty so to speak, but often before doing my experiments I do like to take a look around to see what others have done, then I try to do things differently. To experiment. That's the fun part. My next experiment, to be published after the 1st, will be an odd-ball image replacement technique that I think is unique. I refuse to call it MIR though ;-) ooof, but MIR is not for image replacement, it's for rollovers, and it's already been outdone: http://www.christianmontoya.com/2006/09/18/revisiting-image-rollovers/ looking forward to your technique though, sounds interesting! p.s. You could always go for IR-Beast =) -- -- Christian Montoya christianmontoya.com ... portfolio.christianmontoya.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
