how to align forum input boxes with css?

shams2 · #1 Friday, October 13, 2006

salaam,
sorry i search this forum but didn't find where to post my question, i have web pages with many input boxes and thier labels, how i can align these with css, i mean the input boexes should be in one line? thanks in advanced for your help.

**Leonidas** · #2 Friday, October 13, 2006

First of all this is not CSS (Cascading Style Sheets) forum. The term CSS here refers to "Central Superior Services". I’ve moved your post to the most relevant section.

Regarding you question about the alignment of your input boxes, you can post your code here so I can have a look and help you fix it.

shams2 · #3 Saturday, October 14, 2006

label, input { display: block; }
label { width: 12em; }
input { clear: right; margin-left: 150px; }
the code above brings the boxes in one line the only problem is the labels and the input boxes are not arranged to each other i mean the input is above and label is bellow.

**Leonidas** · #4 Saturday, October 14, 2006

You only supplied CSS code and forgot the HTML - XHTML code. I can't help with looking at the entire code. Between The code below is an example of a CSS based tableless form. Hope this helps!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Advanced Form</title>
<style type="text/css">
<!--

body {
	font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}

.clear {
  clear: both;
}

form {
  font-size: 1.4em;
	width: 40em;
}


/* fieldset styling */
fieldset {
	margin: 1em 0; /*  space out the fieldsets a little*/
	padding: 1em;
	border : 1px solid #ccc;
	background-color:#F5F5F5
}

/* legend styling */
legend {
	font-weight: bold;
}

form p {
  position: relative;
	width: 100%;
}

/* style for  labels */
label {
	float: left;
	width: 10em;
}

#remember-me label {
  width: 4em;
}

/* style for required labels */
label .required {
	font-size: 0.83em;
	color:#760000;
}

/* style error messages */
label .feedback {
	position: absolute;
	margin-left: 11em;
	left: 200px;
  right: 0;
	font-weight: bold;
	color:#760000;
	padding-left: 18px;
	background: url(images/error.png) no-repeat left top;
}

/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback{
  width: 10em;
}

input {
  width: 200px;
}

input[type="text"], textarea {
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

input.radio, input.checkbox, input.submit {
  width: auto;
}

/* style form elements on focus */
input:focus, textarea:focus {
	background: #ffc;
}

input.radio {
  float: left;
	margin-right: 1em;
}

textarea {
	width: 300px;
	height: 100px;
}

/* Date of Birth form styling */

#monthOfBirthLabel, #yearOfBirthLabel {
  text-indent: -1000em;
	width: 0;
}

#dateOfBirth {
  width: 3em;
	margin-right: 0.5em;
}

#monthOfBirth {
  width: 10em;
	margin-right: 0.5em;
}

#yearOfBirth {
  width: 5em;
}

/* Color form styling */
#favoriteColor {
  margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}

#favoriteColor h2 {
  width: 10em;
	float: left;
	font-size: 1em;
	font-weight: normal;
}

#favoriteColor div {
  width: 8em;
	float: left;
}

#favoriteColor label {
  /*width: 3em;*/
	float: none;
	display: inline;
}

/*#favoriteColor p {
	margin: 0.3em 0;
}*/


-->
</style>
</head>

<body>

<form id="comments_form" action="#" method="post">

<fieldset>
	<legend>Your Contact Details</legend>
	<p>
	<label for="author">Name: <span class="required">(Required)</span></label>
	<input name="author" id="author" type="text" />
	</p>
	
	<p>
	<label for="email">Email Address: </label>
	<input name="email" id="email" type="text" />
	</p>
	
	<p>
	<label for="url">Web Address:</label>
	<input name="url" id="url" type="text" />
	</p>
</fieldset>

<fieldset>
	<legend>Personal Information</legend>
	
	<p>
	<label for="author">Place of Birth: </label>
	<select>
  <option value="USA" selected="selected">USA</option>
  <option value="UK">United Kingdom</option>
  </select>
	</p>
	
	<p>
	<label for="dateOfBirth">Date of Birth:</label>
  <input name="dateOfBirth" id="dateOfBirth" type="text"  />
	
  <label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
  <select name="monthOfBirth" id="monthOfBirth">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  </select>
	
  <label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
  <input name="yearOfBirth" id="yearOfBirth" type="text" />
	</p>
	
	<fieldset id="favoriteColor">
	<h2>Favorite Color:</h2>
	
	<div>
	<p>
	<input class="checkbox" id="red" name="red" type="checkbox" value="red" />
	<label>red</label>
	</p>
	
	<p>
	<input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellow" />
	<label>yellow</label>
	</p>
	
	<p>
	<input class="checkbox" id="pink" name="pink" type="checkbox" value="pink" />
	<label>pink</label>
	</p>
	
	<p>
	<input class="checkbox" id="green" name="green" type="checkbox" value="green" />
	<label>green</label>
	</p>
  </div>
	
	<div>
	<p>
	<input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />
	<label>orange</label>
	</p>
	
	<p>
	<input class="checkbox" id="purple" name="purple" type="checkbox" value="purple" />
	<label>purple</label>
	</p>
	
	<p>
	<input class="checkbox" id="blue" name="blue" type="checkbox" value="blue" />
	<label>blue</label>
	</p>
	
	<p>
	<input class="checkbox" id="other" name="other" type="checkbox" value="other" />
	<label>other</label>
	</p>	
  </div>
	<br class="clear" /> 
	</fieldset>
	

	
</fieldset>

<fieldset>
	<legend>Comments</legend>
	<p>
	<label for="text">Message: <span class="required">(Required)</span></label>
	<textarea name="text" id="text" cols="20" rows="10"></textarea>
	</p>
</fieldset>

<fieldset id="remember-me">
	<legend>Remember Me</legend>
		<p>
		<input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />
		<label for="remember-yes">Yes</label>
		</p>
		
		<p>
		<input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />
		<label for="remember-no">No</label>
		</p>
		
		<br class="clear" />
</fieldset>

<p><input id="submit" class="submit" name="submit" type="submit"/></p>


</form>
</body>
</html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
World Islamic Economic Forum (WIEF):Unleashing the potential of emerging markets	Najabat	Current Affairs	2	Friday, November 09, 2007 01:49 PM