473,324 Members | 2,257 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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 11500

"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: Steve | last post by:
I'm not sure if I should be using tables here to structure the layout or if CSS is okay. I have a data entry form in which I have floated the labels to one side, and given them a specific width....
6
by: Timo | last post by:
I have this list of checkboxes displaying properly in Opera and IE, but cannot get it in Firefox. For some reason, in FF, the checkboxes creep farther and farther to the right across the page,...
7
by: pizzy | last post by:
PROBLEM: I CAN'T GET THE LAST RESUTS TO WORK CORRECTLY. I WOULD PROVIDE THE CODE (AND WILL IF REQUESTED). BUT IN MY OWN WORDS I AM TRYING TO HAVE THE FIRST FORM DYNAMICALLY CREATE INPUT BOXES...
20
by: PC Datasheet | last post by:
How can the label for a checkbox and the labels for the options in an option group be addressed? When a checkbox gets the focus, Access draws a dotted box around the label. When an option group...
24
by: Mike Otten | last post by:
Any help greatly appreciated. The validated page is at: http://myweb.stedwards.edu/michaelo/ddtab.htm The trouble is with the radio buttons (2/3-down the left column). The radios are...
0
by: John Dalberg | last post by:
using VS 2005. I have an unordered list with list items which are displayed horizontally. Some of the list items have hyper links and some have checkboxes. The problem is that the...
1
by: pluggy | last post by:
Hello, I am trying to display, on an MS Access form (frm024), the contents of a table (tbl_TypeOfOrgs). The table has two fields, OrgTypeID and OrgType. It currently has 4 records. This table...
3
by: aaa2876 | last post by:
Hello everyone! I am in the process of setting up a client contact database for my office and I have run into a bit of a snag. The database I have allows for one address per client but some of...
1
by: Carl Johansson | last post by:
I have a virtual ListView (VirtualMode set to true). To make it more convenient for the users of the ListView to select its items, I've set the ListView's CheckBoxes property to true. However, in...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.