homepage Welcome to WebmasterWorld Guest from 54.237.213.31
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
how to space a form
kiwis



 
Msg#: 4369256 posted 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

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4369256 posted 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#: 4369256 posted 7:13 pm on Oct 1, 2011 (gmt 0)

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

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4369256 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4369256 posted 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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved