472,975 Members | 1,819 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,975 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 11482

"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...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
4
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

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.