Re: [css-d] Form layout patterns

[Tom Livingston]

On Tue, Feb 5, 2013 at 11:23 AM, Colin (Sandy) Pittendrigh <
sandy.pittendr...@gmail.com> wrote:

> Good Bradfrost link above. Thank you for that.
>
> Here's a question. Since the great CSS Positioning leap forward we no
> longer have to use nested tables for overall page layoutas did most of
> us during the late 1990s.
>
> But I do occasionally (still) use tables for laying out forms.  As long as
> the tables are NOT nested inside the TD elements of a surrounding table,
> and as long as it's an occasional tool only, I don't see the harm.
>
> Violent prejudice against tables for layout is similar, in a way, to the
> way C-programmers now rail against the infamous goto statement, which is
> sometimes (break out of a doubly nested loop) useful and not
> harmful.if kept under control, and if the goto points forward a
> few lines of code only.
>
> So. Is table layout now a sin no matter what? Even if not nested and used
> only occasionally? .as for forms?
>

I'd have to add responsive layouts to the list of criteria for,
specifically, using tables for form layout. Seems to me it would not be
ideal to, for example, have labels in one td and associated field in
another td, all in the same row, and then to try to change the layout for
small screens.

Keep 'em coming. Off-list as needed...

Thanks all.


-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout patterns

[Philip TAYLOR]

Colin (Sandy) Pittendrigh wrote:

> Violent prejudice against tables for layout is similar, in a way, to the
> way C-programmers now rail against the infamous goto statement, which is
> sometimes (break out of a doubly nested loop) useful and not
> harmful.if kept under control, and if the goto points forward a
> few lines of code only.

I think you will find tnat Edsger Dijkstra's famous assertion [1]
pre-dates the day that the Devil gave birth to the abomination
known as "C" [2].

> So. Is table layout now a sin no matter what? Even if not nested and used
> only occasionally? .as for forms?

Table layouts are absolutely fine if you are presenting tabular matter.
If you are not, then the primary criterion for assessing whether
a table is likely to make your page inaccessible is "How will it
be rendered to someone using Assistive Technology ?".  If it will
be rendered in such a way that the semantics of your 'table' are
clear, then go ahead; if it is rendered in such a way as to obscure
the semantics of your 'table', then it should replaced by more
accessible markup.

Philip Taylor

[1] 1968 : see http://www.cs.utexas.edu/users/EWD/ewd02xx/EWD215.PDF
[2] 1969 -- 1973 : see
http://en.wikipedia.org/wiki/C_%28programming_language%29
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout patterns

[Colin (Sandy) Pittendrigh]

Good Bradfrost link above. Thank you for that.

Here's a question. Since the great CSS Positioning leap forward we no
longer have to use nested tables for overall page layoutas did most of
us during the late 1990s.

But I do occasionally (still) use tables for laying out forms.  As long as
the tables are NOT nested inside the TD elements of a surrounding table,
and as long as it's an occasional tool only, I don't see the harm.

Violent prejudice against tables for layout is similar, in a way, to the
way C-programmers now rail against the infamous goto statement, which is
sometimes (break out of a doubly nested loop) useful and not
harmful.if kept under control, and if the goto points forward a
few lines of code only.

So. Is table layout now a sin no matter what? Even if not nested and used
only occasionally? .as for forms?



On Tue, Feb 5, 2013 at 8:19 AM, Tom Livingston  wrote:

