Re: [WSG] Ordered List Best Practice
If you're using a h3 inside a list, I kind of expect a h2 and a h1 to precede that... Is it really necessary to use a h3 or could you just style an ol or ul in the appropriate way? On Tue, Sep 22, 2009 at 4:40 PM, Erickson, Kevin (DOE) kevin.erick...@doe.virginia.gov wrote: Hi, I have an ordered list that needs the items to be alphabetized and have lines in between the items that will be subheadings within the list BUT also need to NOT take a letter. Is there a best practice on trying to accomplish the desired look? (examples below) Here is the code with no validation issues but the two lines with Subheading will get a letter (not desired): ol type=A lia href=a.pdfFirst/a/li li div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li li div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol In the following list I get the desired results in the browser but does not validate,(The tag:div is not allowed within: ol): ol type=A lia href=a.pdfFirst/a/li div class=margin_left_minus_40px h3Subheading/h3 /div lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li div class=margin_left_minus_40px h3Subheading/h3 /div lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol I appreciate any advice, Kevin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Ordered List Best Practice
Hi Kevin, Headings in lists will validate. However as Matijs says all you need to do is style the list elements and remove the divs. Kevin Work in progress includes: http://www.hotel-france-hotels.com http://www.hotels-uk-accommodation.co.uk ol type=A lia href=a.pdfFirst/a/li li class=margin_left_minus_40pxbSubheading/b/li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li li class=margin_left_minus_40pxbSubheading/b/li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol From: Matijs Sent: Wednesday, September 23, 2009 8:31 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Ordered List Best Practice If you're using a h3 inside a list, I kind of expect a h2 and a h1 to precede that... Is it really necessary to use a h3 or could you just style an ol or ul in the appropriate way? On Tue, Sep 22, 2009 at 4:40 PM, Erickson, Kevin (DOE) kevin.erick...@doe.virginia.gov wrote: Hi, I have an ordered list that needs the items to be alphabetized and have lines in between the items that will be subheadings within the list BUT also need to NOT take a letter. Is there a best practice on trying to accomplish the desired look? (examples below) Here is the code with no validation issues but the two lines with Subheading will get a letter (not desired): ol type=A lia href=a.pdfFirst/a/li li div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li li div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol In the following list I get the desired results in the browser but does not validate,(The tag:div is not allowed within: ol): ol type=A lia href=a.pdfFirst/a/li div class=margin_left_minus_40px h3Subheading/h3 /div lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li div class=margin_left_minus_40px h3Subheading/h3 /div lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol I appreciate any advice, Kevin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Ordered List Best Practice
Yes there is an H2 and H1 that proceeds. Thanks. From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Matijs Sent: Wednesday, September 23, 2009 3:32 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Ordered List Best Practice If you're using a h3 inside a list, I kind of expect a h2 and a h1 to precede that... Is it really necessary to use a h3 or could you just style an ol or ul in the appropriate way? On Tue, Sep 22, 2009 at 4:40 PM, Erickson, Kevin (DOE) kevin.erick...@doe.virginia.gov wrote: Hi, I have an ordered list that needs the items to be alphabetized and have lines in between the items that will be subheadings within the list BUT also need to NOT take a letter. Is there a best practice on trying to accomplish the desired look? (examples below) Here is the code with no validation issues but the two lines with Subheading will get a letter (not desired): ol type=A lia href=a.pdfFirst/a/li li div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li li div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol In the following list I get the desired results in the browser but does not validate,(The tag:div is not allowed within: ol): ol type=A lia href=a.pdfFirst/a/li div class=margin_left_minus_40px h3Subheading/h3 /div lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li div class=margin_left_minus_40px h3Subheading/h3 /div lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol I appreciate any advice, Kevin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Ordered List Best Practice
Thank you! But unfortunately the subheading lines there would steal a letter, (i.e. B and E in your list). I am trying to avoid that. So on this subject, I am with Paul, who commented that I need to break it up with sub lists: ol li ol li a /li li b /li li c /li /ol h3 subhead /h3 ol li d /li li e /li /ol /li /ol From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Kevin Ireson Sent: Wednesday, September 23, 2009 6:08 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Ordered List Best Practice Hi Kevin, Headings in lists will validate. However as Matijs says all you need to do is style the list elements and remove the divs. Kevin Work in progress includes: http://www.hotel-france-hotels.com http://www.hotels-uk-accommodation.co.uk ol type=A lia href=a.pdfFirst/a/li li class=margin_left_minus_40pxbSubheading/b/li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li li class=margin_left_minus_40pxbSubheading/b/li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol From: Matijs mailto:mat...@gmail.com Sent: Wednesday, September 23, 2009 8:31 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Ordered List Best Practice If you're using a h3 inside a list, I kind of expect a h2 and a h1 to precede that... Is it really necessary to use a h3 or could you just style an ol or ul in the appropriate way? On Tue, Sep 22, 2009 at 4:40 PM, Erickson, Kevin (DOE) kevin.erick...@doe.virginia.gov wrote: Hi, I have an ordered list that needs the items to be alphabetized and have lines in between the items that will be subheadings within the list BUT also need to NOT take a letter. Is there a best practice on trying to accomplish the desired look? (examples below) Here is the code with no validation issues but the two lines with Subheading will get a letter (not desired): ol type=A lia href=a.pdfFirst/a/li li div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li li div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol In the following list I get the desired results in the browser but does not validate,(The tag:div is not allowed within: ol): ol type=A lia href=a.pdfFirst/a/li div class=margin_left_minus_40px h3Subheading/h3 /div lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li div class=margin_left_minus_40px h3Subheading/h3 /div lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol I appreciate any advice, Kevin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Ordered List Best Practice
In the following list I get the desired results in the browser but does not validate,(The tag:div is not allowed within: ol): How about: ol type=A lia href=a.pdfFirst/a div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol Best regards, Kepler Gelotte Neighbor Webmaster, Inc. 156 Normandy Dr., Piscataway, NJ 08854 www.neighborwebmaster.com phone/fax: (732) 302-0904 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Ordered List Best Practice
Perhaps you could use separate lists for each sub-heading then use the appropriate start value for each list. Using something similar to: http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html (maybe an unordered list(definition list?) of subheadings with nested ordered lists) Just an idea. On Tue, September 22, 2009 3:40 pm, Erickson, Kevin (DOE) wrote: Hi, I have an ordered list that needs the items to be alphabetized and have lines in between the items that will be subheadings within the list BUT also need to NOT take a letter. Is there a best practice on trying to accomplish the desired look? (examples below) Here is the code with no validation issues but the two lines with Subheading will get a letter (not desired): ol type=A lia href=a.pdfFirst/a/li li div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li li div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol In the following list I get the desired results in the browser but does not validate,(The tag:div is not allowed within: ol): ol type=A lia href=a.pdfFirst/a/li div class=margin_left_minus_40px h3Subheading/h3 /div lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a/li div class=margin_left_minus_40px h3Subheading/h3 /div lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol I appreciate any advice, Kevin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Ordered List Best Practice
Good call. I did this and it works visually and validates. How will this work for screen readers? Anyone??? -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Kepler Gelotte Sent: Tuesday, September 22, 2009 11:44 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Ordered List Best Practice In the following list I get the desired results in the browser but does not validate,(The tag:div is not allowed within: ol): How about: ol type=A lia href=a.pdfFirst/a div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol Best regards, Kepler Gelotte Neighbor Webmaster, Inc. 156 Normandy Dr., Piscataway, NJ 08854 www.neighborwebmaster.com phone/fax: (732) 302-0904 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Ordered List Best Practice
Thanks Stuart.
Exactly what I was looking for!! But will this work for an ordered list
with capital letter styling? And is it kosher for web standards?
BTW- I changed my list to use CSS for the deprecated type attribute.
Now using:
.list_style_upper_alpha { /*For ordered lists that need ABC...*/
list-style-type:upper-alpha;
}
Cheers
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Stuart Foulstone
Sent: Tuesday, September 22, 2009 12:08 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Ordered List Best Practice
Perhaps you could use separate lists for each sub-heading then use the
appropriate start value for each list.
Using something similar to:
http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-di
fferent-than-1-using-css.html
(maybe an unordered list(definition list?) of subheadings with nested
ordered lists)
Just an idea.
On Tue, September 22, 2009 3:40 pm, Erickson, Kevin (DOE) wrote:
Hi,
I have an ordered list that needs the items to be alphabetized and
have lines in between the items that will be subheadings within the
list BUT also need to NOT take a letter. Is there a best practice on
trying to accomplish the desired look? (examples below)
Here is the code with no validation issues but the two lines with
Subheading will get a letter (not desired):
ol type=A
lia href=a.pdfFirst/a/li
li
div class=margin_left_minus_40px
h3Subheading/h3
/div
/li
lia href=b.pdfFirst/a/li
lia href=c.pdfFirst/a/li
li
div class=margin_left_minus_40px
h3Subheading/h3
/div
/li
lia href=d.pdfFirst/a/li
lia href=e.pdfFirst/a/li
/ol
In the following list I get the desired results in the browser but
does not validate,(The tag:div is not allowed within: ol):
ol type=A
lia href=a.pdfFirst/a/li
div class=margin_left_minus_40px
h3Subheading/h3
/div
lia href=b.pdfFirst/a/li
lia href=c.pdfFirst/a/li
div class=margin_left_minus_40px
h3Subheading/h3
/div
lia href=d.pdfFirst/a/li
lia href=e.pdfFirst/a/li
/ol
I appreciate any advice,
Kevin
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Ordered List Best Practice
At 9/22/2009 08:43 AM, Kepler Gelotte wrote: ol type=A lia href=a.pdfFirst/a div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol I find this solution problematic. Scrutinizing the markup, I would put a subhead at the beginning of the content it heads, not at the tail of whatever content precedes it. Semantically, if items d e deserve their own subhead, to what extent are they really part of the same list as a, b, c? They might be on the same nesting level, but are they really part of the same list? It would be interesting to see some of the actual content of this list to see why the original poster felt that all five items belong in one list. I guess the bottom line here is that today's HTML doesn't permit us to insert a headline into the middle of a list but gives us this solution: ol li ol li a /li li b /li li c /li /ol h3 subhead /h3 ol li d /li li e /li /ol /li /ol div class=margin_left_minus_40px h3Subheading/h3 /div Aside, is the div really necessary? Could not any necessary styling be applied to the h3 itself? If complicated markup is deemed necessary, for example because of multiple background images CSS3, I myself would rather nest structures inside the headline rather than hang them outside of it so as to reach for a greater semantic clarity. Also, I suggest you use class names that evoke the purpose of a structure and not its presentation. If your class names are going to be as explicit as margin_left_minus_40px then you're no better off than injecting style rules inline. Either way, if you change the graphic design you'll be changing your markup. In this particular example you likely don't need class names at all because you can specify the divs and h3s unambiguously from their position in the markup, e.g. ol.listName li h3 Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Ordered List Best Practice
This sounds like excellent advice. I am going to rethink my naming convention as well as the way this list needs to be broken up. Thanks for sharing your knowledge, Kevin -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Paul Novitski Sent: Tuesday, September 22, 2009 1:51 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Ordered List Best Practice At 9/22/2009 08:43 AM, Kepler Gelotte wrote: ol type=A lia href=a.pdfFirst/a div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=b.pdfFirst/a/li lia href=c.pdfFirst/a div class=margin_left_minus_40px h3Subheading/h3 /div /li lia href=d.pdfFirst/a/li lia href=e.pdfFirst/a/li /ol I find this solution problematic. Scrutinizing the markup, I would put a subhead at the beginning of the content it heads, not at the tail of whatever content precedes it. Semantically, if items d e deserve their own subhead, to what extent are they really part of the same list as a, b, c? They might be on the same nesting level, but are they really part of the same list? It would be interesting to see some of the actual content of this list to see why the original poster felt that all five items belong in one list. I guess the bottom line here is that today's HTML doesn't permit us to insert a headline into the middle of a list but gives us this solution: ol li ol li a /li li b /li li c /li /ol h3 subhead /h3 ol li d /li li e /li /ol /li /ol div class=margin_left_minus_40px h3Subheading/h3 /div Aside, is the div really necessary? Could not any necessary styling be applied to the h3 itself? If complicated markup is deemed necessary, for example because of multiple background images CSS3, I myself would rather nest structures inside the headline rather than hang them outside of it so as to reach for a greater semantic clarity. Also, I suggest you use class names that evoke the purpose of a structure and not its presentation. If your class names are going to be as explicit as margin_left_minus_40px then you're no better off than injecting style rules inline. Either way, if you change the graphic design you'll be changing your markup. In this particular example you likely don't need class names at all because you can specify the divs and h3s unambiguously from their position in the markup, e.g. ol.listName li h3 Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
