471,610 Members | 1,337 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

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?

Aug 16 '07 #1
19 5089
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/

Aug 17 '07 #2
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
Aug 17 '07 #3
Brian Kendig <br***@enchanter.netwrites:
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 Jo***********@cl.cam.ac.uk

Aug 17 '07 #4
On Aug 17, 10:03 am, Jon Fairbairn <jon.fairba...@cl.cam.ac.ukwrote:
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.
Aug 17 '07 #5
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.
Aug 17 '07 #6
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/<c7**************************@NAXS.COM>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Aug 17 '07 #7
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/

Aug 17 '07 #8
Rik
On Fri, 17 Aug 2007 20:08:56 +0200, Brian Kendig <br***@enchanter.net>
wrote:
On Aug 17, 12:28 pm, "Jonathan N. Little" <lws4...@centralva.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
Aug 17 '07 #9
On Aug 17, 2:01 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
If you don't know how to do "it" in HTML, learn that first, before trying to
style it with CSS.
I know how to lay out the content with the checkbox immediately beside
the LI text. I was looking for help on how to style it so that the
checkboxes are lined up vertically. If this was not clear from my
initial explanation, I apologize.
(The picture does not really paint a picture. It looks like
deeply nested list with one-item sublists. Odd.)
If you don't understand what I'm describing from my initial
explanation or my picture, then I honestly don't know how to describe
it any better. If you *do* know what I'm describing, then I would
appreciate an example from you on how you feel I should have initially
presented it.

And yes, the picture is odd, because I selected one small part of the
tree for illustrative purposes, and that part happens to only have one-
item sublists. The structure of the data I have to work with is not
part of the scope of my question.
Aug 17 '07 #10
On Aug 17, 5:53 pm, "Jonathan N. Little" <lws4...@centralva.net>
wrote:
Not the point, maybe you should learn more about how to post on Usenet.
I've been posting on Usenet for a while and have learned all I need,
thanks. You should keep context in mind, and be sure to read the
thread to which you're replying. In this case there were only six
posts before yours, the thread was not complicated, and the sentence
which began "If you'd like to suggest a better approach" was not
referring to any one specific comment.

Usenet has certain rules of thumb which are helpful in complicated or
confusing situations. This was neither. If you felt that anything I
posted here was ambiguous to the point where you were not able to make
a reasonable guess as to what I meant, then I don't know what to
suggest.
Aug 17 '07 #11
Brian Kendig wrote:
On Aug 17, 5:53 pm, "Jonathan N. Little" <lws4...@centralva.net>
wrote:
>Not the point, maybe you should learn more about how to post on Usenet.

I've been posting on Usenet for a while and have learned all I need,
thanks.
That may be so, but you obviously did not learn what you needed to. Pay
particular attention to GoogleGroups and quoting.

http://blinkynet.net/comp/uip5.html
The Usenet Improvement Project - Blinkynet

http://www.magicpub.com/netprimer/netiquette.html
Email and Newsgroup Etiquette

http://www.html-faq.com/etiquette/?quoting
alt.html FAQ: [Usenet Etiquette] How do I quote properly (appropriately)
on alt.html?
You should keep context in mind, and be sure to read the
thread to which you're replying. In this case there were only six
posts before yours, the thread was not complicated, and the sentence
which began "If you'd like to suggest a better approach" was not
referring to any one specific comment.
Does not matter, use should quote. Many of us that use real newsreaders
have 'read' messages not displayed.
>
Usenet has certain rules of thumb which are helpful in complicated or
confusing situations. This was neither. If you felt that anything I
posted here was ambiguous to the point where you were not able to make
a reasonable guess as to what I meant, then I don't know what to
suggest.
As with all 'written' conversations the time between statement and reply
may very and is rarely instantaneous unlike their 'oral' counterparts
which add an element of ambiguity. Again to remedy this just quote the
pertinent bits to which you are replying. And that is the preferred rule
of Usenet.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Aug 18 '07 #12
In article <cc***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@centralva.netwrote:
Many of us that use real newsreaders
have 'read' messages not displayed.
Some of us have online newsreaders that do not show even the
summaries of the articles already read. One such online reader is
MT-Newswatcher, sometimes called MT-Amnasia. They _can_ be
recovered in searches (mostly... if not too distant in time).

--
dorayme
Aug 18 '07 #13
Brian Kendig <br***@enchanter.netwrites:
On Aug 17, 5:53 pm, "Jonathan N. Little" <lws4...@centralva.net>
wrote:
>Not the point, maybe you should learn more about how to post on Usenet.

I've been posting on Usenet for a while and have learned all I need,
thanks. You should keep context in mind, and be sure to read the
thread to which you're replying.
Statements like that demonstrate that you have *not* learned how to post
on usenet. The thread to which I'm replying may not have arrived on every-
one else's servers, and it may never do so - usenet doesn't have guaranteed
delivery, you know.

Furthermore, the message to which I'm replying, assuming that it did arrive
at your server, may have expired and been deleted already.

Or, I may not be using a news reader which threads messages.
Usenet has certain rules of thumb which are helpful in complicated or
confusing situations. This was neither.
It also has guidelines for posting which are helpful in everyday situations,
including this one. One of those guidelines is to quote the proper context
for your reply, because "keeping context in mind", as you suggested above,
is not always possible because of infrastructure limitations.

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net
Aug 18 '07 #14
On Aug 18, 7:14 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
&bull;
I'm not replying to any specific thing you said in your post, and I
don't want to quote text just for the sake of quoting text, but
elsewhere in this thread I've been well-instructed on the fact that I
can't just post a followup without quoting anything. So, may this keep
the flames at bay. ;)

