Re: [css-d] Form Layout - better table or CSS for this one?
(Taking it back onto the list, as others might be interested) I don't know if you tried your first example in Firefox, but it worked just fine. IE sometimes goes haywire on all-floated layouts, however, and putting each line inside a block element was a pretty good cure. The inputs don't need to be floated, however, and the number of divs can be slimmed down a bit, like this: html body divlabel style=width: 120px; float: left; clear: left;Label 1:/label input style=width: 210px; type=text id=input1 //div divlabel style=width: 120px; float: left; clear: left;Label 2:/label input style=width: 210px; type=text id=input2 //div /body /html Chris On 1/30/06, Paul Kahl [EMAIL PROTECTED] wrote: Actually, ignore my first email. This solution works great: html body div style=clear: both; padding: 0px; div style=width: 120px; float: left;Label 1:/div div style=width: 210px; float: left;input type=text id=input1 value=1//div /div div style=clear: both; padding: 0px; div style=width: 120px; float: left;Label 2:/div div style=width: 210px; float: left;input type=text id=input2 value=2//div /div /body /html On 1/30/06, Paul Kahl [EMAIL PROTECTED] wrote: How would you go about doing this? I haven't used the Clear property before, and I've always had issues with Float. I tried this: html body div style=width: 120px; float: left; clear: left;Label 1:/div div style=width: 210px; float: left;input type=text id=input1//div div style=width: 120px; float: left; clear: left;Label 2:/div div style=width: 210px; float: left;input type=text id=input2//div /body /html but I wound up with Label and both input fields on one line, and Label2 on the next line. How would I set that up, without having to do absolute positioning, just with float and clear, so that Label and Label 2, and their respective inputs, were on a total of two lines, like: Label: input1 Label2: input2 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form Layout - better table or CSS for this one?
Chris, On Jan 31, 2006, at 2:33 AM, Chris Ovenden wrote: I don't know if you tried your first example in Firefox, but it worked just fine. IE sometimes goes haywire on all-floated layouts, however, and putting each line inside a block element was a pretty good cure. The inputs don't need to be floated, however, and the number of divs can be slimmed down a bit, like this: html body divlabel style=width: 120px; float: left; clear: left;Label 1:/label input style=width: 210px; type=text id=input1 //div divlabel style=width: 120px; float: left; clear: left;Label 2:/label input style=width: 210px; type=text id=input2 //div /body /html A slightly more semantic choice (with similar css applied) might be... form... fieldset labelspanLabel1:/spaninput id=input1 type=text/label ... I sometimes use a table anyway for the benefit of browsers that aren't css capable, but it depends on the form and the audience. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Form Layout - better table or CSS for this one?
I thought I was getting pretty good at accessible CSS driven form layouts, but I might have met my match this time (meaning - amount of time needed for table layout verses CSS). Here's Photoshop mock ups of two of the form pages. http://www.cyndustries.com/formTEST.cfm This is an 8 multi-page form, and stuff is all over the place on every page. Layouts for these *ain't* gonna change no matter what, so they've got to be done like these... Just wondering, would you folks go with tables on these for layout, or stick to your guns and work through the CSS? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form Layout - better table or CSS for this one?
Looks completely do-able in CSS to me. The first page I'd divide into two main DIVs, floating the first one left. Inside the first block, labels with a set width (could be in ems though if a fluid layout is required) floated left and cleared left, so that the input fields sit neatly next to them. A cleared heading for the 'Types of Cases' bit. Then the checkboxes in two groups, the first group floated left... And so on. Footer clearing both blocks. The main trick I use for CSS forms is to use a fixed width for floated labels etc, so that they simulate a table-like layout. Traditional right-aligned labels work in exactly the same way. You can also be sure then that your containing blocks are the right width to hold all that's in them. And the left-floated elements must clear the previous left-floated element above. Enclosing a label/input pair in a div or other block-level element makes it easier to keep them horizontally aligned, but shouldn't strictly be necessary. (I'd be interested in hearing of a bulletproof method for this.) Hope this gives you some encouragement. Chris On 1/29/06, Les Mizzell [EMAIL PROTECTED] wrote: I thought I was getting pretty good at accessible CSS driven form layouts, but I might have met my match this time (meaning - amount of time needed for table layout verses CSS). Here's Photoshop mock ups of two of the form pages. http://www.cyndustries.com/formTEST.cfm This is an 8 multi-page form, and stuff is all over the place on every page. Layouts for these *ain't* gonna change no matter what, so they've got to be done like these... Just wondering, would you folks go with tables on these for layout, or stick to your guns and work through the CSS? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
