table to css

[Dave Saville]

I am trying to do a questionnaire type page. What I want is several
lines.
Each line is a question followed by a variable number of radio buttons.
It will be cgi generated.

Now this is easy if I (mis)use a table, but how do I do it with style
sheets?

I want the first radio button of each line to be aligned vertically but
I can only get them all over the place.

<style type="text/css" media="all">
#container, [nul]{display:table;width:100%;}
#left,
[nul]{display:table-cell;vertical-align:baseline;padding:1em;width:66%;}

#right,
[nul]{display:table-cell;vertical-align:baseline;padding:1em;width:33%;}

</style>

And then
<div id=container>
<div id=left>Question</div><div id=right>radios</div></div>

Does not align vertically, as if it is ignoring the width, and each
line has to be a div id=container. What it appears to be doing is
changing the width depending on how the question wraps if wider than
the width. Sorry but I am not in a position to post a URL yet.

There has got to be an easier way to do this - no wonder people use
tables for layout, it's so much easier

TIA

Regards

Dave Saville

NB switch saville for nospam in address

 

[William Tasso]

I am trying to do a questionnaire type page. What I want is several
lines.
Each line is a question followed by a variable number of radio
buttons. It will be cgi generated.

Now this is easy if I (mis)use a table, but how do I do it with style
sheets?

I want the first radio button of each line to be aligned vertically
but I can only get them all over the place.

<style type="text/css" media="all">
#container, [nul]{display:table;width:100%;}
#left,
[nul]{display:table-cell;vertical-align:baseline;padding:1em;width:66%;}

#right,
[nul]{display:table-cell;vertical-align:baseline;padding:1em;width:33%;}

</style>

And then
<div id=container>
<div id=left>Question</div><div id=right>radios</div></div>

you probably mean class (as opposed to id) and don't forget to quote your
values:

Does not align vertically, as if it is ignoring the width, and each
line has to be a div id=container. What it appears to be doing is
changing the width depending on how the question wraps if wider than
the width. Sorry but I am not in a position to post a URL yet.

to get an element to appear on its own 'line' it should be (or in) a block
container

There has got to be an easier way to do this - no wonder people use
tables for layout, it's so much easier

it's a mind-set thingie.

get a test page up on a cheap/free server if you need more specific
feedback.

 

[Dave Saville]

you probably mean class (as opposed to id) and don't forget to quote your
values:
<div class="question">

Yes - quick typing rather than cut n paste :-(

http://www.deezee.org/misc/test.html



Regards

Dave Saville

NB switch saville for nospam in address

 

[Richard]

Dave wrote:

There has got to be an easier way to do this - no wonder people use
tables for layout, it's so much easier

Tables are used because people refuse to learn new tricks.
Division has much more flexibility.
No need to use rowspan or colspan. Just code it and put it where you want.
Changing a division parameter does not effect divisions as changing a table
cell plays havoc with other cells.
If you had a column of table cells, can you change the size of only one
cell? Nooooooo.
But you can with a column of division cells.
Can you overlap table cells? Not! You can with division.

Learn and enjoy.

 

[William Tasso]

http://www.deezee.org/misc/test.html

how's this?: http://williamtasso.com/usenet/venueq.html

 

[Dave Saville]

how's this?: http://williamtasso.com/usenet/venueq.html

Sorry William I really want

question radio1 radio2 radio3 etc on the same line but for all the
radio1's to align vertically. As I said dead easy if I use a table.


Regards

Dave Saville

NB switch saville for nospam in address

 

[William Tasso]

Sorry William I really want

question radio1 radio2 radio3 etc on the same line but for all the
radio1's to align vertically.

ok - look again.

 

[Dave Saville]

ok - look again.

Thank you - Give the man a cigar Now to figure out *why* it works -
but I do still have a problem

I added

<h3>Comments</h3>
<textarea name="comment" value="", rows="6" cols="72"></textarea>

After your last </div>

The textarea come out below all the questions/buttons but the h3 is at
the right of the first row of buttons?

Regards

Dave Saville

NB switch saville for nospam in address

 

[William Tasso]

...
Now to figure out *why* it works

dissect it - it's fairly trivial

- but I do still have a problem

I added

<h3>Comments</h3>

should be a label IM(NS)HO

<textarea name="comment" value="", rows="6" cols="72"></textarea>

After your last </div>

The textarea come out below all the questions/buttons but the h3 is at
the right of the first row of buttons?

CSS: float/clear etc ...

updated: http://williamtasso.com/usenet/venueq.html

 

[Dave Saville]

http://williamtasso.com/usenet/venueq.html

Very nice! I guess I will need to read up on float & clear to
understand it and why the header went were it did.

Thanks ever so much

Regards

Dave Saville

NB switch saville for nospam in address