I've got the following list:
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.nmhs.medford.k12.or.us">North Medford</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.smhs.medford.k12.or.us">South Medford</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/second/hedrick1.htm">Hedrick</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/second/mcloughl1.htm">McLoughlin</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/abel/default1.htm">Abraham Lincoln</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/gcel/default1.htm">Griffin Creek</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/hvel/default1.htm">Hoover</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/hoel/default1.htm">Howard</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/jael/default1.htm">Jackson</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/jvel/default1.htm">Jacksonville</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/jfel/default1.htm">Jefferson</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/keel/default1.htm">Kennedy</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lpel.medford.k12.or.us">Lone Pine</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/ogel/default1.htm">Oak Grove</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/roel/default1.htm">Roosevelt</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/ruel/default1.htm">Ruch</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/wael/default1.htm">Washington</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/wiel/default1.htm">Wilson</a></li>
</ul>
it is held in a 578px wide container. I want to split it up into a 4x4 column with a 5th row of 2, like on our current homepage (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/">http://www.medford.k12.or.us/</a><!-- m -->).
My question is, 1) would this count as tabular data? 2) if not, how might I accomplish this? I've tried splitting this into 5 ul's with text-align:center and it looked awful (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/default3.asp">http://www.medford.k12.or.us/default3.asp</a><!-- m -->)...
Any ideas?I would float the <ul>'s, and just pop and extra <li> on the end of the second and third ones, for the extra two at the bottom.
If you need an example...that'd be great... I'm pretty bad with floatsIt's attached.Originally posted by samij586
I've tried splitting this into 5 ul's with text-align:center and it looked awful (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/default3.asp">http://www.medford.k12.or.us/default3.asp</a><!-- m -->)...
Any ideas?
Anyone using a screen reader would probably thank you for keeping it as one list if possible.
I'm home so I couldn't test on a PC, but below is what I came up with, bloated as usual, but keeping it as one UL. It's also not scalable unless there's a way around IE's need for a width to be specified...?
Also, for some reason, every now and again, i run into a situation where Safari does not display the same as Netscape. This is one of them. Anyway, the code below display fine visually in IE5.2.3Mac and N7.1Mac. I would assume something is messed up in IE5-6PC but can't check until tomorrow:
<style type="text/css">
/*<![CDATA[*/
div, ul, li {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
div ul {
padding: 0;
margin: 1px;
list-style-type: none;
float: left;
}
div ul li {
padding: 1px 15px;
margin: 2px 0;
border: 1px solid #999;
background-color: #CCC;
width: 52px;
}
.col2 {
position: relative;
left: 86px;
top: -92px;
}
.col3 {
position: relative;
left: 172px;
top: -207px;
}
.col4 {
position: relative;
left: 258px;
top: -322px;
}
/* start IE5Mac ignore \*/
.col2 {
top: -88px;
}
.col3 {
top: -198px;
}
.col4 {
top: -308px;
}
/* end IE5Mac ignore */
/*]]>*/
</style>
</head>
<body>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="col2">Item 2.1</li>
<li class="col2">Item 2.2</li>
<li class="col2">Item 2.3</li>
<li class="col2">Item 2.4</li>
<li class="col2">Item 2.5</li>
<li class="col3">Item 3.1</li>
<li class="col3">Item 3.2</li>
<li class="col3">Item 3.3</li>
<li class="col3">Item 3.4</li>
<li class="col3">Item 3.5</li>
<li class="col4">Item 4.1</li>
<li class="col4">Item 4.2</li>
<li class="col4">Item 4.3</li>
<li class="col4">Item 4.4</li>
</ul>
</div>I'm not sure what it's supposed to look like, but it looks pretty messed up on the PC -- FB 0.7/IE 6.
Originally posted by TimeBandit
Anyone using a screen reader would probably thank you for keeping it as one list if possible.
Explain?beautiful paul...
love it...
Timebandit: I don't have a screenreader myself, but its my understanding that it just reads the pages content, and that the listener doesn't see any of the coding aspect... so as long as the links are in order, it will read them correctly... if this is incorrect, please let me know.Originally posted by samij586
beautiful paul...
love it...
That gives me a warm fuzzy feeling.
I think I could smush it all into one list, but it'd be a bit bloated.yeah, so was my 5 list method though... display:inline? what was i thinking?I was able to smush it all into one list, and the bloated code is a few extra lines for a class.first one is definately better... if you make any of the items longer in the second, the whole thing goes to crud...Originally posted by Paul Jr
I'm not sure what it's supposed to look like, but it looks pretty messed up on the PC -- FB 0.7/IE 6.
I figured... hehe... I will look at it again when I get time. I got slammed today finishing ads and working on a Flash demo.
Originally posted by Paul Jr
Explain?
It's been a month since I used Jaws but when it reaches a UL it says something like, "List of 4 items. First item: Blah. Second item: Blah..." So splitting the ULs will make it sound to a blind user that she is actually hearting 4 separate, possibly unrelated lists of items. Again, if I get time, it'd be nice if I fired Jaws up to see how it specifically reacts to something like this.Originally posted by TimeBandit
It's been a month since I used Jaws but when it reaches a UL it says something like, "List of 4 items. First item: Blah. Second item: Blah..." So splitting the ULs will make it sound to a blind user that she is actually hearting 4 separate, possibly unrelated lists of items. Again, if I get time, it'd be nice if I fired Jaws up to see how it specifically reacts to something like this.
Ah. I've never used a screenreader before; I haven't a clue how they work at all.Originally posted by Paul Jr
Ah. I've never used a screenreader before; I haven't a clue how they work at all.
They read everything on your page aloud. So, of course, they pronounce things incorrectly from time to time. They can be a pain to users in some respects but are obviously a great help to users at the same time.
A couple things you may want to keep in mind for screen readers while coding is to use ALT images on everything, even images that aren't really helpful. However, decorative images like that should just be ALT="" with no description. If you use images as bullets in lists you don't have to say "bullet" over and over, or "arrow" over and over.
Something else to shoot for is "skipnavs". Every page's navigation is read over and over and the users of screen readers seem to get annoyed having to hear it over and over. So you put in a link before navigation saying ALT="skip to main content" or some such, and then link it to an anchor after the navigation (or in this case at the beginning of your content).
There is debate of course over what to say, where to say it, how to apply it, yadda. We don't use "skip to main content" because computers tend to pronounce "content" as in "happy" not as in "info" (emphasis on "tent"). We use "skip primary navigation" or secondary, footer, etc.Yeah, I've been using skip nav's for some time now, I usually use "Skip Navigation (Jump to Page Content)" as the textnot scalable, but this works in Safari, 1.02, MacN7, PC-IE6. IE5Mac is acting odd as expected though... I may actually have to figure this out for use on a site I'm working on so I may update this.
<!-- m --><a class="postlink" href="http://www.brookgroup.com/test/split-list/split-list.html">http://www.brookgroup.com/test/split-li ... -list.html</a><!-- m -->
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.nmhs.medford.k12.or.us">North Medford</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.smhs.medford.k12.or.us">South Medford</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/second/hedrick1.htm">Hedrick</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/second/mcloughl1.htm">McLoughlin</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/abel/default1.htm">Abraham Lincoln</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/gcel/default1.htm">Griffin Creek</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/hvel/default1.htm">Hoover</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/hoel/default1.htm">Howard</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/jael/default1.htm">Jackson</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/jvel/default1.htm">Jacksonville</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/jfel/default1.htm">Jefferson</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/keel/default1.htm">Kennedy</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lpel.medford.k12.or.us">Lone Pine</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/ogel/default1.htm">Oak Grove</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/roel/default1.htm">Roosevelt</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/ruel/default1.htm">Ruch</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/wael/default1.htm">Washington</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"schools/elem/wiel/default1.htm">Wilson</a></li>
</ul>
it is held in a 578px wide container. I want to split it up into a 4x4 column with a 5th row of 2, like on our current homepage (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/">http://www.medford.k12.or.us/</a><!-- m -->).
My question is, 1) would this count as tabular data? 2) if not, how might I accomplish this? I've tried splitting this into 5 ul's with text-align:center and it looked awful (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/default3.asp">http://www.medford.k12.or.us/default3.asp</a><!-- m -->)...
Any ideas?I would float the <ul>'s, and just pop and extra <li> on the end of the second and third ones, for the extra two at the bottom.
If you need an example...that'd be great... I'm pretty bad with floatsIt's attached.
Originally posted by samij586 I've tried splitting this into 5 ul's with text-align:center and it looked awful (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/default3.asp">http://www.medford.k12.or.us/default3.asp</a><!-- m -->)...
Any ideas?
Anyone using a screen reader would probably thank you for keeping it as one list if possible.
I'm home so I couldn't test on a PC, but below is what I came up with, bloated as usual, but keeping it as one UL. It's also not scalable unless there's a way around IE's need for a width to be specified...?
Also, for some reason, every now and again, i run into a situation where Safari does not display the same as Netscape. This is one of them. Anyway, the code below display fine visually in IE5.2.3Mac and N7.1Mac. I would assume something is messed up in IE5-6PC but can't check until tomorrow:
<style type="text/css">
/*<![CDATA[*/
div, ul, li {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
div ul {
padding: 0;
margin: 1px;
list-style-type: none;
float: left;
}
div ul li {
padding: 1px 15px;
margin: 2px 0;
border: 1px solid #999;
background-color: #CCC;
width: 52px;
}
.col2 {
position: relative;
left: 86px;
top: -92px;
}
.col3 {
position: relative;
left: 172px;
top: -207px;
}
.col4 {
position: relative;
left: 258px;
top: -322px;
}
/* start IE5Mac ignore \*/
.col2 {
top: -88px;
}
.col3 {
top: -198px;
}
.col4 {
top: -308px;
}
/* end IE5Mac ignore */
/*]]>*/
</style>
</head>
<body>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="col2">Item 2.1</li>
<li class="col2">Item 2.2</li>
<li class="col2">Item 2.3</li>
<li class="col2">Item 2.4</li>
<li class="col2">Item 2.5</li>
<li class="col3">Item 3.1</li>
<li class="col3">Item 3.2</li>
<li class="col3">Item 3.3</li>
<li class="col3">Item 3.4</li>
<li class="col3">Item 3.5</li>
<li class="col4">Item 4.1</li>
<li class="col4">Item 4.2</li>
<li class="col4">Item 4.3</li>
<li class="col4">Item 4.4</li>
</ul>
</div>I'm not sure what it's supposed to look like, but it looks pretty messed up on the PC -- FB 0.7/IE 6.
Originally posted by TimeBandit
Anyone using a screen reader would probably thank you for keeping it as one list if possible.
Explain?beautiful paul...
love it...
Timebandit: I don't have a screenreader myself, but its my understanding that it just reads the pages content, and that the listener doesn't see any of the coding aspect... so as long as the links are in order, it will read them correctly... if this is incorrect, please let me know.Originally posted by samij586
beautiful paul...
love it...
That gives me a warm fuzzy feeling.
I think I could smush it all into one list, but it'd be a bit bloated.yeah, so was my 5 list method though... display:inline? what was i thinking?I was able to smush it all into one list, and the bloated code is a few extra lines for a class.first one is definately better... if you make any of the items longer in the second, the whole thing goes to crud...Originally posted by Paul Jr
I'm not sure what it's supposed to look like, but it looks pretty messed up on the PC -- FB 0.7/IE 6.
I figured... hehe... I will look at it again when I get time. I got slammed today finishing ads and working on a Flash demo.
Originally posted by Paul Jr
Explain?
It's been a month since I used Jaws but when it reaches a UL it says something like, "List of 4 items. First item: Blah. Second item: Blah..." So splitting the ULs will make it sound to a blind user that she is actually hearting 4 separate, possibly unrelated lists of items. Again, if I get time, it'd be nice if I fired Jaws up to see how it specifically reacts to something like this.Originally posted by TimeBandit
It's been a month since I used Jaws but when it reaches a UL it says something like, "List of 4 items. First item: Blah. Second item: Blah..." So splitting the ULs will make it sound to a blind user that she is actually hearting 4 separate, possibly unrelated lists of items. Again, if I get time, it'd be nice if I fired Jaws up to see how it specifically reacts to something like this.
Ah. I've never used a screenreader before; I haven't a clue how they work at all.
Originally posted by Paul Jr Ah. I've never used a screenreader before; I haven't a clue how they work at all.
They read everything on your page aloud. So, of course, they pronounce things incorrectly from time to time. They can be a pain to users in some respects but are obviously a great help to users at the same time.
A couple things you may want to keep in mind for screen readers while coding is to use ALT images on everything, even images that aren't really helpful. However, decorative images like that should just be ALT="" with no description. If you use images as bullets in lists you don't have to say "bullet" over and over, or "arrow" over and over.
Something else to shoot for is "skipnavs". Every page's navigation is read over and over and the users of screen readers seem to get annoyed having to hear it over and over. So you put in a link before navigation saying ALT="skip to main content" or some such, and then link it to an anchor after the navigation (or in this case at the beginning of your content).
There is debate of course over what to say, where to say it, how to apply it, yadda. We don't use "skip to main content" because computers tend to pronounce "content" as in "happy" not as in "info" (emphasis on "tent"). We use "skip primary navigation" or secondary, footer, etc.Yeah, I've been using skip nav's for some time now, I usually use "Skip Navigation (Jump to Page Content)" as the textnot scalable, but this works in Safari, 1.02, MacN7, PC-IE6. IE5Mac is acting odd as expected though... I may actually have to figure this out for use on a site I'm working on so I may update this.
<!-- m --><a class="postlink" href="http://www.brookgroup.com/test/split-list/split-list.html">http://www.brookgroup.com/test/split-li ... -list.html</a><!-- m -->