469,927 Members | 1,848 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,927 developers. It's quick & easy.

Nicely Wrapped Checkboxes Labels?

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?

2) I'd like to do a two column checkbox thingamabob using stylesheets.
Is this sorta thing possible to do (on common browsers), but which
will degrade nicely in non-compatible browsers? Example:

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

(Notice I worked a wrapped example, "Star Fruit" in there, too :)

Finally, are there any resources with compilations of these sorts of
(assumed to be common) form tricks?

Thanks!
Jamie
Jul 20 '05 #1
11 11180

"Jamie Jackson" <mc*************************@hotmail.com> wrote in message
news:on********************************@4ax.com...
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?


Here's an approach:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Positioned 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>Positioned Checkboxes</h1>
<form action="someurl">
<div class="checkitem">
<label for="item1">What do you think about the economy?</label>
<input id="item1" name="item1" class="checkbox" type="checkbox">
</div>
<div class="checkitem">
<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="checkitem">
<label for="item3">What's for dinner?</label>
<input id="item3" name="item3" class="checkbox" type="checkbox">
</div>
<div class="checkitem">
<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="checkitem">
<label for="item5">Do this make me look fat?</label>
<input id="item5" name="item5" class="checkbox" type="checkbox">
</div>
<div class="submititem">
<input id="submitbutton" name="submit" type="submit" value="Submit">
</div>
</form>
</body>
</html>

Jul 20 '05 #2
Jamie Jackson wrote:
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
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.
2) I'd like to do a two column checkbox thingamabob using
stylesheets.


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/
Jul 20 '05 #3
On Tue, 29 Jun 2004, Jamie Jackson wrote:
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
[...]
I'd like to do this without tables. Is there a nice way using
stylesheets?


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,
http://www.w3.org/TR/REC-CSS2/text.h...dentation-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.
Jul 20 '05 #4
On Tue, 29 Jun 2004 14:33:26 -0400, "Harlan Messinger"
<h.*********@comcast.net> wrote:

"Jamie Jackson" <mc*************************@hotmail.com> wrote in message
news:on********************************@4ax.com.. .
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?


Here's an approach:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Positioned 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>

<snip>

Interesting... thanks!

Jamie

Jul 20 '05 #5
On Tue, 29 Jun 2004 14:47:13 -0400, Brian
<us*****@julietremblay.com.invalid> wrote:
Jamie Jackson wrote:
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


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.


What do you mean by fragile, in this case? I would consider something
fragile that has the potential to degrade incomprehensibly. Is that
what you mean?
2) I'd like to do a two column checkbox thingamabob using
stylesheets.


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.


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="leftColumn">
<label for="item1">Oranges</label>
<input id="item1" name="item1" class="checkbox" type="checkbox"><br>
<label for="item2">Oranges</label>
<input id="item2" name="item1" class="checkbox" type="checkbox"><br>
</div>
<div class="rightColumn">
<label for="item1">Oranges</label>
<input id="item1" name="item1" class="checkbox" type="checkbox"><br>
<label for="item2">Oranges</label>
<input id="item2" name="item1" class="checkbox" type="checkbox"><br>
</div>

Would that sort of thing still offend your sensibilities?

Thanks,
Jamie
Jul 20 '05 #6

"Jamie Jackson" <mc*************************@hotmail.com> wrote in message
news:on********************************@4ax.com...
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?


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.

Jul 20 '05 #7
Jamie Jackson wrote:
Brian wrote:
floats make things fragile
What do you mean by fragile, in this case?


Floats are tricky. I think the consensus in ciwas is that no browser
handles floats perfectly.
I would consider something fragile that has the potential to
degrade incomprehensibly. Is that what you mean?
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.
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.


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>?


If you have one list, it should be in one UL or OL element.
I think I would agree with that; however, I hadn't been planning to
use real LISTS, just creating sets of checkboxes/labels.
Yeah, I was thinking about lists when I read your post, and projected
that onto your problem. Sorry about that.
<div class="leftColumn">
<label for="item1">Oranges</label>
<input id="item1" name="item1" class="checkbox" type="checkbox"><br>
<label for="item2">Oranges</label>
<input id="item2" name="item1" class="checkbox" type="checkbox"><br>
</div>
<div class="rightColumn">
<label for="item1">Oranges</label>
<input id="item1" name="item1" class="checkbox" type="checkbox"><br>
<label for="item2">Oranges</label>
<input id="item2" name="item1" class="checkbox" type="checkbox"><br>
</div>

Would that sort of thing still offend your sensibilities?


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/
Jul 20 '05 #8
On Tue, 29 Jun 2004 15:41:51 -0400, "Harlan Messinger"
<h.*********@comcast.net> wrote:
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.


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
Jul 20 '05 #9
On Tue, 29 Jun 2004 15:50:00 -0400, Brian
<us*****@julietremblay.com.invalid> wrote:
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.


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

Jamie

Jul 20 '05 #10
Jamie Jackson <mc*************************@hotmail.com> wrote:
On Tue, 29 Jun 2004 15:41:51 -0400, "Harlan Messinger"
<h.*********@comcast.net> wrote:
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.


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?).


Agreed.
--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.
Jul 20 '05 #11
On Tue, 29 Jun 2004 16:10:46 -0400, Jamie Jackson
<mc*************************@hotmail.com> wrote:
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?).


Or, two adjacent tables positioned or floated into position.
Jul 20 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

20 posts views Thread by PC Datasheet | last post: by
3 posts views Thread by aaa2876 | last post: by
1 post views Thread by Carl Johansson | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.