Nicely Wrapped Checkboxes Labels?

**Harlan Messinger** · Jul 20 '05, 11:02 PM

Re: Nicely Wrapped Checkboxes Labels?

"Jamie Jackson" <mcsqueebagePle aseDontSpamMe@h otmail.com> wrote in message
news:on83e0lb65 pjjnkfbsoumc38t 3c1k98jc9@4ax.c om...[color=blue]
> Two part question:
>
> 1) I'd like to do have nicely indented checkbox labels, even where
> wraps occur (for instance, the way <li> wrapping works). So, I'd like
> this (where "_" = checkbox):
>
> _ Apples are my favorite fruit
> _ Pomegranates are my favorite
> fruit
> _ Oranges are my favorite fruit
> _ Nectarines are my favorite
> fruit
>
> As opposed to this:
>
> _ Apples are my favorite fruit
> _ Pomegranates are my favorite
> fruit
> _ Oranges are my favorite fruit
> _ Nectarines are my favorite
> fruit
>
> I'd like to do this without tables. Is there a nice way using
> stylesheets?
>[/color]

Here's an approach:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Position ed Checkboxes</title>

<style type="text/css">
h1 { text-align: center; }
form { width: 15em; margin: 1em auto; padding: 0; border: thin solid
black;}
div.checkitem, div.submititem { margin-top: 0.5em; clear: both; }
input.checkbox { width: 1.5em; }
label { float: right; width: 13em; }
</style>
</head>

<body>
<h1>Positione d Checkboxes</h1>
<form action="someurl ">
<div class="checkite m">
<label for="item1">Wha t do you think about the economy?</label>
<input id="item1" name="item1" class="checkbox " type="checkbox" >
</div>
<div class="checkite m">
<label for="item2">How many kings and queens has the United Kingdom
had?</label>
<input id="item2" name="item2" class="checkbox " type="checkbox" >
</div>
<div class="checkite m">
<label for="item3">Wha t's for dinner?</label>
<input id="item3" name="item3" class="checkbox " type="checkbox" >
</div>
<div class="checkite m">
<label for="item4">How much wood would a woodchuck chuck if a woodchuck
could chuck wood?</label>
<input id="item4" name="item4" class="checkbox " type="checkbox" >
</div>
<div class="checkite m">
<label for="item5">Do this make me look fat?</label>
<input id="item5" name="item5" class="checkbox " type="checkbox" >
</div>
<div class="submitit em">
<input id="submitbutto n" name="submit" type="submit" value="Submit">
</div>
</form>
</body>
</html>

**Brian** · Jul 20 '05, 11:02 PM

Re: Nicely Wrapped Checkboxes Labels?

Jamie Jackson wrote:
[color=blue]
> I'd like to do have nicely indented checkbox labels, even where
> wraps occur (for instance, the way <li> wrapping works). So, I'd
> like this (where "_" = checkbox):
>
> _ Apples are my favorite fruit
> _ Pomegranates are my favorite
> fruit[/color]

You could float the input left, mark up the text as <label> (which
you should do anyways), and apply a margin left to <label>. However,
floats make things fragile, in this case for not much benefit. You
have been warned.
[color=blue]
> 2) I'd like to do a two column checkbox thingamabob using
> stylesheets.[/color]

Columns are even more dicey. You could create two lists, and float one
left, but that's sub-optimal for the html, and html is what's most
important.

--
Brian (remove ".invalid" to email me)

-

http://www.tsmchughs.com/

**Alan J. Flavell** · Jul 20 '05, 11:03 PM

Re: Nicely Wrapped Checkboxes Labels?

On Tue, 29 Jun 2004, Jamie Jackson wrote:
[color=blue]
> Two part question:
>
> 1) I'd like to do have nicely indented checkbox labels, even where
> wraps occur (for instance, the way <li> wrapping works). So, I'd like
> this (where "_" = checkbox):
>
> _ Apples are my favorite fruit
> _ Pomegranates are my favorite
> fruit
> _ Oranges are my favorite fruit
> _ Nectarines are my favorite
> fruit[/color]

