PDA

Click to See Complete Forum and Search --> : aligning form labels using css

Hulk
01-22-2006, 06:05 PM
Hi all,
first post here.

quite new to css and im having trouble aligning my input text with the labels. I've been trying to find a easy to follow example/tut with not much luck. I know it has something to do with the margins and setting a width maybe?

i'd like the input text boxes to all line up vertically. the labels should have a left margin of 30px.

can anyone please help me out?

<label for="Fname">First Name:</label><Input text="Fname"><br />
<label for="Email">Emai:</label><Input text="Email"><br />
<label for="Fname">First Name:</label><Input text="Fname"><br />
<label for="Email">Email:</label><Input text="Email"><br />
<label for="Fname">First Name:</label><Input text="Fname"><br />
<label for="Email">Email:</label><Input text="Email"><br />

thanks- Chris
NogDog
01-22-2006, 08:22 PM
Here's an example of applying CSS to a form (using a more complex form as a sample):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Sample Form</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 1em;
background-color: white;
color: black;
font: medium arial, sans-serif;
}
form {
width: 20em;
margin: 0 auto;
padding: 0.5em;
border: solid 2px gray;
}
fieldset {
margin: 0.25em 0;
padding: 0.5em;
}
legend {
font-weight: bold;
}
form p {
margin: 0.3em 0;
line-height: 1.3em;
}
label {
float: left;
clear: left;
width: 7em;
}
input {
float: left;
clear: right;
}
#submit {
text-align: center;
}
#submit input {
float: none;
}
-->
</style>
</head>
<body>
<form action="script.php" method="post">
<h3>Enter Names and Email Addresses</h3>
<fieldset>
<legend>Email One</legend>
<p><label for="Fname1">First Name:</label><Input type="text" name="Fname1" id="Fname1"></p>
<p><label for="Email1">Email:</label><Input text="Email1"></p>
</fieldset>
<fieldset>
<legend>Email Two</legend>
<p><label for="Fname2">First Name:</label><Input type="text" name="Fname2" id="Fname2"></p>
<p><label for="Email2">Email:</label><Input text="Email2"></p>
</fieldset>
<fieldset>
<legend>Email Three</legend>
<p><label for="Fname3">First Name:</label><Input type="text" name="Fname3" id="Fname3"></p>
<p><label for="Email3">Email:</label><Input text="Email3"></p>
</fieldset>
<p id="submit"><input type="submit" value="Submit"></p>
</form>
</body>
</html>
ray326
01-22-2006, 09:44 PM
Does everyone involved understand your HTML is screwed?

<label for="Fname"><First Name:</label><input type="text" id="Fname" name="Fname">

And the name/id "Fname" cannot be reused.
NogDog
01-22-2006, 10:09 PM
Does everyone involved understand your HTML is screwed?

<label for "Fname"><First Name:</label><input type="text" id="Fname" name="Fname">

And the name/id "Fname" cannot be reused.
LOL - like we should expect <label for "Fname"><First Name:</label> to validate? ;)

I shall go back and edit my example (after have copied-and-pasted from the original question).....
Hulk
01-22-2006, 10:10 PM
Does everyone involved understand your HTML is screwed?

errhhh you obviously not at all familar with xhtml, so try not to sound so macho yourself

eg: instead of <p>text to go here</p><br></br>
you would: <p> text to go here< /br>

thankyou for the sample. will give it a go

Cheers
Hulk
01-22-2006, 10:12 PM
sorry that must ahve come across very rude.
ive got my arms stuck so deep in this crazy css thats its frustrating me badly.

apoligies for un-needed talk. yes my code was invalid. my bad
sorry