> On Wed, Jan 30, 2013 at 3:51 PM, Chris Williams  wrote:
>
> > With a hat tip to Phillipe, I've just started building off this model,
> and
> > I love it.  Nice responsive form shown in the "form with left labels"
> > example.
> >
> > http://bradfrost.github.com/this-is-responsive/patterns.html
> >
> > I had been doing all tables for really tight control of forms, but this
> > div-based approach seems to be working and allows the flexibility to do
> > the side-by-side alignments and so on that you're mentioning.  While at
> > the same time being responsive and tolerable down to the small form
> factor
> > devices.
> >
> > Not that I'm there/done/complete, but I'm coding it all right now and it
> > seems to be working.
> >
> > HTH,
> > Chris
> >
> > On 1/29/13 12:00 PM, "Tom Livingston"  wrote:
> >
> > >Hello all,
> > >
> > >Do any of you have a favorite form styling/structure pattern that you
> > >always use? I am particularly looking for a layout that has labels next
> to
> > >form fields as opposed to above them. Also, multiple fields on one line,
> > >like 'state' and 'zip' next to each other, with respective labels, all
> on
> > >one line.
> > >
> > >Every time I have to do a form I usually end up doing battle with some
> > >aspect of it. Getting the above mentioned scenario all on one line,
> having
> > >labels vertically centered on the height of the fields next to them, etc
> > >always seems to be a stumbling block for me. It never goes smoothly.
> I've
> > >tried several approaches, but each seems to have a downside.
> > >
> > >Off-list replies as necessary...
> > >
> > >--
> > >
> >
>
> Thanks Chris
>
>
>
> > __
> > css-discuss [css-d@lists.css-discuss.org]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
>
>
>
> --
>
> Tom Livingston | Senior Interactive Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



-- 
/*  Colin (Sandy) Pittendrigh  >--oO0> */
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout patterns

[Tom Livingston]

On Wed, Jan 30, 2013 at 3:51 PM, Chris Williams  wrote:

> With a hat tip to Phillipe, I've just started building off this model, and
> I love it.  Nice responsive form shown in the "form with left labels"
> example.
>
> http://bradfrost.github.com/this-is-responsive/patterns.html
>
> I had been doing all tables for really tight control of forms, but this
> div-based approach seems to be working and allows the flexibility to do
> the side-by-side alignments and so on that you're mentioning.  While at
> the same time being responsive and tolerable down to the small form factor
> devices.
>
> Not that I'm there/done/complete, but I'm coding it all right now and it
> seems to be working.
>
> HTH,
> Chris
>
> On 1/29/13 12:00 PM, "Tom Livingston"  wrote:
>
> >Hello all,
> >
> >Do any of you have a favorite form styling/structure pattern that you
> >always use? I am particularly looking for a layout that has labels next to
> >form fields as opposed to above them. Also, multiple fields on one line,
> >like 'state' and 'zip' next to each other, with respective labels, all on
> >one line.
> >
> >Every time I have to do a form I usually end up doing battle with some
> >aspect of it. Getting the above mentioned scenario all on one line, having
> >labels vertically centered on the height of the fields next to them, etc
> >always seems to be a stumbling block for me. It never goes smoothly. I've
> >tried several approaches, but each seems to have a downside.
> >
> >Off-list replies as necessary...
> >
> >--
> >
>

Thanks Chris



> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout patterns

[Chris Williams]

With a hat tip to Phillipe, I've just started building off this model, and
I love it.  Nice responsive form shown in the "form with left labels"
example.

http://bradfrost.github.com/this-is-responsive/patterns.html

I had been doing all tables for really tight control of forms, but this
div-based approach seems to be working and allows the flexibility to do
the side-by-side alignments and so on that you're mentioning.  While at
the same time being responsive and tolerable down to the small form factor
devices.

Not that I'm there/done/complete, but I'm coding it all right now and it
seems to be working.

HTH,
Chris

On 1/29/13 12:00 PM, "Tom Livingston"  wrote:

>Hello all,
>
>Do any of you have a favorite form styling/structure pattern that you
>always use? I am particularly looking for a layout that has labels next to
>form fields as opposed to above them. Also, multiple fields on one line,
>like 'state' and 'zip' next to each other, with respective labels, all on
>one line.
>
>Every time I have to do a form I usually end up doing battle with some
>aspect of it. Getting the above mentioned scenario all on one line, having
>labels vertically centered on the height of the fields next to them, etc
>always seems to be a stumbling block for me. It never goes smoothly. I've
>tried several approaches, but each seems to have a downside.
>
>Off-list replies as necessary...
>
>-- 
>
>Tom Livingston | Senior Interactive Developer | Media Logic |
>ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>__
>css-discuss [css-d@lists.css-discuss.org]
>http://www.css-discuss.org/mailman/listinfo/css-d
>List wiki/FAQ -- http://css-discuss.incutio.com/
>List policies -- http://css-discuss.org/policies.html
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Form layout patterns

[Tom Livingston]

Hello all,