[...]
[color=blue]
> I'd like to do this without tables. Is there a nice way using
> stylesheets?[/color]

If you're considering your checkboxes as part of the normal text flow,
then the technical term for this effect is "hanging indent". What CSS
offers for doing this is a negative text-indent property,

Text

http://www.w3.org/TR/REC-CSS2/text.html#indentation-prop

which you'd use in conjunction with a suitable margin (for example).

However, since you don't really know how big your checkbox is going to
be, you don't know how much margin and negative-indent to use for a
neat alignment.

So I think Brian's suggestion of a float is probably a more flexible
approach, then.

**Jamie Jackson** · Jul 20 '05, 11:03 PM

Re: Nicely Wrapped Checkboxes Labels?

On Tue, 29 Jun 2004 14:33:26 -0400, "Harlan Messinger"
<h.messinger@co mcast.net> wrote:
[color=blue]
>
>"Jamie Jackson" <mcsqueebagePle aseDontSpamMe@h otmail.com> wrote in message
>news:on83e0lb6 5pjjnkfbsoumc38 t3c1k98jc9@4ax. com...[color=green]
>> Two part question:
>>
>> 1) I'd like to do have nicely indented checkbox labels, even where
>> wraps occur (for instance, the way <li> wrapping works). So, I'd like
>> this (where "_" = checkbox):
>>
>> _ Apples are my favorite fruit
>> _ Pomegranates are my favorite
>> fruit
>> _ Oranges are my favorite fruit
>> _ Nectarines are my favorite
>> fruit
>>
>> As opposed to this:
>>
>> _ Apples are my favorite fruit
>> _ Pomegranates are my favorite
>> fruit
>> _ Oranges are my favorite fruit
>> _ Nectarines are my favorite
>> fruit
>>
>> I'd like to do this without tables. Is there a nice way using
>> stylesheets?
>>[/color]
>
>Here's an approach:
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>"http://www.w3.org/TR/html4/strict.dtd">
><html>
><head>
><title>Positio ned Checkboxes</title>
>
><style type="text/css">
> h1 { text-align: center; }
> form { width: 15em; margin: 1em auto; padding: 0; border: thin solid
>black;}
> div.checkitem, div.submititem { margin-top: 0.5em; clear: both; }
> input.checkbox { width: 1.5em; }
> label { float: right; width: 13em; }
></style>
></head>[/color]
<snip>

Interesting... thanks!

Jamie

**Jamie Jackson** · Jul 20 '05, 11:03 PM

Re: Nicely Wrapped Checkboxes Labels?

On Tue, 29 Jun 2004 14:47:13 -0400, Brian
<usenet3@juliet remblay.com.inv alid> wrote:
[color=blue]
>Jamie Jackson wrote:
>[color=green]
>> I'd like to do have nicely indented checkbox labels, even where
>> wraps occur (for instance, the way <li> wrapping works). So, I'd
>> like this (where "_" = checkbox):
>>
>> _ Apples are my favorite fruit
>> _ Pomegranates are my favorite
>> fruit[/color]
>
>You could float the input left, mark up the text as <label> (which
>you should do anyways), and apply a margin left to <label>. However,
>floats make things fragile, in this case for not much benefit. You
>have been warned.[/color]

What do you mean by fragile, in this case? I would consider something
fragile that has the potential to degrade incomprehensibl y. Is that
what you mean?
[color=blue][color=green]
>> 2) I'd like to do a two column checkbox thingamabob using
>> stylesheets.[/color]
>
>Columns are even more dicey. You could create two lists, and float one
>left, but that's sub-optimal for the html, and html is what's most
>important.[/color]

I don't quite understand what you mean by "sub-optimal for the html."
Do you mean that it is inappropriate to use two <ul>s instead of one
<ul>? I think I would agree with that; however, I hadn't been planning
to use real LISTS, just creating sets of checkboxes/labels. Maybe
something like this:

