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- ChrisHere'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>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.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).....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
Cheerssorry 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
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- ChrisHere'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>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.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).....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
Cheerssorry 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