CSS Forums

CSS Forums (http://www.cssforum.com.pk/)
-   Computers and Technology (http://www.cssforum.com.pk/off-topic-section/computers-technology/)
-   -   how to align forum input boxes with css? (http://www.cssforum.com.pk/off-topic-section/computers-technology/5526-how-align-forum-input-boxes-css.html)

shams2 Friday, October 13, 2006 07:20 AM
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.

Leonidas Friday, October 13, 2006 07:21 PM
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 Saturday, October 14, 2006 05:51 AM
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 Saturday, October 14, 2006 07:05 AM
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>
[/CODE]


10:03 AM (GMT +5)

vBulletin, Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.