I just wanted to thank you for your advice; I appreciate the help.

Jonathan Little did suggest something in an earlier post which nails
what I'm trying to do, letting me position checkboxes exactly where I
want them while keeping their logical association with the list
elements, so I'm going to work with that.
Aug 18 '07 #15
On Aug 18, 4:15 pm, "Jonathan N. Little" <lws4...@centralva.net>
wrote:
See that is the misconception, Usenet is *not* a site.
By 'site' I meant 'NNTP server'. Please, give me a *little* credit
here.
Aug 18 '07 #16
In article
<11**********************@19g2000hsx.googlegroups. com>,
Brian Kendig <br***@enchanter.netwrote:
I was having a rotten day, and the "That post might not be there,
learn more about usenet" and "maybe you should learn more about how to
post on Usenet" comments just pushed my buttons.
So you admit you are a human being then? What is it like? I mean
what is it really like?

--
dorayme
Aug 19 '07 #17
rf
"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...
OK... Richard... it served to flush you out of your corner. For
my purposes, <g>, which is:

What is the cheapest but still very reliable server space that
can be hired in Australia?
I don't ever go for cheap (it's all tax deductable anyway), I go for
reliable. I use aussiehq (.com.au of course) and have done so for several
years. They used to go by the name of aussiehosts (and still have the
(redirected) URL) and they even used to hang about here in the newsgroups. I
have never had any problems with them.

IIRC they also sell hosting over there -->

You will have to choose from their offerings what you want. I buy stuff from
them in job lots (reseller plan (although I only onsell to my clients)) and
can sell it quite cheap. Far cheaper then what your or my ISP sell hosting
for :-)
I need several GBs.
What are you hosting, the internet?
Sure, I will be making enquiries. But maybe you or someone else
knows of some. Can I trust the yanks?
As to trust I don't know. Never used them. Browse over to AWW. There is
always a lively discussion about hosting happening there :-)

However if you want to add nearly half a second to _every_ round trip back
to your server, for _each_ file in your page, css, js and images included,
then host in the U S of A. The ping times, you know. 300ms just to get
there and back.

Also recall our recent discussions re download time. I get 500 kilobytes per
second from sites on the local backbone (.au, close to me). The very best I
get from the U S of A is about 50 kilobytes per second. The Pacific Ocean is
_very_ wide. Then again if your target demographic is over there...
Or best to stay with true
blue companies here?
*Here* is the operative word. My host is just next door to us (well, in
Brisbane or Canberra or wherever they are at the moment). They are Aussies.
They understand me when I have a question. You can even ring them up and
actually talk to a person, and you don't get some noddy head dipstick in
Mumbai :-)

--
Richard.
Aug 19 '07 #18
In article <SO******************************@comcast.com>,
Ed Mullen <ed@edmullen.netwrote:
(Now, where is that Travis, I am trying to beat him up but he
makes like a bit of wet soap when grabbed...)

I had a comment about this but then, for ONCE in my life, discretion
overcame me! ("Oh, Lord, how may I give thanks?")
Yes, best to keep out of it. I have tried to be low and vicious
and have a clear run at him without interference. But Travis is a
master at unflappable and this makes things hard.

Reminds me of a joke:

Several centuries ago, the Pope decided that all the Jews had to
leave the Vatican. Naturally there was a big uproar from the
Jewish community. So the Pope made a deal. He would have a
religious debate with the chief Rabbi of the Jewish community. If
the Jew won, the Jews could stay. If the Pope won, the Jews would
leave. The chief Rabbi's Latin wasn't very good - in fact, he
knew very little--but he was a man of great faith and well
respected in the Jewish community. The Pope agreed. What could be
easier than a silent debate?

The day of the great debate came. The Rabbi and the Pope sat
opposite each other for a full minute before the Pope raised his
hand and showed three fingers. The Rabbi looked back at him and
raised one finger. The Pope waved his fingers in a circle around
his head. The Rabbi pointed to the ground where he sat. The Pope
pulled out a wafer and a glass of wine. The Rabbi pulled out an
apple. The Pope stood up and said, "I give up. This man is too
good. The Jews can stay."

An hour later, the cardinals were all around the Pope asking him
what happened. The Pope said: "First I held up three fingers to
represent the Trinity. He responded by holding up one finger to
remind me that there was still one God common to both our
religions. Then I waved my finger around me to show him that God
was all around us. He responded by pointing to the ground and
showing that God was also right here with us. I pulled out the
wine and the wafer to show that God absolves us from our sins. He
pulled out an apple to remind me of original sin. He had an
answer for everything. What could I do?"

Meanwhile, the Jewish community had crowded around the Rabbi.
"What happened?" they asked. "Well," said the Rabbi, "First he
said to me that the Jews had three days to get out of here. I
told him that not one of us was leaving. Then he told me that
this whole city would be cleared of Jews. I let him know that we
were staying right here." "And then?" asked a woman. "I don't
know," said the Rabbi. "He took out his lunch and I took out
mine."

--
dorayme
Aug 21 '07 #19
dorayme wrote:
In article <SO******************************@comcast.com>,
were staying right here." "And then?" asked a woman. "I don't
know," said the Rabbi. "He took out his lunch and I took out
mine."
<VBG>

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Some people are like a Slinky toy - not really good for anything, but
you still can't help but smile when you shove them down the stairs.
Aug 21 '07 #20

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

11 posts views Thread by Jamie Jackson | last post: by
2 posts views Thread by deepa.ravikiran | last post: by
2 posts views Thread by Troels Thomsen | last post: by
1 post views Thread by Carl Johansson | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by CCCYYYY | last post: by
1 post views Thread by ZEDKYRIE | last post: by

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.