Do any of you have a favorite form styling/structure pattern that you
always use? I am particularly looking for a layout that has labels next to
form fields as opposed to above them. Also, multiple fields on one line,
like 'state' and 'zip' next to each other, with respective labels, all on
one line.

Every time I have to do a form I usually end up doing battle with some
aspect of it. Getting the above mentioned scenario all on one line, having
labels vertically centered on the height of the fields next to them, etc
always seems to be a stumbling block for me. It never goes smoothly. I've
tried several approaches, but each seems to have a downside.

Off-list replies as necessary...

-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout

[Snipes, Jason L]

> Can someone point me to a good online tutorial describing various
> techniques for tableless form layout?


I have found the techniques described in this A List Apart Article very helpful.
http://www.alistapart.com/articles/prettyaccessibleforms/


> If possible, I'd like to create some forms that would allow me to use CSS
> to switch between two common layouts - one in columns and the other
> line-oriented.  That is:
>
> Name  [   ]
> Email [   ]
>
>
> Name
> [   ]
>
> Email
> [   ]

Under the styling the form section, I think you can change the selector for 
form.cmxform label display from inline-block to block to meet your second 
example.

form.cmxform label {
  display: inline-block;< Change to block;
  line-height: 1.8;
  vertical-align: top;
}

Hope this helps,

Jason Snipes


 






 NOTE: This is a Forsyth County operated e-mail system. ALL e-Mail 
communication is subject to be accessed by the news media and the public 
pursuant to the Public Records Law of North Carolina.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout

[David Laakso]

Jim wrote:
> Can someone point me to a good online tutorial describing various 
> techniques for tableless form layout?
>
>   




This may help (in part, at least):






-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Form layout

[Jim]

Can someone point me to a good online tutorial describing various 
techniques for tableless form layout?

If possible, I'd like to create some forms that would allow me to use CSS 
to switch between two common layouts - one in columns and the other 
line-oriented.  That is:

Name  [   ]
Email [   ]


Name
[   ]

Email
[   ] 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout

[Russ Peters]

> On Dec 15, 2006, at 11:46 AM, Russ Peters wrote:
> 
> >>(2) The selection menus for States and Raiders are not
> >> accessible without using a mouse on some browsers. (Safari works
> >> okay, not sure yet about IE, but no-go on Firefox). Also the radio
> >> buttons/check boxes are not accessible with just a keyboard.
> >
> > I'll look into this.  Not sure why they wouldn't work using the
> > keyboard, is there something I'm not doing correctly?
> 
> You are fine.  Being able to keyboard a select element is the
> browsers issue, not yours.  Firefox has a setting that will let you
> tab to selects and type the first few letters of the item you want.
> IE win will let you tab into select elements by default.  Once
> activated, you can type the first letter of the item you want and
> down arrow if there are multiple items with the same first letter.

Thanks, yeah it was working for me.  

One thing that I'm not sure I like is that you can click anywhere inside
the div and actually select a checkbox or radio button.  Why is it doing
this and is there any way to change it?

Also, I've created a class for the text field that lives under the
checkbox and it is much easier to control.  Thank you for the
suggestion.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout

[Roger Roelofs]

Russ,

On Dec 15, 2006, at 11:46 AM, Russ Peters wrote:

>>  (2) The selection menus for States and Raiders are not
>> accessible without using a mouse on some browsers. (Safari works
>> okay, not sure yet about IE, but no-go on Firefox). Also the radio
>> buttons/check boxes are not accessible with just a keyboard.
>
> I'll look into this.  Not sure why they wouldn't work using the
> keyboard, is there something I'm not doing correctly?

You are fine.  Being able to keyboard a select element is the  
browsers issue, not yours.  Firefox has a setting that will let you  
tab to selects and type the first few letters of the item you want.   
IE win will let you tab into select elements by default.  Once  
activated, you can type the first letter of the item you want and  
down arrow if there are multiple items with the same first letter.

hth

Roger,
-- 
Roger Roelofs
[EMAIL PROTECTED]



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout

[Russ Peters]

