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 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>
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/
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.
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
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
"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.
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/
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
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
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.
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
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....
|
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,...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
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...
|
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...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
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....
|
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
|
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...
|
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...
| |