?
Solved

Format layout of a form using CSS

Posted on 2007-10-13
5
Medium Priority
?
2,003 Views
Last Modified: 2012-06-27
I want to use CSS to put space between controls on a form like table's cellspacing. Would anyone please teach me how to format layout of a form using CSS instead of table? Thanks.
0
Comment
Question by:ksfok
  • 4
5 Comments
 
LVL 28

Expert Comment

by:TName
ID: 20073152
You can use e.g. divs to position the elements in "rows" and use the margin property of the elements contained within the form to manage the space between them. Have a look at the box model definitions for width, margin, and so on:

http://www.w3.org/TR/REC-CSS2/box.html


A very simple example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style>
input { margin: 10px 6px; }
.buttonClass{ margin-left: 50px; }
div.wrapper { margin: 10px 6px; padding:4px; width;600px;}
</style>
</head>

<body>
      <form>
              <div class="wrapper">
            <input type="text">
                  <input type="text">
                  </div>
                  
                  <div class="wrapper">
            <input type="text">
                  <input type="text">
                  </div>
                  
                  <div class="wrapper">
            <input type="text">
                  <input class="buttonClass" type="button" value="Button">
                  </div>                  
      </form>
</body>
</html>
0
 
LVL 28

Expert Comment

by:TName
ID: 20073166
Sorry, there's a typo here: width;600px;
It should be      width:600px;



Also, keep in mind that unlike a table, a form is just an container that doesn't  apply any structure to it's contents.

BTW, the margins can be declared e.g.
someelement { margin: 14px; }   all margins will have the same value (14px)
someelement { margin: 0 0 6px 4px; }     this defines the values for       top (0px) - right (0px)  - bottom (6px) - left (4px)
someelement { margin: 4px 8px; }          this defines the values for       top and  bottom (4px)  - left and right (8px)
0
 
LVL 28

Expert Comment

by:TName
ID: 20073177
Also, to test, it might be a good idea to give the form and the divs a border, so you can see the position and the dimensions of these elements and be able to judge the exact effect if you change any padding or margin value:

form, div { border:1px solid #ddd; }
0
 

Author Comment

by:ksfok
ID: 20074055
One more question:
How can a caption "Message" and  TEXTAREA be lined up together with caption placed on the top to the left of TEXTAREA and not dropped to the bottom?  
0
 
LVL 28

Accepted Solution

by:
TName earned 2000 total points
ID: 20074121
Have a look at this (as I didn't know what element you mean by "caption", I used a label *and* a span):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
 div.wrapper { margin: 10px 6px; padding:4px; width;600px;}
 #label1 { float:left; margin-right:8px; }
 #span1 { float:left; margin-right:8px; }
</style>
</head>

<body>
<form>
        <div class="wrapper">
            <label id="label1" for="txt1">Textarea Label</label>
            <textarea cols="35" rows="4" id="txt1">Test</textarea>
        </div>      
        
        <div class="wrapper">
        <span id="span1">Textarea Span</span>
        <textarea cols="35" rows="4" id="txt2">Test</textarea>  
         </div>              
</form>
</body>
</html>
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month15 days, 16 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question