> At 1:56 PM -0800 12/14/06, Russ Peters wrote:
> >Can you take a look at my progress on this form and let me know if
I'm
> >headed down the right path for a nice looking layout here?  Alignment
> >and style on forms have always challenged me.
> >
> >http://www.redcanoecu.com/applications/membership.asp 
> >
> 
> A few minor comments.
>   (1) You might be able to get that bottom text field more
> closely associated with the checkbox if they were in the same div but
> perhaps defined by a class? Just a thought.

I need to do something, it's frustrating me.  Had a tough time with the
text fields under the radio buttons on Eligibility as well.  Sort of
kludgy if you ask me.  

>   (2) The selection menus for States and Raiders are not
> accessible without using a mouse on some browsers. (Safari works
> okay, not sure yet about IE, but no-go on Firefox). Also the radio
> buttons/check boxes are not accessible with just a keyboard.

I'll look into this.  Not sure why they wouldn't work using the
keyboard, is there something I'm not doing correctly? 

>   (3). I am assuming that once the form is finished it will go
> on a SSL page but right now it's not. Were I a user, I would refuse
> to give my Social Security number without seeing that Certificate and
> https. Just paranoid I guess but it's really the only security the
> end user has.

Yes, I have the SSL certificate ordered and before the site goes live
this page will be secure.  Thank you for noticing that...reinforces how
important this is when sharing sensitive information.  

Russ

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout

[Tim Offenstein]

At 1:56 PM -0800 12/14/06, Russ Peters wrote:
>Can you take a look at my progress on this form and let me know if I'm
>headed down the right path for a nice looking layout here?  Alignment
>and style on forms have always challenged me.
>
>http://www.redcanoecu.com/applications/membership.asp
>

Hi Russ,

Overall your form looks very nice. Using labels and fieldsets makes 
the form much more accessible than otherwise. I've used similar 
styling to separate the labels from the fields and agree with you 
that the result, while acceptable is less than optimum.

A few minor comments.
(1) You might be able to get that bottom text field more 
closely associated with the checkbox if they were in the same div but 
perhaps defined by a class? Just a thought.
(2) The selection menus for States and Raiders are not 
accessible without using a mouse on some browsers. (Safari works 
okay, not sure yet about IE, but no-go on Firefox). Also the radio 
buttons/check boxes are not accessible with just a keyboard.
(3). I am assuming that once the form is finished it will go 
on a SSL page but right now it's not. Were I a user, I would refuse 
to give my Social Security number without seeing that Certificate and 
https. Just paranoid I guess but it's really the only security the 
end user has.

Excellent job otherwise.

-Tim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout

[Russ Peters]

> > Some designs have every label on top and left aligned above each
text
> > field.  This obviously makes a long form even longer which is why I
> > opted to put them to the left of each field.
> >
> > Anyone have any suggestions or advice? Am I headed down the right
path
> > here?
> >
> > http://www.redcanoecu.com/applications/membership.asp 
> >
> > Russ
> 
> Just curious as to why the text boxes have a dark background when they
are
> active (as the user is typing into them).
> 
> Text is unreadable as the text is black as well.

Ahh yeah, that was an experiment that I don't see in IE but has decided
to show up in FF now that you mention it.  My guess is that it's not
necessary to change the background color on focus.  Thanks for bringing
that to my attention.  

If you see that little text box down there under the last checkbox in
the Services list you'll see my frustration.  There just doesn't seem to
be a good solid way to markup form fields to make building them any
quicker.  

Russ

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form layout

[Chris Broadfoot]

Russ,

> Can you take a look at my progress on this form and let me know if I'm
> headed down the right path for a nice looking layout here?  Alignment
> and style on forms have always challenged me.

At first glance, it looks nice to me.

> What is the best alignment for labels? I have them right aligned right
> now next to the form fields with all form fields the same width (where
> appropriate) but then when I run into checkboxes or radio buttons they
> don't align as nicely with the rest of the form and look wonky.

I think it's a personal decision - but IMO both are acceptable.

> Some designs have every label on top and left aligned above each text
> field.  This obviously makes a long form even longer which is why I
> opted to put them to the left of each field.
> 
> Anyone have any suggestions or advice? Am I headed down the right path
> here?
> 
> http://www.redcanoecu.com/applications/membership.asp
> 
> Russ

Just curious as to why the text boxes have a dark background when they are
active (as the user is typing into them).

Text is unreadable as the text is black as well.

Chris

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Form layout