<div class="leftColu mn">
<label for="item1">Ora nges</label>
<input id="item1" name="item1" class="checkbox " type="checkbox" ><br>
<label for="item2">Ora nges</label>
<input id="item2" name="item1" class="checkbox " type="checkbox" ><br>
</div>
<div class="rightCol umn">
<label for="item1">Ora nges</label>
<input id="item1" name="item1" class="checkbox " type="checkbox" ><br>
<label for="item2">Ora nges</label>
<input id="item2" name="item1" class="checkbox " type="checkbox" ><br>
</div>

Would that sort of thing still offend your sensibilities?

Thanks,
Jamie

**Harlan Messinger** · Jul 20 '05, 11:03 PM

Re: Nicely Wrapped Checkboxes Labels?

"Jamie Jackson" <mcsqueebagePle aseDontSpamMe@h otmail.com> wrote in message
news:on83e0lb65 pjjnkfbsoumc38t 3c1k98jc9@4ax.c om...[color=blue]
> Two part question:
>
> 1) I'd like to do have nicely indented checkbox labels, even where
> wraps occur (for instance, the way <li> wrapping works). So, I'd like
> this (where "_" = checkbox):
>
> _ Apples are my favorite fruit
> _ Pomegranates are my favorite
> fruit
> _ Oranges are my favorite fruit
> _ Nectarines are my favorite
> fruit
>
> As opposed to this:
>
> _ Apples are my favorite fruit
> _ Pomegranates are my favorite
> fruit
> _ Oranges are my favorite fruit
> _ Nectarines are my favorite
> fruit
>
> I'd like to do this without tables. Is there a nice way using
> stylesheets?[/color]

By the way--in case the reason you don't want to use a table is because you
don't want to use tables for layout, what you are describing *is*
legitimately a table: a set of rows, each row corresponding to one of a set
of items, and two columns, one containing fields for the entry of an item's
value, and the other containing a label identifying the item whose value is
to be entered.

**Brian** · Jul 20 '05, 11:03 PM

Re: Nicely Wrapped Checkboxes Labels?

Jamie Jackson wrote:
[color=blue]
> Brian wrote:
>[color=green]
>> floats make things fragile[/color]
>
> What do you mean by fragile, in this case?[/color]

Floats are tricky. I think the consensus in ciwas is that no browser
handles floats perfectly.
[color=blue]
> I would consider something fragile that has the potential to
> degrade incomprehensibl y. Is that what you mean?[/color]

Yes. For example, multiple floats on the same line can make Mozilla
go haywire. They can make unfloated text on the same page disappear
in certain situations with IE/Win. I could go on, but you get the picture.
[color=blue][color=green]
>> Columns are even more dicey. You could create two lists, and
>> float one left, but that's sub-optimal for the html, and html is
>> what's most important.[/color]
>
> I don't quite understand what you mean by "sub-optimal for the
> html." Do you mean that it is inappropriate to use two <ul>s
> instead of one <ul>?[/color]

If you have one list, it should be in one UL or OL element.
[color=blue]
> I think I would agree with that; however, I hadn't been planning to
> use real LISTS, just creating sets of checkboxes/labels.[/color]

Yeah, I was thinking about lists when I read your post, and projected
that onto your problem. Sorry about that.
[color=blue]
> <div class="leftColu mn">
> <label for="item1">Ora nges</label>
> <input id="item1" name="item1" class="checkbox " type="checkbox" ><br>
> <label for="item2">Ora nges</label>
> <input id="item2" name="item1" class="checkbox " type="checkbox" ><br>
> </div>
> <div class="rightCol umn">
> <label for="item1">Ora nges</label>
> <input id="item1" name="item1" class="checkbox " type="checkbox" ><br>
> <label for="item2">Ora nges</label>
> <input id="item2" name="item1" class="checkbox " type="checkbox" ><br>
> </div>
>
> Would that sort of thing still offend your sensibilities?[/color]

That seems reasonable. Just test thoroughly. ;-)

