Re: [WSG] Form best practice
On Mon, Apr 21, 2008 at 4:36 AM, Jens-Uwe Korff [EMAIL PROTECTED] wrote: we are currently evaluating how we code up forms. In the process I'd like to review form best practices. Please send me any bookmarks you might have of what you consider top of class. I favour this approach: http://www.sitepoint.com/article/fancy-form-design-css form fieldset ol li label/input I've found that this approach gives you a great deal of flexibility in how you can style the form. -- - Matthew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Form best practice
Hi Jens-Uwe, Apologies for the late reply - I'm in the middle of an inter-continental move from Johannesburg to Oslo. If I can help, please take a look at my article on dev.opera.com - Accessible Context Sensitive Help with Unobtrusive DOM Scripting: http://dev.opera.com/articles/view/accessible-context-sensitive-help-with-u/ This gives you my configuration of the HTML structure for a web form, along with the JavaScript needed to reveal the embedded context sensitive help for each form field. Also, you can download a complete project package, including HTML, CSS, images, scripts, etc., from my blog site: http://frank.helpware.net Also, in the body of the article, you'll see a hyperlink to Gez Lemon's website (Juicy Studio) where another type of form layout and embedded help is detailed. Hope this helps, Kind regards, Frank M. Palinkas Opera Software On Mon, Apr 21, 2008 at 5:36 AM, Jens-Uwe Korff [EMAIL PROTECTED] wrote: Hi all, we are currently evaluating how we code up forms. In the process I'd like to review form best practices. I guess you've come across a good form with respect to either design, functionality, semantics or interaction. Please send me any bookmarks you might have of what you consider top of class. Thank you for your help! Cheers, Jens The information contained in this e-mail message and any accompanying files is or may be confidential. If you are not the intended recipient, any use, dissemination, reliance, forwarding, printing or copying of this e-mail or any attached files is unauthorised. This e-mail is subject to copyright. No part of it should be reproduced, adapted or communicated without the written consent of the copyright owner. If you have received this e-mail in error please advise the sender immediately by return e-mail or telephone and delete all copies. Fairfax does not guarantee the accuracy or completeness of any information contained in this e-mail or attached files. Internet communications are not secure, therefore Fairfax does not accept legal responsibility for the contents of this message or attached files. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Frank M. Palinkas *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
R: [WSG] Form best practice
I usual use the following kind of approach: form fieldset div label../label input / /div div label../label input / /div /fieldset /form I think that as for ol li it can guarantee a good flexibility. Cheers -- Diego La Monica (IWA/HWG) http://diegolamonica.info http://jastegg.it _ Da: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Per conto di Matthew Pennell Inviato: lunedì 21 aprile 2008 8.16 A: wsg@webstandardsgroup.org Oggetto: Re: [WSG] Form best practice On Mon, Apr 21, 2008 at 4:36 AM, Jens-Uwe Korff [EMAIL PROTECTED] wrote: we are currently evaluating how we code up forms. In the process I'd like to review form best practices. Please send me any bookmarks you might have of what you consider top of class. I favour this approach: http://www.sitepoint.com/article/fancy-form-design-css form fieldset ol li label/input I've found that this approach gives you a great deal of flexibility in how you can style the form. -- - Matthew *** 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] Form best practice
Hello I've bookmarked heaps more bad forms than good (says something, really) but can heartily recommend this one (which I designed): http://www.originenergy.com.au/signup/?_qf_p2_display=true The phrase how we code up forms is pretty broad, but hopefully some of these will be of use: http://formulate.com.au/articles/what-makes-a-good-form/ http://formulate.com.au/articles/layers-of-a-form/ http://www.informit.com/articles/article.aspx?p=29892 http://css-tricks.com/tips-for-creating-great-web-forms/ http://jeffhowden.com/code/css/forms/ http://www.usability.com.au/resources/forms.cfm http://www.webcredible.co.uk/user-friendly-resources/web- accessibility/accessible-forms-1.shtml http://www.sitepoint.com/article/simple-tricks-usable-forms http://www.webaim.org/techniques/forms/controls.php http://www.alistapart.com/articles/prettyaccessibleforms http://www.lukew.com/resources/articles/web_forms.html And here's some link collections on the topic: http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern- solutions/ http://www.deyalexander.com.au/resources/uxd/form-design.html I have *loads* more links to different sorts of forms and forms best practice guidelines (I'm a full-time forms designer). If you can be more specific about what you need, I'm sure I can help. And if you need some more substantial assistance, e.g. review your guidelines, I can provide that too! Cheers, Jessica Enders Director Formulate Information Design http://formulate.com.au Phone: (02) 6116 8765 Fax: (02) 8456 5916 PO Box 5108 Braddon ACT 2612 On 21/04/2008, at 1:36 PM, Jens-Uwe Korff wrote: Hi all, we are currently evaluating how we code up forms. In the process I'd like to review form best practices. I guess you've come across a good form with respect to either design, functionality, semantics or interaction. Please send me any bookmarks you might have of what you consider top of class. Thank you for your help! Cheers, Jens The information contained in this e-mail message and any accompanying files is or may be confidential. If you are not the intended recipient, any use, dissemination, reliance, forwarding, printing or copying of this e-mail or any attached files is unauthorised. This e-mail is subject to copyright. No part of it should be reproduced, adapted or communicated without the written consent of the copyright owner. If you have received this e-mail in error please advise the sender immediately by return e-mail or telephone and delete all copies. Fairfax does not guarantee the accuracy or completeness of any information contained in this e- mail or attached files. Internet communications are not secure, therefore Fairfax does not accept legal responsibility for the contents of this message or attached files. *** 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] ***
[WSG] strechable round rect and center align
hi, I want a *rounded strechable rectangle* inside another rectangle which is 500px width. the *rounded strechable rectangle* should align center . sample link: http://www.geocities.com/navi_menon/demo.gif pls help -- navii - thanks and regards Naveen Bhaskar Menon *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] strechable round rect and center align
!-- outer div centered on the page --
div style=width: 500px; margin: 0 auto
!-- inner div centered within the outer div --
div style=margin: 0 auto; padding: 0 10px; background:
url('../path/to/left_side_image.png') no-repeat left;
span style=background: url('../path/to/right_side_image.png')
no-repeat right;Global Links/span
/div
/div
left_side_image.png is just the corners and the left border.
right_side_image.png is the right border, the corners on the right and way
wider top and bottom borders so it can stretch.
Haven't tested it so you might need to play a bit with padding here or
there. :)
On Mon, Apr 21, 2008 at 10:20 AM, Naveen Bhaskar [EMAIL PROTECTED]
wrote:
hi,
I want a *rounded strechable rectangle* inside another rectangle which is
500px width. the *rounded strechable rectangle* should align center .
sample link: http://www.geocities.com/navi_menon/demo.gif
pls help
--
navii
-
thanks and regards
Naveen Bhaskar Menon
***
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] strechable round rect and center align
On 21-Apr-08, at 1:50 PM, Naveen Bhaskar wrote: I want a rounded strechable rectangle inside another rectangle which is 500px width. the rounded strechable rectangle should align center . Naveen, This seems to be a good way to build rounded corner boxes [1]. Aligning elements to the center is usually a matter of setting the left/right margins to auto, and fixing it for some versions of IE with text-align: center. The wiki is your friend [2]. Best, - Rahul. [1] http://www.456bereastreet.com/archive/200406/css_teaser_box_revisited/ [2] http://css-discuss.incutio.com/?page=CenteringBlockElement *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG]
Hi Guys, I have a question, hope you can help me out... Anyone know about a tool that automate the process of testing accessibility? any new good tool? thanks a lot, Anat This email and any attachments may contain privileged and confidential information and are intended for the named addressee only. If you have received this e-mail in error, please notify the sender and delete this e-mail immediately. Any confidentiality, privilege or copyright is not waived or lost because this e-mail has been sent to you in error. It is your responsibility to check this e-mail and any attachments for viruses. No warranty is made that this material is free from computer virus or any other defect or error. Any loss/damage incurred by using this material is not the sender's responsibility. The sender's entire liability will be limited to resupplying the material. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] strechable round rect and center align
Hi Naveen, A List Apart have a very good article on rounded corners at: http://www.alistapart.com/articles/customcorners/ And, as Rahul mentioned, setting left and right margins to auto generally will centre a box for you. Kind regards, James Naveen Bhaskar wrote: hi, I want a */rounded strechable rectangle/* inside another rectangle which is 500px width. the *rounded strechable rectangle* should align center . sample link: http://www.geocities.com/navi_menon/demo.gif pls help -- navii - thanks and regards Naveen Bhaskar Menon *** 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] ***
[WSG] :: Footer not resting at bottom of page ::
Hi, I have problem with the footer of my website: www.awayback.com it is not staying at bottom of the page. Things are fine in case of low resolution i.e. 1024x768 but in high resolution screens (1200x1024) footer is hanging mid way and not at bottom of the page. Thanks in Advance. Kind Regards Amrinder Freelance Web Designer www.awayback.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] strechable round rect and center align
thanks guys... I got the solution from here http://css-discuss.incutio.com/?page=CenteringBlockElement regards naveen On Tue, Apr 22, 2008 at 5:36 AM, James Sinclair [EMAIL PROTECTED] wrote: Hi Naveen, A List Apart have a very good article on rounded corners at: http://www.alistapart.com/articles/customcorners/ And, as Rahul mentioned, setting left and right margins to auto generally will centre a box for you. Kind regards, James Naveen Bhaskar wrote: hi, I want a *rounded strechable rectangle* inside another rectangle which is 500px width. the *rounded strechable rectangle* should align center . sample link: http://www.geocities.com/navi_menon/demo.gif pls help -- navii - thanks and regards Naveen Bhaskar Menon *** 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] *** -- navii - thanks and regards Naveen Bhaskar Menon *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] :: Footer not resting at bottom of page ::
I have problem with the footer of my website: www.awayback.com it is not
staying at bottom of the page. Things are fine in case of low
resolution i.e. 1024x768 but in high resolution screens (1200x1024)
footer is hanging mid way and not at bottom of the page.
Hi Amrider,
I would suggest adding another div id=wrapper around div id=masthead
... div id=footer with a min-height of 100%:
div#wrapper {
min-height: 100%;
}
This should keep the footer at the bottom of the page on short pages.
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: [EMAIL PROTECTED]
***
BEGIN:VCARD
VERSION:2.1
N:Gelotte;Kepler;;Mr.
FN:Kepler Gelotte ([EMAIL PROTECTED])
ORG:Neighbor Webmaster
TITLE:Web Designer
TEL;WORK;VOICE:(732) 302-0904
TEL;WORK;FAX:(732) 302-0904
ADR;WORK:;;156 Normandy Dr;Piscataway;NJ;08854;United States of America
LABEL;WORK;ENCODING=QUOTED-PRINTABLE:156 Normandy Dr=0D=0APiscataway, NJ 08854=0D=0AUnited States of America
URL;WORK:http://www.neighborwebmaster.com
EMAIL;PREF;INTERNET:[EMAIL PROTECTED]
REV:20070415T052107Z
END:VCARD