[Russ Peters]

Can you take a look at my progress on this form and let me know if I'm
headed down the right path for a nice looking layout here?  Alignment
and style on forms have always challenged me.  

What is the best alignment for labels? I have them right aligned right
now next to the form fields with all form fields the same width (where
appropriate) but then when I run into checkboxes or radio buttons they
don't align as nicely with the rest of the form and look wonky.  

Some designs have every label on top and left aligned above each text
field.  This obviously makes a long form even longer which is why I
opted to put them to the left of each field.  

Anyone have any suggestions or advice? Am I headed down the right path
here?  

http://www.redcanoecu.com/applications/membership.asp 

Russ 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form Layout "how would *you* do this?" question...

[Rakesh Pai]

Give the "ROW" class a background: url()
repeat-x bottom, and give the individual spans a background-color:
white.

This is assuming that you are working on a white background, and you
already have the code to align the elements correctly.

On 2/22/06, Les Mizzell <[EMAIL PROTECTED]> wrote:
>
> >  Because of that, I would recommend you to use a table, and not DIVs
> > (you may have "DIVitis")  Also, I would suggest to use a FIELDSET and
> > LABELs (instead of SPANs with your texts), so the (XHTML) structure
> > would look like this:
> >   
> > Short form description
> > 
> >   
> > Field
> > 
> >   
> > ···
> > 
> >   
> > *note: Label's FOR attribute acts upon field ID, not the NAME
>
>
> I thought about tables - but the way the rest of the page is laid out
> would lead to multiple tables, or nested tables, or all kinds of
> differing column spans for every row. Plus, none of the rows have data
> with any kind of fixed length, so you could end up with stuff like
>
> col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 .. col2
> col1 ... col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 co
>  col2 col2 col2 co
>
>
> No consistant column widths = bit table mess. Between what I was working
> on, and part of one of the examples posted by Holly, I think I've got it.
>
> Thanks!
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>


--
Rakesh Pai
Mumbai, India.
[EMAIL PROTECTED]
http://piecesofrakesh.blogspot.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form Layout "how would *you* do this?" question...

[Les Mizzell]

>  Because of that, I would recommend you to use a table, and not DIVs 
> (you may have "DIVitis")  Also, I would suggest to use a FIELDSET and 
> LABELs (instead of SPANs with your texts), so the (XHTML) structure 
> would look like this:
>   
> Short form description
> 
>   
> Field
> 
>   
> ···
> 
>   
> *note: Label's FOR attribute acts upon field ID, not the NAME


I thought about tables - but the way the rest of the page is laid out 
would lead to multiple tables, or nested tables, or all kinds of 
differing column spans for every row. Plus, none of the rows have data 
with any kind of fixed length, so you could end up with stuff like

col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 .. col2
col1 ... col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 co
 col2 col2 col2 co


No consistant column widths = bit table mess. Between what I was working 
on, and part of one of the examples posted by Holly, I think I've got it.

Thanks!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form Layout "how would *you* do this?" question...

[Holly Bergevin]

From: Les Mizzell <[EMAIL PROTECTED]>

>What I'm trying to get is:
>http://www.columbiacityjazz.com/LEV4_VOUCHERS_DIV_STEP2.gif

>The left/right aligned columns isn't the problem. It's the darned dotted 
>line between them. This same configuration takes place in dozens of 
>places - Class "ROW" is 600 pixels wide. The width of the left/right 
>content could be split 200px/400px or 450px/150px - could be anything 
>and content could be anything on either side...multiple text boxes, just 
>text

Here is a page with links to several examples that people put together several 
years ago. Perhaps you will find the appropriate inspiration on one of these 
pages.

http://css-discuss.incutio.com/?page=DotLeaders

I hope that helps,

~holly 
 
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form Layout "how would *you* do this?" question...

[Mark Howells]

>> What I'm trying to get is:
>>
>> http://www.columbiacityjazz.com/LEV4_VOUCHERS_DIV_STEP2.gif
>>
>> I've set it up like this:
>>
>>
>> 
>>Long Distance Telephone Calls
>>
>> 
>>
>>
>> The left/right aligned columns isn't the problem. It's the darned  
>> dotted
>> line between them. This same configuration takes place in dozens of
>> places - Class "ROW" is 600 pixels wide. The width of the left/right
>> content could be split 200px/400px or 450px/150px - could be anything
>> and content could be anything on either side...multiple text  
>> boxes, just
>> text

