Cheers James, I could not express my issues in the wording you used, but thats exactly what I wanted to say.
Any comments on this? Is what James suggested the way to go? Taco Fleur Blog: http://www.tacofleur.com/index/blog/ Tell me and I will forget Show me and I will remember Teach me and I will learn -----Original Message----- From: James Ellis [mailto:[EMAIL PROTECTED] Sent: Saturday, 17 January 2004 8:39 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Table or CSS? Hi But then we have tables used as a layout device, and a form isn't associated tabular data.. it's a user interface. What if we wanted to present the form in a different way using CSS, for instance placing the label to the right or above the input field? This is something that can't be done with table cells without changing the underlying markup. It's quite ok to use a block containing the div, and having something like this in HTML4. You could even then float the formfield left and have a form in one long line. <div class="formfield"> <label accesskey="a" for="email">Email address</label> <input class="textfield" name="email" type="text" id="email" value="" /> </div> <div class="formfield"> <label accesskey="p" for="password">Email password</label> <input class="textfield" name="password" type="password" id="password" /> </div> Notes: http://www.htmlhelp.com/reference/html40/block/div.html http://www.htmlhelp.com/reference/html40/forms/label.html This allows me to give a consistent form interface to the user as the formfield, texfield and label are all fixed widths. My only query would be is it wrong to force a label into being a block? I did the CSS before I got my head around descendant selectors... /* could use .formfield label */ LABEL { padding : 2px; margin : 3px 1px 3px 1px; border : none; display : block; width : 120px; text-align : right; float : left; } .formfield { text-align : right; padding : 2px; margin : 0px 1px 0px 1px; width : 300px; border : none; } .textfield { width : 150px; border: 2px inset #ccc; background-color: #ededed; color : #333; padding : 2px; margin : 3px 0px 3px 0px; font-size : 10px; } example at my.spamtrap.net.au Cheers James Kristof Neirynck wrote: > > Taco Fleur wrote: > > I have a form in which I'd like the following layout > > > > [form field aligned right] [text aligned left] > > [form field aligned right] [text aligned left] > > This is how I'd do it: > <form> > <table> > <tbody> > <tr> > <td><input type="text" name="login" id="login" /></td> > <th scope="row"><label for="login">name</label></th> > </tr> > <tr> > <td><input type="text" name="password" id="password" /></td> > <th scope="row"><label for="password">password</label></th> > </tr> > <tr> > <td colspan="2"><input type="submit" value="log in" /></td> > </tr> > </tbody> > </table> > </form> ***************************************************** The discussion list for http://webstandardsgroup.org/ ***************************************************** ***************************************************** The discussion list for http://webstandardsgroup.org/ *****************************************************
