How do I line up checkboxes vertically beside an indented list?

I want to have a set of nested UL elements where every LI has a
checkbox associated with it, and the checkboxes are all lined up
vertically either to the left or the right of the list. In other
words, something like this (my apologies if you're not using a fixed-
width font):

x - Item 1
x - Item 1a
x - Item 1b
x - Item 2
x - Item 2a
x - Item 2a1

or,

- Item 1 x
- Item 1a x
- Item 1b x
- Item 2 x
- Item 2a x
- Item 2a1 x

I want each checkbox to be associated with its list element - in other
words, I don't want to have the list items all in one div, and the
checkboxes to be all in a separate div beside it, because then they
might not line up properly - the list wouldn't be as tall as the
checkboxes.

How could I go about doing this?

Scripsit Brian Kendig:

I want to have a set of nested UL elements where every LI has a
checkbox associated with it, and the checkboxes are all lined up
vertically either to the left or the right of the list.

This might be a wrong approach, whatever the original problem was. I'd
suggest that you start with describing the original problem or goal and
illustrate your current approach with a URL. Basically, CSS is just about
optional styling, so before you even start considering CSS issues with a
page, you should have a page written, with valid and logical markup, so that
you naturally post the URL with your question.

In other
words, something like this (my apologies if you're not using a fixed-width
font):

No apology granted for the omission of a URL.

x - Item 1
x - Item 1a
x - Item 1b
x - Item 2
x - Item 2a
x - Item 2a1

That'll probably be confusing, with _both_ list bullets _and_ checkboxes. It
would (_if_ the approach as such is feasible) probably be better to suppress
the list bullets and let the checkboxes play their role too, in addition to
being input elements.

I want each checkbox to be associated with its list element - in other
words, I don't want to have the list items all in one div, and the
checkboxes to be all in a separate div beside it, because then they
might not line up properly - the list wouldn't be as tall as the
checkboxes.

Sorry, but that's too vague a description, and it's very difficult to see
what you have tried. The natural markup would have just ul, li, label, and
input elements and no div.

Vertical placement of checkboxes can be tricky, but is this about it, or
something else?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

I'd suggest that you start with describing the original problem or goal and
illustrate your current approach with a URL.

The original problem is that I have a hierarchy of items which need to
be able to be selected or deselected with checkboxes, and I want the
checkboxes lined up vertically for neatness.

Here is a URL to show what I'm trying to accomplish.

http://www.enchanter.net/listfoo.png

Brian Kendig <brian (AT) enchanter (DOT) net> writes:

I'd suggest that you start with describing the original problem or goal and
illustrate your current approach with a URL.

The original problem is that I have a hierarchy of items which need to
be able to be selected or deselected with checkboxes, and I want the
checkboxes lined up vertically for neatness.

Do you really want that? Lined up on the right, if one of
the items is long, it can be hard to see which checkbox
corresponds to the other items. If on the left and the
depth of nesting of ULs is large, the same thing applies.

Here is a URL to show what I'm trying to accomplish.

http://www.enchanter.net/listfoo.png

You offer payment with pictures of £5 notes, too, I suppose?

--
Jón Fairbairn Jon.Fairbairn (AT) cl (DOT) cam.ac.uk

On Aug 17, 10:03 am, Jon Fairbairn <jon.fairba... (AT) cl (DOT) cam.ac.uk> wrote:

Do you really want that? Lined up on the right, if one of
the items is long, it can be hard to see which checkbox
corresponds to the other items. If on the left and the
depth of nesting of ULs is large, the same thing applies.

I'll set the background of every other row to a different color to
avoid this.

I actually need to display four checkboxes for each row, so that the
user can see at a glance which areas of the application he has create,
read, update, and delete access on. You can see how putting four
checkboxes on each row, not lined up vertically, would be visual
chaos. But for the purposes of this example, one checkbox suffices.

You offer payment with pictures of £5 notes, too, I suppose?

If I knew how to do it in HTML and CSS, mate, then I wouldn't have
come here asking how to do it in HTML and CSS.

If you'd like to suggest a better approach, by the way, you're very
welcome.

The situation is that I have the entire web application represented by
a tree. An admin needs to be able to see and modify, for a given role,
exactly what areas of the application that user can use to create,
update, modify, or delete data.

I think the most straightforward approach is to display the
hierarchical site tree as nested UL elements and have four columns of
checkboxes lined up beside it. If you can think of something better,
I'm all ears.

Brian Kendig wrote:

If you'd like to suggest a better approach, by the way, you're very
welcome.

You who? Please quote in Usenet.

The situation is that I have the entire web application represented by
a tree. An admin needs to be able to see and modify, for a given role,
exactly what areas of the application that user can use to create,
update, modify, or delete data.

Okay.

I think the most straightforward approach is to display the
hierarchical site tree as nested UL elements and have four columns of
checkboxes lined up beside it. If you can think of something better,
I'm all ears.

Okay, but I did show one possible example in this thread

http://message-id.net/<c7e25$46c5a548$40cba7a7$9157 (AT) NAXS (DOT) COM>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Scripsit Brian Kendig:

If I knew how to do it in HTML and CSS, mate, then I wouldn't have
come here asking how to do it in HTML and CSS.

If you don't know how to do "it" in HTML, learn that first, before trying to
style it with CSS. Here "it" means the logical structure and corresponding
markup, as far as possible, with some realistic (though perhaps not quite
real) content. Ask in c.i.w.a.html or c.i.w.a.site-design if you need help
with that part. Include sufficient content to give an idea of what you are
really doing. (The picture does not really paint a picture. It looks like
deeply nested list with one-item sublists. Odd.)

Write down 100 times: CSS is for optional presentational suggestions.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On Aug 17, 12:28 pm, "Jonathan N. Little" <lws4... (AT) centralva (DOT) net>
wrote:

Brian Kendig wrote:
If you'd like to suggest a better approach, by the way, you're very
welcome.

You who? Please quote in Usenet.

You may want to see if your newsreader will let you view Usenet posts
as a tree, so that it's easy to see which post mine was in reply to.
If you're using Google Groups, then click on 'Options' by the thread
title near the top of the page, then 'View as tree'.

In this particular situation, however, 'you' can refer to anyone you'd
like it to; if there's anyone who feels like offering a better
solution, feel free.

Okay, but I did show one possible example in this thread
http://message-id.net/<c7e25$46c5a548$40cba7a7$9... (AT) NAXS (DOT) COM

I'll have a look - thank you very much.

On Fri, 17 Aug 2007 20:08:56 +0200, Brian Kendig <brian (AT) enchanter (DOT) net>
wrote:

On Aug 17, 12:28 pm, "Jonathan N. Little" <lws4... (AT) centralva (DOT) net
wrote:
Brian Kendig wrote:
If you'd like to suggest a better approach, by the way, you're very
welcome.

You who? Please quote in Usenet.

You may want to see if your newsreader will let you view Usenet posts
as a tree, so that it's easy to see which post mine was in reply to.

That post might not be there, learn more about usenet.
--
Rik Wasmus