Aside: You could put each label and input in a div and lose the <br>.
Or put the input inside the label and make label block level. This
latter approach allows you to drop the "for" attribute and the "id"
for the input.

--
Brian (remove ".invalid" to email me)

-

http://www.tsmchughs.com/

**Jamie Jackson** · Jul 20 '05, 11:03 PM

Re: Nicely Wrapped Checkboxes Labels?

On Tue, 29 Jun 2004 15:41:51 -0400, "Harlan Messinger"
<h.messinger@co mcast.net> wrote:
[color=blue]
>By the way--in case the reason you don't want to use a table is because you
>don't want to use tables for layout, what you are describing *is*
>legitimately a table: a set of rows, each row corresponding to one of a set
>of items, and two columns, one containing fields for the entry of an item's
>value, and the other containing a label identifying the item whose value is
>to be entered.[/color]

Yeah, that's why I had wanted to avoid the tables, but you make a good
point. However, in my second example...

My favorite fruit is:
_ Apples _ Oranges
_ Star _ Nectarines
Fruit _ Peaches
_ Pomegranates _ Grapes

.... it calls for either a four-column table, or a two column table
with two nested two-column tables inside. Either way, it becomes
somewhat convoluted tabular data (or doesn't it?).

The two (or more) column thing is the most essential thing for me to
achieve (in the most common browsers), since it can be an effective
way to present many options in a limited space. If that clean method
is muddied by the desire to hanging-indent the labels, then I'll bag
the indented labels.

Thanks again,
Jamie

**Jamie Jackson** · Jul 20 '05, 11:03 PM

Re: Nicely Wrapped Checkboxes Labels?

On Tue, 29 Jun 2004 15:50:00 -0400, Brian
<usenet3@juliet remblay.com.inv alid> wrote:
[color=blue]
>Aside: You could put each label and input in a div and lose the <br>.
>Or put the input inside the label and make label block level. This
>latter approach allows you to drop the "for" attribute and the "id"
>for the input.[/color]

Okay, that gives me some ideas to play with. Thanks for the help.

Jamie

**Harlan Messinger** · Jul 20 '05, 11:03 PM

Re: Nicely Wrapped Checkboxes Labels?

Jamie Jackson <mcsqueebagePle aseDontSpamMe@h otmail.com> wrote:
[color=blue]
>On Tue, 29 Jun 2004 15:41:51 -0400, "Harlan Messinger"
><h.messinger@c omcast.net> wrote:
>[color=green]
>>By the way--in case the reason you don't want to use a table is because you
>>don't want to use tables for layout, what you are describing *is*
>>legitimatel y a table: a set of rows, each row corresponding to one of a set
>>of items, and two columns, one containing fields for the entry of an item's
>>value, and the other containing a label identifying the item whose value is
>>to be entered.[/color]
>
>Yeah, that's why I had wanted to avoid the tables, but you make a good
>point. However, in my second example...
>
>My favorite fruit is:
>_ Apples _ Oranges
>_ Star _ Nectarines
> Fruit _ Peaches
>_ Pomegranates _ Grapes
>
>... it calls for either a four-column table, or a two column table
>with two nested two-column tables inside. Either way, it becomes
>somewhat convoluted tabular data (or doesn't it?).[/color]

Agreed.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

**Neal** · Jul 20 '05, 11:03 PM

Re: Nicely Wrapped Checkboxes Labels?

On Tue, 29 Jun 2004 16:10:46 -0400, Jamie Jackson
<mcsqueebagePle aseDontSpamMe@h otmail.com> wrote:
[color=blue]
> However, in my second example...
>
> My favorite fruit is:
> _ Apples _ Oranges
> _ Star _ Nectarines
> Fruit _ Peaches
> _ Pomegranates _ Grapes
>
> ... it calls for either a four-column table, or a two column table
> with two nested two-column tables inside. Either way, it becomes
> somewhat convoluted tabular data (or doesn't it?).[/color]

Or, two adjacent tables positioned or floated into position.

Nicely Wrapped Checkboxes Labels?

Nicely Wrapped Checkboxes Labels?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment