homepage Welcome to WebmasterWorld Guest from 54.234.60.133
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
how to space a form
kiwis




msg:4369258
 7:10 pm on Sep 30, 2011 (gmt 0)

I've got a form and it used to be places in a table. Trying not to use tables how can I set up my form where it is all equally spaced and looking nice? right now all my text boxes do not line up and the text before hand is of different lengths etc?

 

penders




msg:4369279
 8:31 pm on Sep 30, 2011 (gmt 0)

One way is to set the labels as display:inline-block, which then allows you to set a width so that they all line up.

kiwis




msg:4369583
 7:13 pm on Oct 1, 2011 (gmt 0)

but doing so doesn't line all my textboxes up?

penders




msg:4369594
 8:55 pm on Oct 1, 2011 (gmt 0)

Well, this might depend on your markup and what you are trying to achieve. Perhaps if you post your code we can have a look.

For example, the following produces a nice layout with all the text boxes lined up...

HTML:
<form class="nice-layout" action=""> 
<div>
<label for="ctrlName">Your Name:</label>
<input type="text" name="ctrlName" id="ctrlName" value="">
</div>
<div>
<label for="ctrlTel">Your Telephone Number:</label>
<input type="text" name="ctrlTel" id="ctrlTel" value="">
</div>
<div>
<label for="ctrlColour">Your Favourite Colour:</label>
<input type="text" name="ctrlColour" id="ctrlColour" value="">
</div>
</form>


CSS:
form.nice-layout div { 
margin: 2px 0; /* Separate the controls for the benefit of IE */
}
form.nice-layout label {
display: inline-block;
width: 14em;
text-align: right;
}

rocknbil




msg:4370171
 5:07 pm on Oct 3, 2011 (gmt 0)

Here's another approach, avoiding div-itis using semantic elements and because, well, I love floats. :-)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
p, label, input { float: left; }
form, p { width: 22em; padding:0; }
form { margin: 0 auto; }
p { margin: 2px 0; }
p#submit-me { text-align: center; }
p#submit-me input { display: block; float: none; width: 6em; margin: auto; }
label { display: block; width: 10em; margin-right: 6px; text-align: right; }
input { width: 12em; }
</style>
</head>
<body>
<form class="nice-layout" action="">
<p>
<label for="ctrlName">Your Name:</label>
<input type="text" name="ctrlName" id="ctrlName" value="">
</p>
<p>
<label for="ctrlTel">Your Telephone Number:</label>
<input type="text" name="ctrlTel" id="ctrlTel" value="">
</p>
<p>
<label for="ctrlColour">Your Favourite Colour:</label>
<input type="text" name="ctrlColour" id="ctrlColour" value="">
</p>
<p id="submit-me"><input type="submit" value="submit"></p>
</form>
</body>
</html>

[edited by: alt131 at 12:49 pm (utc) on Nov 27, 2011]
[edit reason] Side Scroll [/edit]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved