Monday, November 29, 2021
04:38 AM (GMT +5)

Go Back   CSS Forums > Off Topic Section > Computers and Technology

Computers and Technology Discuss computer issues, topics, and technology. Ask your questions about computer related problems, software, gadgets, computer science & emerging technologies.

Reply Share Thread: Submit Thread to Facebook Facebook     Submit Thread to Twitter Twitter     Submit Thread to Google+ Google+    
 
LinkBack Thread Tools Search this Thread
  #1  
Old Friday, October 13, 2006
Junior Member
 
Join Date: Oct 2006
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
shams2 is on a distinguished road
Exclamation how to align forum input boxes with css?

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.
Reply With Quote
  #2  
Old Friday, October 13, 2006
Leonidas's Avatar
Administrator
 
Join Date: Mar 2000
Location: Islamabad
Posts: 556
Thanks: 330
Thanked 1,084 Times in 209 Posts
Leonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud of
Default

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.
__________________
So which of the favors of your Lord would you deny?
Reply With Quote
  #3  
Old Saturday, October 14, 2006
Junior Member
 
Join Date: Oct 2006
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
shams2 is on a distinguished road
Default

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.
Reply With Quote
  #4  
Old Saturday, October 14, 2006
Leonidas's Avatar
Administrator
 
Join Date: Mar 2000
Location: Islamabad
Posts: 556
Thanks: 330
Thanked 1,084 Times in 209 Posts
Leonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud ofLeonidas has much to be proud of
Default

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>
__________________
So which of the favors of your Lord would you deny?
Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


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


CSS Forum on Facebook Follow CSS Forum on Twitter

Disclaimer: All messages made available as part of this discussion group (including any bulletin boards and chat rooms) and any opinions, advice, statements or other information contained in any messages posted or transmitted by any third party are the responsibility of the author of that message and not of CSSForum.com.pk (unless CSSForum.com.pk is specifically identified as the author of the message). The fact that a particular message is posted on or transmitted using this web site does not mean that CSSForum has endorsed that message in any way or verified the accuracy, completeness or usefulness of any message. We encourage visitors to the forum to report any objectionable message in site feedback. This forum is not monitored 24/7.

Sponsors: ArgusVision   vBulletin, Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.