Y'all are probably tired of seeing my name...
I'm trying to lay out an order form. Every form I've looked at that is similar to what I want to do uses tables for the layout.
Can it be done reasonably easy using CSS? or is a 2 column table the answer?
JohnYup. For a quick example, visit <!-- m --><a class="postlink" href="http://mjw.cmich.edu/contact.php">http://mjw.cmich.edu/contact.php</a><!-- m -->
The following page will be up temporarily for the next couple months: <!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/calendarAddEvent.html">http://www.cm-life.com/pages/newdesign/ ... Event.html</a><!-- m -->
It's an example of a more complex form that contains just about every kind of form element.A few months back I completely converted my site from tables to CSS layout, however, the only use I have for tables these days is still the FORM.
It's a very easy way of laying out the boxes and the associated labels.
I don't think it's necessarily a bad thing to use tables for the presentation of data/forms anyway, it's when you use them to layout your entire page that's frowned upon.
I'm still relatively new to this too, so my word is not gospel.
I'll go away and think about a CSS method anyway.
PS, It seems I've no need now as GREG has come up with a solution.
Well done!thanks.
I think, since I don't give a damn if google can search my form, I'll just stick to a quick and easy table based layout.
It will make my life MUCH easier.
JohnI'd go for a table but maybe someday it'll be easy and quick to do CSS. Or maybe someday make it a project for yourself to figure it out for future use (i'm talking to myself here also!)
Here's a link on using TH in your table and how it helps disabled folks use your table more easily:
<!-- m --><a class="postlink" href="http://www.doghousestudio.com.au/ozwebweaver/tables2.html">http://www.doghousestudio.com.au/ozwebw ... bles2.html</a><!-- m -->
Here's a link to LABEL tag and how that helps associate elements in a form for disabled folks:
<!-- m --><a class="postlink" href="http://www.w3schools.com/html/attr_label.aspI">http://www.w3schools.com/html/attr_label.aspI</a><!-- m --> am one of the "disabled folks" generally it is preferable to say you are making your form more "accessible" to a wider audience.I figured I'd throw in my li'l example (<!-- m --><a class="postlink" href="http://www.pauljunior.no-ip.com/research/csslaidoutform.php">http://www.pauljunior.no-ip.com/researc ... utform.php</a><!-- m -->).
Originally posted by Paul Jr
I figured I'd throw in my li'l example (<!-- m --><a class="postlink" href="http://www.pauljunior.no-ip.com/research/csslaidoutform.php">http://www.pauljunior.no-ip.com/researc ... utform.php</a><!-- m -->).
Paul -
I've never seen this before. Can you explain what you're doing here:
div#form form div input, div#form form div textarea
Thanks!
JohnOriginally posted by Bigjohn
Paul -
I've never seen this before. Can you explain what you're doing here:
div#form form div input, div#form form div textarea
Thanks!
John
I'm grouping multiple selectors so I can apply the styles to both without having to type the same styles for both selectors.
I wouldn't have to do that, except I have a <textarea> tag thrown in there for the message body. So instead of doing it like this:
div#form form div input {
/*Blah blah blah*/
}
div#form form div textarea {
/*Blah blah blah again*/
}
I can assign styles to multiple selectors by separating them with a comma, like I did.
But if you're wondering why I've got all sorts of form div textarea ect., those are descendant selectors. So only the input which is a descendant of a div which is a descendant of a form which is a descendant of another div whose id is "form" will have those styles applied.
Since that's just an example page, I don't really have to do that; and in most cases, you don't. But it's just a habit I have.
More info here (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html">http://www.w3.org/TR/REC-CSS2/selector.html</a><!-- m -->).Originally posted by Robert Wellock
You are a faster typer.Originally posted by Robert Wellock
You are a faster typer.
Thank you.
I basically taught myself except for this really, really, really old book I got from my grandmother.
I'm trying to lay out an order form. Every form I've looked at that is similar to what I want to do uses tables for the layout.
Can it be done reasonably easy using CSS? or is a 2 column table the answer?
JohnYup. For a quick example, visit <!-- m --><a class="postlink" href="http://mjw.cmich.edu/contact.php">http://mjw.cmich.edu/contact.php</a><!-- m -->
The following page will be up temporarily for the next couple months: <!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/calendarAddEvent.html">http://www.cm-life.com/pages/newdesign/ ... Event.html</a><!-- m -->
It's an example of a more complex form that contains just about every kind of form element.A few months back I completely converted my site from tables to CSS layout, however, the only use I have for tables these days is still the FORM.
It's a very easy way of laying out the boxes and the associated labels.
I don't think it's necessarily a bad thing to use tables for the presentation of data/forms anyway, it's when you use them to layout your entire page that's frowned upon.
I'm still relatively new to this too, so my word is not gospel.
I'll go away and think about a CSS method anyway.
PS, It seems I've no need now as GREG has come up with a solution.
Well done!thanks.
I think, since I don't give a damn if google can search my form, I'll just stick to a quick and easy table based layout.
It will make my life MUCH easier.
JohnI'd go for a table but maybe someday it'll be easy and quick to do CSS. Or maybe someday make it a project for yourself to figure it out for future use (i'm talking to myself here also!)
Here's a link on using TH in your table and how it helps disabled folks use your table more easily:
<!-- m --><a class="postlink" href="http://www.doghousestudio.com.au/ozwebweaver/tables2.html">http://www.doghousestudio.com.au/ozwebw ... bles2.html</a><!-- m -->
Here's a link to LABEL tag and how that helps associate elements in a form for disabled folks:
<!-- m --><a class="postlink" href="http://www.w3schools.com/html/attr_label.aspI">http://www.w3schools.com/html/attr_label.aspI</a><!-- m --> am one of the "disabled folks" generally it is preferable to say you are making your form more "accessible" to a wider audience.I figured I'd throw in my li'l example (<!-- m --><a class="postlink" href="http://www.pauljunior.no-ip.com/research/csslaidoutform.php">http://www.pauljunior.no-ip.com/researc ... utform.php</a><!-- m -->).
Originally posted by Paul Jr I figured I'd throw in my li'l example (<!-- m --><a class="postlink" href="http://www.pauljunior.no-ip.com/research/csslaidoutform.php">http://www.pauljunior.no-ip.com/researc ... utform.php</a><!-- m -->).
Paul -
I've never seen this before. Can you explain what you're doing here:
div#form form div input, div#form form div textarea
Thanks!
JohnOriginally posted by Bigjohn
Paul -
I've never seen this before. Can you explain what you're doing here:
div#form form div input, div#form form div textarea
Thanks!
John
I'm grouping multiple selectors so I can apply the styles to both without having to type the same styles for both selectors.
I wouldn't have to do that, except I have a <textarea> tag thrown in there for the message body. So instead of doing it like this:
div#form form div input {
/*Blah blah blah*/
}
div#form form div textarea {
/*Blah blah blah again*/
}
I can assign styles to multiple selectors by separating them with a comma, like I did.
But if you're wondering why I've got all sorts of form div textarea ect., those are descendant selectors. So only the input which is a descendant of a div which is a descendant of a form which is a descendant of another div whose id is "form" will have those styles applied.
Since that's just an example page, I don't really have to do that; and in most cases, you don't. But it's just a habit I have.
More info here (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html">http://www.w3.org/TR/REC-CSS2/selector.html</a><!-- m -->).Originally posted by Robert Wellock
You are a faster typer.Originally posted by Robert Wellock You are a faster typer.
Thank you.
I basically taught myself except for this really, really, really old book I got from my grandmother.