Can each row have multiple lines? If so, where does the dotted line  
appear? If each line is a fixed height, put a background image on the  
div, makes the div height 1 pixel less than the spans, then give the  
span a background colour of white to mask the dotted lines.

Regards
Mark Howells
www.permanenttourist.ch

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form Layout "how would *you* do this?" question...

[Rahul Gonsalves]

Schalk wrote:
> Les Mizzell wrote:
>> http://www.columbiacityjazz.com/LEV4_VOUCHERS_DIV_STEP2.gif
>> 
> Greetings Les,
>
> Current I get a can't connect server error when trying to access the link.
Schalk:

I can connect just fine to the server.

Rahul.

-- 

. . . . . . . . . . . . . . . . . . . . . . . .
Rahul Gonsalves
Make PNG, not War.
. . . . . . . . . . . . . . . . . . . . . . . .

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form Layout "how would *you* do this?" question...

[Schalk]

Les Mizzell wrote:
> What I'm trying to get is:
>
> http://www.columbiacityjazz.com/LEV4_VOUCHERS_DIV_STEP2.gif
>
> I've set it up like this:
>
>
> 
>Long Distance Telephone Calls
>
> 
>
>
> The left/right aligned columns isn't the problem. It's the darned dotted 
> line between them. This same configuration takes place in dozens of 
> places - Class "ROW" is 600 pixels wide. The width of the left/right 
> content could be split 200px/400px or 450px/150px - could be anything 
> and content could be anything on either side...multiple text boxes, just 
> text
Greetings Les,

Current I get a can't connect server error when trying to access the link.

-- 
Kind Regards
Schalk Neethling
Web Developer.Designer.Programmer.President
Volume4.Business.Solution.Developers


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Form Layout "how would *you* do this?" question...

[Les Mizzell]

What I'm trying to get is:

http://www.columbiacityjazz.com/LEV4_VOUCHERS_DIV_STEP2.gif

I've set it up like this:



   Long Distance Telephone Calls
   



The left/right aligned columns isn't the problem. It's the darned dotted 
line between them. This same configuration takes place in dozens of 
places - Class "ROW" is 600 pixels wide. The width of the left/right 
content could be split 200px/400px or 450px/150px - could be anything 
and content could be anything on either side...multiple text boxes, just 
text

I'm trying to find the (obviously) least amount of code to get this to 
work in all situations...

I had thought of using a graphic that was covered by the left/right 
content and only shows in the space between, but that hasn't worked out 
quite right.

Ideas?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
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?

[Roger Roelofs]

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:
>
> 
>
>Label 1:
> id="input1" />
>Label 2:
> id="input2" />
>
> 

A slightly more semantic choice (with similar css applied) might be...



Label1:
...

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/

Re: [css-d] Form Layout - better table or CSS for this one?

[Chris Ovenden]

(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:


   
   Label 1:
   
   Label 2:
   
   


Chris

On 1/30/06, Paul Kahl <[EMAIL PROTECTED]> wrote:
> Actually, ignore my first email. This solution works great:
>
> 
> 
> 
> Label 1:
>  id="input1" value="1"/>
> 
> 
> Label 2:
>  id="input2" value="2"/>
> 
> 
> 
>

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:
>
> 
> 
> Label 1:
>  id="input1"/>
> Label 2:
>  id="input2"/>
> 
> 
>
> 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 Ovenden]

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/

[css-d] Form Layout - better table or CSS for this one?

[Les Mizzell]

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-d] form layout problems

[Graham Cox]

Hi,
 
I have a form with an id of #form_guide at
http://www.golfbettingguide.com/statistics/golf-stats.php 
 
The problem is the label and select drop down box aren't moving down
underneath the two text boxes properly.  Frustratingly I had this
working perfectly the other day but think I've changed the stylesheet at
http://www.golfbettingguide.com/styles/styles.css for the worse somehow.
I'm sure I'm missing something obvious here.  If anyone has any ideas
I'd be very grateful.
 
Best Regards,
Graham Cox
 
 
 
__
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/