Re: [WSG] Accessible image rotators
You could use a database, but if you just want a low maintainance method make a tab deliminated text file eg; image1.jpgThis is the first image image2.jpgThis is the second image image3.jpgThis is the thrid image Now of course the image names will reflect the images in your rotate directory and you will want your php to look a little like this ?php $altMap = file(altmap.txt); // read the file into an array $randID = rand(0,count($altMap)-1); // minus one cause the array begins with 0 $useImage = explode(\t,$altMap[$randID]); echo img src=\.$useImage[0].\ alt=\.$useImage[1].\ / ? I haven't tested it but im pretty sure that should work, give it a go. Marc. PS the paths also assume all the files are in the one directory. - Original Message - From: [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Thursday, July 22, 2004 3:40 PM Subject: [WSG] Accessible image rotators hello, i am using a image rotator php script in the home page of the site. The problem will image rotator scripts either in PHP or Javascript is that, they rotate the images from a particular folder randomly. But when you validate, the image will not have alt tag or a title tag to make it accessible. How do i make that. any ideas. narain R.L. Narayan +91-98401 08007 * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] About the standard Price for our website design .
What you charge depends on a whole range of factors but these are the main ones. - The local going rate - The type of clients you deal with - How good you are at what you do - Your overheads Obviously a large agency with flash premises in the Middle of London dealing with blue chip clients are going to be charging a lot more than a bedroom designer with a knock-off copy of dreamweaver building sites for the local florist. If you're a freelancer you should probably work out how much you feel you should be earning a year, adding on any overheads, estimate how many jobs you're likely to do a year and how long each job is likely to take. This should be enough to work out a basic daily rate. As a guide these may be of help http://salary.monster.co.uk/salary.monster.co.uk/view.asp http://www.nmk.co.uk/article/2003/03/25/rate-card-survey http://www.payscale.com/salary-survey/vid-97627/fid-6886 http://old.alistapart.com/stories/fee/ http://www.allfreelancework.com/articlef1013hourates.php http://www.hwg.org/resources/faqs/ratesFAQ.html http://provider.com/howtoset.htm Andy Budd http://www.message.uk.com/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Accessible image rotators
Narain said: i am using a image rotator php script in the home page of the site. The problem will image rotator scripts either in PHP or Javascript is that, they rotate the images from a particular folder randomly. But when you validate, the image will not have alt tag or a title tag to make it accessible. If the images are decoration rather than content, you can always reference your rotate script within the CSS, like so: img#rotate { background : #bdb391 url(/rotate.php) no-repeat 0 0; } Perfectly valid, no need to worry about changing alt attributes. Owen -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: 22 July 2004 06:40 To: [EMAIL PROTECTED] Subject: [WSG] Accessible image rotators hello, i am using a image rotator php script in the home page of the site. The problem will image rotator scripts either in PHP or Javascript is that, they rotate the images from a particular folder randomly. But when you validate, the image will not have alt tag or a title tag to make it accessible. How do i make that. any ideas. narain R.L. Narayan +91-98401 08007 * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * __ This email has been scanned by the MessageLabs Email Security System. For more information please visit http://www.messagelabs.com/email __ This email has been scanned for all viruses by the MessageLabs SkyScan service. For more information on a proactive anti-virus service working around the clock, around the globe, visit http://www.messagelabs.com CONFIDENTIALITY NOTICE The information contained in this communication is confidential and may be legally privileged. It is intended solely for the use of the individual or entity to whom it is addressed and others authorised to receive it. If you are not the intended recipient you should not disclose, copy, distribute or take action on the contents of this information, except for the purpose of delivery to the addressee. Any unauthorised use is strictly prohibited and may be unlawful. If you have received this email in error please notify the sender by email immediately and delete the message from your computer. ECOTEC Research Consulting Limited Registered in England No. 1650169 Registered Office: Priestley House, 28-34 Albert Street, Birmingham, B4 7UD, UK Tel: +44 (0)121 616 3600 http://www.ecotec.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] technique of converting to tablefree layout
I always code by hand and my editor of choice is NoteTab Pro (www.notetab.com). As well as Find and Replace it has a neat function which strips (X)HTML out of markup leaving just text and script excerpts etc. Having redesigned a couple of sites in this way, I have yet to trip it up. Bryan Davis Micheal Kear wrote: I've mostly used the good old MkI delete key - the most-used key on my keyboard. When I started renovating web sites, and using word docs and FrontPage sites, I tried using automated methods - search and replace and the like - and found there was always something left. A single b or a i somewhere that affected half the remaining page. Or a font tag that didn't exactly match the search criteria so it would be left. Or a table that I really did want kept would be deleted.These fixes I found would often take just as long as going through the page and deleting stuff in the first place. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
[WSG] Footer Positioning Problem in Mozilla Firefox and Opera
I'm rebuilding a gardening magazine site to web standards and assessibility - and I've almost got it working as I wish ... HTML is at: http://www.bluemountainsgardener.info/index-try.htm CSS is at: http://www.bluemountainsgardener.info/style-accessible.css No skip nav yet, but the layout doesn't break in IE6 at largest text size. So I'm progressing !! It works exactly as I wish in IE6 ... problems lie with Opera 7.23 and Mozilla Firefox 0.8 as follow The text line in the footer lies just below the black footer, not within it. I cannot work out why. In Mozilla Firefox, there's a positioning problem with the horizontal menu in the header. It's meant to line up with everything on the left hand side of the page, but it's indented in Firefox for some reason that I cannot fathom. It's fine in IE6 and Opera 7.23 !! Finally, in the right column, I'd like to know a way of reducing the gap below the headers in the infoboxes - one that will display the same *in all browsers* !! I'd really appreciate any help you can offer. This Discussion List is like life-support to me - thanks again, folks. John Penlington * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Footer Positioning Problem in Mozilla Firefox and Opera
John Penlington wrote: The text line in the footer lies just below the black footer, not within it. There's a positioning problem with the horizontal menu in the header. I'd like to know a way of reducing the gap below the headers in the infoboxes On the #footer p, try margin : 0; On the #topnav ul try padding-left : 0; However, this may affect the layout in other browsers. Firefox (and Mozilla generally) uses padding to layout lists On the #walks p etc, you could try a negative margin-top, though this will no doubt mess up IE. Hope that's a start. Owen -Original Message- From: John Penlington [mailto:[EMAIL PROTECTED] Sent: 22 July 2004 11:53 To: [EMAIL PROTECTED] Subject: [WSG] Footer Positioning Problem in Mozilla Firefox and Opera I'm rebuilding a gardening magazine site to web standards and assessibility - and I've almost got it working as I wish ... HTML is at: http://www.bluemountainsgardener.info/index-try.htm CSS is at: http://www.bluemountainsgardener.info/style-accessible.css No skip nav yet, but the layout doesn't break in IE6 at largest text size. So I'm progressing !! It works exactly as I wish in IE6 ... problems lie with Opera 7.23 and Mozilla Firefox 0.8 as follow The text line in the footer lies just below the black footer, not within it. I cannot work out why. In Mozilla Firefox, there's a positioning problem with the horizontal menu in the header. It's meant to line up with everything on the left hand side of the page, but it's indented in Firefox for some reason that I cannot fathom. It's fine in IE6 and Opera 7.23 !! Finally, in the right column, I'd like to know a way of reducing the gap below the headers in the infoboxes - one that will display the same *in all browsers* !! I'd really appreciate any help you can offer. This Discussion List is like life-support to me - thanks again, folks. John Penlington * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * __ This email has been scanned by the MessageLabs Email Security System. For more information please visit http://www.messagelabs.com/email __ This email has been scanned for all viruses by the MessageLabs SkyScan service. For more information on a proactive anti-virus service working around the clock, around the globe, visit http://www.messagelabs.com CONFIDENTIALITY NOTICE The information contained in this communication is confidential and may be legally privileged. It is intended solely for the use of the individual or entity to whom it is addressed and others authorised to receive it. If you are not the intended recipient you should not disclose, copy, distribute or take action on the contents of this information, except for the purpose of delivery to the addressee. Any unauthorised use is strictly prohibited and may be unlawful. If you have received this email in error please notify the sender by email immediately and delete the message from your computer. ECOTEC Research Consulting Limited Registered in England No. 1650169 Registered Office: Priestley House, 28-34 Albert Street, Birmingham, B4 7UD, UK Tel: +44 (0)121 616 3600 http://www.ecotec.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Footer Positioning Problem in Mozilla Firefox and Opera
Many thanks, Owen, With your suggestions, all three problems fixed. You'll see the results at http://www.bluemountainsgardener.info/index-try.htm Your prompt response will help me sleep tonight (in Australia). Cheers, John Penlington - Original Message - From: Owen Gregory [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Thursday, July 22, 2004 9:21 PM Subject: RE: [WSG] Footer Positioning Problem in Mozilla Firefox and Opera John Penlington wrote: The text line in the footer lies just below the black footer, not within it. There's a positioning problem with the horizontal menu in the header. I'd like to know a way of reducing the gap below the headers in the infoboxes On the #footer p, try margin : 0; On the #topnav ul try padding-left : 0; However, this may affect the layout in other browsers. Firefox (and Mozilla generally) uses padding to layout lists On the #walks p etc, you could try a negative margin-top, though this will no doubt mess up IE. Hope that's a start. Owen -Original Message- From: John Penlington [mailto:[EMAIL PROTECTED] Sent: 22 July 2004 11:53 To: [EMAIL PROTECTED] Subject: [WSG] Footer Positioning Problem in Mozilla Firefox and Opera I'm rebuilding a gardening magazine site to web standards and assessibility - and I've almost got it working as I wish ... HTML is at: http://www.bluemountainsgardener.info/index-try.htm CSS is at: http://www.bluemountainsgardener.info/style-accessible.css No skip nav yet, but the layout doesn't break in IE6 at largest text size. So I'm progressing !! It works exactly as I wish in IE6 ... problems lie with Opera 7.23 and Mozilla Firefox 0.8 as follow The text line in the footer lies just below the black footer, not within it. I cannot work out why. In Mozilla Firefox, there's a positioning problem with the horizontal menu in the header. It's meant to line up with everything on the left hand side of the page, but it's indented in Firefox for some reason that I cannot fathom. It's fine in IE6 and Opera 7.23 !! Finally, in the right column, I'd like to know a way of reducing the gap below the headers in the infoboxes - one that will display the same *in all browsers* !! I'd really appreciate any help you can offer. This Discussion List is like life-support to me - thanks again, folks. John Penlington * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * __ This email has been scanned by the MessageLabs Email Security System. For more information please visit http://www.messagelabs.com/email __ This email has been scanned for all viruses by the MessageLabs SkyScan service. For more information on a proactive anti-virus service working around the clock, around the globe, visit http://www.messagelabs.com CONFIDENTIALITY NOTICE The information contained in this communication is confidential and may be legally privileged. It is intended solely for the use of the individual or entity to whom it is addressed and others authorised to receive it. If you are not the intended recipient you should not disclose, copy, distribute or take action on the contents of this information, except for the purpose of delivery to the addressee. Any unauthorised use is strictly prohibited and may be unlawful. If you have received this email in error please notify the sender by email immediately and delete the message from your computer. ECOTEC Research Consulting Limited Registered in England No. 1650169 Registered Office: Priestley House, 28-34 Albert Street, Birmingham, B4 7UD, UK Tel: +44 (0)121 616 3600 http://www.ecotec.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Titles Acronyms Abbr etc
On 21/07/2004, at 4:10 PM, Bert Doorn wrote: G'day Looks distinctly like a case of totally unnecessary to me but we have a difference of opinion in the office... Even if it was written as VDS, it would be an abbr(eviation): abbr title=Vent Door SystemsVDS/abbr Actually, VDS is an acronym of Vent Door Systems, not an abbreviation. --- Justin French http://indent.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Titles Acronyms Abbr etc
Gah...not this discussion again... Acronyms are a subset of abbreviations. All acronyms are abbreviations, but not all abbreviations are acronyms. Now, once it comes to defining what an acronym is, there's cultural/regional differences as well: some argue that acronyms need to be pronounceable, others say that any initialism is also an acronym (where again others argue that initialisms are only a subset of acronyms)... The fact that acronyms are on their way out in xhtml2.0, coupled with the fact that it's futile - in my mind anyway - to argue vehemently over semantics down to this level, considering that HTML itself has such a kludgey, ambiguous and incomplete set of tags anyway (consider DL for instance), would suggest to just forget about it. One man's acronym is another man's abbreviation (but not the other way around). Every acronym could also be marked up as an abbreviation, without losing too much semantic weight... (but yes, of course, IE's lack of real support for abbr is a problem in this case) Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk -Original Message- From: Justin French Sent: 22 July 2004 14:09 To: [EMAIL PROTECTED] Subject: Re: [WSG] Titles Acronyms Abbr etc On 21/07/2004, at 4:10 PM, Bert Doorn wrote: G'day Looks distinctly like a case of totally unnecessary to me but we have a difference of opinion in the office... Even if it was written as VDS, it would be an abbr(eviation): abbr title=Vent Door SystemsVDS/abbr Actually, VDS is an acronym of Vent Door Systems, not an abbreviation. --- Justin French http://indent.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
[WSG] semantic way to mark up form help?
Hi all, I'm trying to decide on a nice semantic way to mark-up a short (usually only a few words) block of help text in the context of a web form. I currently use a label to label the input, and a paragraph or div to mark-up the help text: form... div class='formitem' label for='f-title'.../label input id='f-title' type='text'... / p class='help'This is the title of your news post, which does not accept HTML input/p /div /form But logic tells me that in the above example, the p help text is not associated with the form widget or the label at all. The only way I can see this being done is by including the help text in the label, but this will restrict me in terms of layouts. Honestly, the most logical way I can see to do this is to have them in three cells of a table row, since at least they'll be associated in a row. fieldset's would also be nice, but they're intended for groupings of form elements, and using them for each text input seems like a load of bloat. I've been looking at many examples of correct, semantic forms, but can't see anything like this out there. TIA --- Justin French http://indent.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] semantic way to mark up form help?
Justin wrote: I'm trying to decide on a nice semantic way to mark-up a short (usually only a few words) block of help text in the context of a web form. The label element can contain inline elements (like input /). So you can wrap it around the input in your example and perhaps remove the p from the help text to include it as well: form... div class=formitem label for=f-titleLabel: input id=f-title type=text... / Helpful text goes here /label /div /form This way, the help text is associated with the relevant form control. Owen -Original Message- From: Justin French [mailto:[EMAIL PROTECTED] Sent: 22 July 2004 15:25 To: [EMAIL PROTECTED] Subject: [WSG] semantic way to mark up form help? Hi all, I'm trying to decide on a nice semantic way to mark-up a short (usually only a few words) block of help text in the context of a web form. I currently use a label to label the input, and a paragraph or div to mark-up the help text: form... div class='formitem' label for='f-title'.../label input id='f-title' type='text'... / p class='help'This is the title of your news post, which does not accept HTML input/p /div /form But logic tells me that in the above example, the p help text is not associated with the form widget or the label at all. The only way I can see this being done is by including the help text in the label, but this will restrict me in terms of layouts. Honestly, the most logical way I can see to do this is to have them in three cells of a table row, since at least they'll be associated in a row. fieldset's would also be nice, but they're intended for groupings of form elements, and using them for each text input seems like a load of bloat. I've been looking at many examples of correct, semantic forms, but can't see anything like this out there. TIA --- Justin French http://indent.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * __ This email has been scanned by the MessageLabs Email Security System. For more information please visit http://www.messagelabs.com/email __ This email has been scanned for all viruses by the MessageLabs SkyScan service. For more information on a proactive anti-virus service working around the clock, around the globe, visit http://www.messagelabs.com CONFIDENTIALITY NOTICE The information contained in this communication is confidential and may be legally privileged. It is intended solely for the use of the individual or entity to whom it is addressed and others authorised to receive it. If you are not the intended recipient you should not disclose, copy, distribute or take action on the contents of this information, except for the purpose of delivery to the addressee. Any unauthorised use is strictly prohibited and may be unlawful. If you have received this email in error please notify the sender by email immediately and delete the message from your computer. ECOTEC Research Consulting Limited Registered in England No. 1650169 Registered Office: Priestley House, 28-34 Albert Street, Birmingham, B4 7UD, UK Tel: +44 (0)121 616 3600 http://www.ecotec.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] semantic way to mark up form help?
Hi Justin I asked about this a couple weeks ago. You can put a title on the label. label for=arrivaldate title=Enter the day you plan on arriving to our lovely hotelArrival datelabel When the person puts their cursor over the label, they will get a box that pops up with your label. It's valid and is much more accessible than my other alternative of hidden divs that get shown with the toggle javascript. As one person mentioned, you can put a class on the label to visually identify the presence of a title tag, for instance a dotted bottom border or a simple underline. Ted -Original Message- From: Justin French [mailto:[EMAIL PROTECTED] Sent: Thursday, July 22, 2004 7:25 AM To: [EMAIL PROTECTED] Subject: [WSG] semantic way to mark up form help? Hi all, I'm trying to decide on a nice semantic way to mark-up a short (usually only a few words) block of help text in the context of a web form. I currently use a label to label the input, and a paragraph or div to mark-up the help text: form... div class='formitem' label for='f-title'.../label input id='f-title' type='text'... / p class='help'This is the title of your news post, which does not accept HTML input/p /div /form But logic tells me that in the above example, the p help text is not associated with the form widget or the label at all. The only way I can see this being done is by including the help text in the label, but this will restrict me in terms of layouts. Honestly, the most logical way I can see to do this is to have them in three cells of a table row, since at least they'll be associated in a row. fieldset's would also be nice, but they're intended for groupings of form elements, and using them for each text input seems like a load of bloat. I've been looking at many examples of correct, semantic forms, but can't see anything like this out there. TIA --- Justin French http://indent.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] semantic way to mark up form help?
Maybe a slight stretch, but how about wrapping these related elements (label, input, etc) up in their own fieldset, and using the legend for that text (thus associating it with the (input and label within). form... fieldset legendThis is the title of your news post (does not accept HTML input)/legend label../label input/ /fieldset /form Other suggestion: use a title on the input input... title=This is the title of your news post (does not accept HTML input) / To be honest, I wouldn't get too overly worried about getting the semantics exactly right in this case, mainly because HTML is a flawed language with very few general (and a few overly specific) elements with defined semantic meaning and relationship. Anything that falls outside of that is always going to be a rough approximation - trying to squeeze the requirement of semantics encountered in the real-world into the small, restricitve slots provided by the existing spec. (then again, you could create your own DTD that adds your own nice custom explanation element to the current set ;) ) Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk -Original Message- From: Justin French Sent: 22 July 2004 15:25 To: [EMAIL PROTECTED] Subject: [WSG] semantic way to mark up form help? Hi all, I'm trying to decide on a nice semantic way to mark-up a short (usually only a few words) block of help text in the context of a web form. I currently use a label to label the input, and a paragraph or div to mark-up the help text: form... div class='formitem' label for='f-title'.../label input id='f-title' type='text'... / p class='help'This is the title of your news post, which does not accept HTML input/p /div /form But logic tells me that in the above example, the p help text is not associated with the form widget or the label at all. The only way I can see this being done is by including the help text in the label, but this will restrict me in terms of layouts. Honestly, the most logical way I can see to do this is to have them in three cells of a table row, since at least they'll be associated in a row. fieldset's would also be nice, but they're intended for groupings of form elements, and using them for each text input seems like a load of bloat. I've been looking at many examples of correct, semantic forms, but can't see anything like this out there. TIA --- Justin French http://indent.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] semantic way to mark up form help?
Both Patrick and Ted made good suggestions. However, I'd prefer to see the page in question before making Patrick's suggestion. If the form is like some of mine, that simply won't work. The title option always works, but the user must know the title is there before it can help them. Your best option is to use the Value attribute of the textbox or input field. This allows you to enter information that will help the user fill out the form correctly. Using ECMAscript you can empty the text once the user begins to type. That would require using OnKeyDown. OnFocus may not give the person time enough to read the Value information if they tab to the field below the viewable portion of the form (ie, below the fold). I hope this helps. Lee Roberts http://www.roserockdesign.com http://www.applepiecart.com -Original Message- From: Patrick Lauke [mailto:[EMAIL PROTECTED] Sent: Thursday, July 22, 2004 10:15 AM To: [EMAIL PROTECTED] Subject: RE: [WSG] semantic way to mark up form help? Maybe a slight stretch, but how about wrapping these related elements (label, input, etc) up in their own fieldset, and using the legend for that text (thus associating it with the (input and label within). form... fieldset legendThis is the title of your news post (does not accept HTML input)/legend label../label input/ /fieldset /form Other suggestion: use a title on the input input... title=This is the title of your news post (does not accept HTML input) / To be honest, I wouldn't get too overly worried about getting the semantics exactly right in this case, mainly because HTML is a flawed language with very few general (and a few overly specific) elements with defined semantic meaning and relationship. Anything that falls outside of that is always going to be a rough approximation - trying to squeeze the requirement of semantics encountered in the real-world into the small, restricitve slots provided by the existing spec. (then again, you could create your own DTD that adds your own nice custom explanation element to the current set ;) ) Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk -Original Message- From: Justin French Sent: 22 July 2004 15:25 To: [EMAIL PROTECTED] Subject: [WSG] semantic way to mark up form help? Hi all, I'm trying to decide on a nice semantic way to mark-up a short (usually only a few words) block of help text in the context of a web form. I currently use a label to label the input, and a paragraph or div to mark-up the help text: form... div class='formitem' label for='f-title'.../label input id='f-title' type='text'... / p class='help'This is the title of your news post, which does not accept HTML input/p /div /form But logic tells me that in the above example, the p help text is not associated with the form widget or the label at all. The only way I can see this being done is by including the help text in the label, but this will restrict me in terms of layouts. Honestly, the most logical way I can see to do this is to have them in three cells of a table row, since at least they'll be associated in a row. fieldset's would also be nice, but they're intended for groupings of form elements, and using them for each text input seems like a load of bloat. I've been looking at many examples of correct, semantic forms, but can't see anything like this out there. TIA --- Justin French http://indent.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
[WSG] [Fwd: New XHTML 2.0 draft, HTML/XHTML FAQ, XML Events for HTML Authors]
XHTML 2 draft is out. see below. -- Masayasu Ishikawa wrote: Hello, After long editorial work, finally the sixth public Working Draft of XHTML 2.0 is now available at: http://www.w3.org/TR/2004/WD-xhtml2-20040722 The HTML Working Group thanks the great many people on this list for lots of thoughtful feedback. We are still actively working on resolving remaining issues, and appreciate your feedback. Public discussion may take place here, but if you have an issue, please make sure to send your issue to [EMAIL PROTECTED] so that your issue can be properly regisitered as an issue. The HTML Working Group also published two documents: HTML and XHTML Frequently Answered Questions http://www.w3.org/MarkUp/2004/xhtml-faq This is a non-exhaustive list of questions and answers on HTML and XHTML. Comments and suggestions should be sent to [EMAIL PROTECTED] XML Events for HTML Authors http://www.w3.org/MarkUp/2004/xmlevents-for-html-authors This document is a quick introduction to XML Events for HTML authors. XML Events is a method of catching events in markup languages that offers several advantages over the HTML onclick style of event handling. Thanks, * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] semantic way to mark up form help?
There are a number of things that need to be considered: 1. title attribute content is not accessible to users who cannot use a mouse (as the tool tip only appears on mouseover not onfocus) 2. the title attribute content is only available to a subset of screen reading software (latest versions of JAWS) users and only if it is on certain elements (most inputs and links). It is not recognised on the label element. When a title is placed on the text input it overrides the assoicated label text (for JAWS users at least). 3. an important consideration (for screen reader users ) is the placement of the instructions in the reading order. It is strongly recommended the instructions come before the input they apply to even though they may be visually displayed after the input, so that screen reader users get this information before they encounter the input. Example code for 3: div div style=float:rightThis is the title of your news post, which does not accept HTML input/div div label for=f-title.../label input id=f-title type=text... //div /div with regards Steven Faulkner Web Accessibility Consultant National Information Library Service (NILS) 454 Glenferrie Road Kooyong Victoria 3144 Phone: (613) 9864 9281 Fax: (613) 9864 9210 Email: [EMAIL PROTECTED] National Information Library Service A subsidiary of RBS.RVIB.VAF Ltd. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] semantic way to mark up form help?
Hi Ted, all Title attributes don't have to pop up in a tooltip, that's up to the user agent. I'd suggest you do something like this... label for=arrivaldateYour arrival date at Hotel WSGlabel Also, user of fieldsets allow to you to control the appearance of different parts of a form: fieldset class=shippingdetails ../fieldset fieldset class=personaldetails ../fieldset fieldset class=orderdetails ../fieldset HTH James Ted Drake wrote: Hi Justin I asked about this a couple weeks ago. You can put a title on the label. label for=arrivaldate title=Enter the day you plan on arriving to our lovely hotelArrival datelabel When the person puts their cursor over the label, they will get a box that pops up with your label. It's valid and is much more accessible than my other alternative of hidden divs that get shown with the toggle javascript. As one person mentioned, you can put a class on the label to visually identify the presence of a title tag, for instance a dotted bottom border or a simple underline. Ted -Original Message- From: Justin French [mailto:[EMAIL PROTECTED] Sent: Thursday, July 22, 2004 7:25 AM To: [EMAIL PROTECTED] Subject: [WSG] semantic way to mark up form help? Hi all, I'm trying to decide on a nice semantic way to mark-up a short (usually only a few words) block of help text in the context of a web form. I currently use a label to label the input, and a paragraph or div to mark-up the help text: form... div class='formitem' label for='f-title'.../label input id='f-title' type='text'... / p class='help'This is the title of your news post, which does not accept HTML input/p /div /form But logic tells me that in the above example, the p help text is not associated with the form widget or the label at all. The only way I can see this being done is by including the help text in the label, but this will restrict me in terms of layouts. Honestly, the most logical way I can see to do this is to have them in three cells of a table row, since at least they'll be associated in a row. fieldset's would also be nice, but they're intended for groupings of form elements, and using them for each text input seems like a load of bloat. I've been looking at many examples of correct, semantic forms, but can't see anything like this out there. TIA --- Justin French http://indent.com.a * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
[WSG] Wierd spacing issue after floats
Another question for all you clever folk in Standardsland, and I can't help but feel that the answer will probably be something really simple. I can't find it though. If you go to the link below, you will see that there is an odd space between the rows of tabs and the start of the content. This happens on a number of pages and I've noticed that the gap always extends just to the bottom of the right-hand menu. So I figure it has to be something to do with the menu, possibly about the floating, but I can't seem to find a way to make that space go away. Any suggestions? Please? You can see the problem at: http://216.119.123.23/index.cfm? fuseaction=catalogue.ListProductsID=2category=Subcategory Cheers, Seona. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] semantic way to mark up form help?
Damn, Just when I thought I had a cool solution for adding titles to the labels Steven comes along and shoots a hole the size of Africa and Taiwan in my plan. I need some coffee... Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Thursday, July 22, 2004 4:13 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] semantic way to mark up form help? There are a number of things that need to be considered: 1. title attribute content is not accessible to users who cannot use a mouse (as the tool tip only appears on mouseover not onfocus) 2. the title attribute content is only available to a subset of screen reading software (latest versions of JAWS) users and only if it is on certain elements (most inputs and links). It is not recognised on the label element. When a title is placed on the text input it overrides the assoicated label text (for JAWS users at least). 3. an important consideration (for screen reader users ) is the placement of the instructions in the reading order. It is strongly recommended the instructions come before the input they apply to even though they may be visually displayed after the input, so that screen reader users get this information before they encounter the input. Example code for 3: div div style=float:rightThis is the title of your news post, which does not accept HTML input/div div label for=f-title.../label input id=f-title type=text... //div /div with regards Steven Faulkner Web Accessibility Consultant National Information Library Service (NILS) 454 Glenferrie Road Kooyong Victoria 3144 Phone: (613) 9864 9281 Fax: (613) 9864 9210 Email: [EMAIL PROTECTED] National Information Library Service A subsidiary of RBS.RVIB.VAF Ltd. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] [Fwd: New XHTML 2.0 draft, HTML/XHTML FAQ, XML Events for HTML Authors]
Brian Cummiskey wrote: XHTML 2 draft is out. -- Sixth public Working Draft of XHTML 2.0 is now available at: http://www.w3.org/TR/2004/WD-xhtml2-20040722 In many ways it is as if they went back to what HTML was meant to be, and improved on that, rather than just the next version. Some useful changes (href on everything, lists and tables in p's, di). Some things will take getting used to (l instead of br, on img). It also looks like we won't need as many div's elements like the section and h, or di give the needed hooks in a more natural, semantic way. The worst part of all this is it'll be years before we'll be able to use the new toys in any meaningful way. Here's to waiting for 2010. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] [Fwd: New XHTML 2.0 draft, HTML/XHTML FAQ, XML Events for HTML Authors]
- Original Message - From: Mordechai Peller [...] The worst part of all this is it'll be years before we'll be able to use the new toys in any meaningful way. You could already use them server-side, then transform them to xhtml1.0 or 1.1 before serving them to the client, but yes...apart from the benefits to those maintaining the files, there's not much gain from that. So yes, we wait :) Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively. [latin : re-, re- + dux, leader; see duke.] http://www.splintered.co.uk | http://www.photographia.co.uk | http://redux.deviantart.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] [Fwd: New XHTML 2.0 draft, HTML/XHTML FAQ, XML Events for HTML Authors]
- Original Message - From: Mordechai Peller [...] While transforming from XHTML 1.0 or 1.1 is a trivial task, from XHTML 2 to even 1.1 is not so. In some cases there's no equivalent (di), in others there's more than one choice depending on the CSS (l = span, br, li, p). Yes, I'm aware of that. Maybe I should have expanded a bit more: you can use the nicer, more structured semantics of xhtml2 for the documents you create (and even send them to more modern browsers which will be able to cope with them directly), and then use xslt to create the more traditional (read: ad-hoc, slightly non-semantic) chunks of code in xhtml1.x which rely on adding those extra hooks via divs and spans. You will still have to get your hands down and dirty by crafting some rather convoluted transformations, and the css to then style the outcome. As I said, really a futile exercise for the most part, but it would enable you, the author, to leverage the more structurally accurate markup for the purpose of document creation/maintenance. Or something along those lines anyway (on the other hand, since it's just about 2am here, it may just be that I need some sleep, or another hobby) Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively. [latin : re-, re- + dux, leader; see duke.] http://www.splintered.co.uk | http://www.photographia.co.uk | http://redux.deviantart.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] semantic way to mark up form help?
Thanks to everyone for their input, especially Steven insight into the world of screen readers. My summation of all this is that the elements need to appear in this order: Label Text Extended help Input or widgets I really like the idea of wrapping the label tag around the whole lot, so that everything is associated with that single form element. It would also remove the need for div class='formitem', a wrapper I used around each form element (label input), since I can style the label with display:block; label for='f-title' News Postbr / This is the title of your news post, which does not accept HTML inputbr / input id='f-title' type='text' ... / /label Although I'd like more control over the elements involved, so maybe something like (similar to Steven's example): label for='f-title' h3News Post Title/h3 p class='help'This is the title of .../p input id='f-title' type='text' ... / /label ... but maybe that's an abuse of H3 and P, and I should stick with generic DIVs or SPANS? Justin French On 23/07/2004, at 12:24 AM, Justin French wrote: Hi all, I'm trying to decide on a nice semantic way to mark-up a short (usually only a few words) block of help text in the context of a web form. I currently use a label to label the input, and a paragraph or div to mark-up the help text: form... div class='formitem' label for='f-title'.../label input id='f-title' type='text'... / p class='help'This is the title of your news post, which does not accept HTML input/p /div /form But logic tells me that in the above example, the p help text is not associated with the form widget or the label at all. The only way I can see this being done is by including the help text in the label, but this will restrict me in terms of layouts. Honestly, the most logical way I can see to do this is to have them in three cells of a table row, since at least they'll be associated in a row. fieldset's would also be nice, but they're intended for groupings of form elements, and using them for each text input seems like a load of bloat. I've been looking at many examples of correct, semantic forms, but can't see anything like this out there. TIA --- Justin French http://indent.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * --- Justin French http://indent.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
[WSG] css and cms (elegant product sought)
a couple of questions, somewhat off topic Iwould like to capture an image of the the whole html pagei.e. what is not visible in the scroll region,so the image would capture something likean "800 x 3000" region to be printed in abrochure. I am lookingfor an elegantCMS tool which will still supports CSS and which will allow me to create a5 or7 page "user editable" website. Mamboserver and similariCMS productsare way to big for the clients I am currently working with. Regards Roly
Re: [WSG] css and cms (elegant product sought)
I would like to capture an image of the the whole html page i.e. what is not visible in the scroll region, so the image would capture something like an 800 x 3000 region to be printed in a brochure. SnagIt is very cool and worth the $40 http://www.techsmith.com/products/snagit/default.asp Mike * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] css and cms (elegant product sought)
Xstandard is worth a look for using with browser based CMS http://xstandard.com/default.asp with regards Steven Faulkner Web Accessibility Consultant National Information Library Service (NILS) 454 Glenferrie Road Kooyong Victoria 3144 Phone: (613) 9864 9281 Fax: (613) 9864 9210 Email: [EMAIL PROTECTED] National Information Library Service A subsidiary of RBS.RVIB.VAF Ltd. Roly [EMAIL PROTECTED]To: [EMAIL PROTECTED] .co.uk cc: Sent by: Subject: [WSG] css and cms (elegant product sought) [EMAIL PROTECTED] group.org 23/07/2004 01:44 PM Please respond to wsg a couple of questions, somewhat off topic I would like to capture an image of the the whole html page i.e. what is not visible in the scroll region, so the image would capture something like an 800 x 3000 region to be printed in a brochure. I am looking for an elegant CMS tool which will still supports CSS and which will allow me to create a 5 or 7 page user editable website. Mamboserver and similari CMS products are way to big for the clients I am currently working with. Regards Roly * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] css and cms (elegant product sought)
On Friday, Jul 23, 2004, at 13:44 Australia/Sydney, Roly wrote: a couple of questions, somewhat off topic I would like to capture an image of the the whole html page i.e. what is not visible in the scroll region, so the image would capture something like an 800 x 3000 region to be printed in a brochure. Take screenshots of each visible section as you scroll down, and stitch them in Photoshop. I am looking for an elegant CMS tool which will still supports CSS and which will allow me to create a 5 or 7 page user editable website. Mamboserver and similari CMS products are way to big for the clients I am currently working with. Macromedia's Contribute is pretty good, for a reasonable price - if you use DW. Regards Roly hth Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] semantic way to mark up form help?
First Labels should not wrap the input. The elements within the Label tag become the label. By wrapping the input with the Label you are stating the input is part of its own Label. That's wrong. Using heading tags for font declarations is poor form and fails to meet the standards. DIV is a layer. Your better choice is P, unless you are splitting the horizontal into two or more sections which would then require either a table or a few inline DIVS. Perhaps you can show us the page you have question with? Making blind assumptions leads to disaster. I hope this helps. Lee Roberts http://www.roserockdesign.com http://www.applepiecart.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *