Topic: CSS form help Pages that link to <a href="https://ozoneasylum.com/backlink?for=10970" title="Pages that link to Topic: CSS form help" rel="nofollow" >Topic: CSS form help\

 
Author Thread
rickindy
Nervous Wreck (II) Inmate

From: Indianapolis, In USA
Insane since: Jan 2002

IP logged posted posted 05-09-2003 15:40 Edit Quote

I'm trying to lay out a form using CSS the way we used to lay them out using tables, i.e. the prompt on the left side and the response area on the right. I would also like to be able to do this inside a div of any size.
I have tried assorted combinations of nested divs, floats and other techniques, but so far no luck.

This was always a snap using tables, but somehow the way to do it using CSS has so far evaded me.
Any help would be appreciated.



Few problems in life can't be solved by chocolate

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 05-09-2003 16:16 Edit Quote

A few points to consider:

1. Perhaps tables are a good idea. Forms, after all, tend to be a type of tabular data, so there's nothing inheritly wrong with using tables to display them. Consider whether or not this is the case. Note that any tables that are used should be styled with CSS and not oldschool HTML properties such as cellpadding, cellborder, width, height, etc.

2. If you decide that tables aren't what you want, consider that it might be nice to use table *algorithms* to lay out the form, while still using normal <div> and <p> tags normally for your markup. There are special display values (such as display:table-row) that cause everyday tags to be treated as though they were table tags. This is theoretically a good solution to using CSS to lay out pages. However, IE/Win doesn't support it, so it's virtually useless.

3. The final resort is using floats. I suggest using the following structure for each field:

<div><div class="labelcontainer"><label for="formelement1">Your Name:</label></div><div class="inputcontainer"><input type="text" id="formelement1" ... ></div></div>

And then specifying the widths of both inner div's (that's important), and then try floating the left one to the left or the right one to the right. It'll be messy, though.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 05-09-2003 18:20 Edit Quote

rickindy: See the second example here:
www.alistapart.com/stories/practicalcss/

___________________
Emps

FAQs: Emperor

rickindy
Nervous Wreck (II) Inmate

From: Indianapolis, In USA
Insane since: Jan 2002

IP logged posted posted 05-09-2003 20:15 Edit Quote

Thanks!
That is just exactly what I wanted to do.


Few problems in life can't be solved by chocolate



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu