Hello world !!
Could I get some help to make a nice layout with CSS on the following URL: <!-- m --><a class="postlink" href="http://www.brasiltravel.com/FIG/join5.php">http://www.brasiltravel.com/FIG/join5.php</a><!-- m -->
Apreciate any help
Sandro27<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Conforming HTML 4.01 Transitional Template
</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"">
<style type="text/css">
label {
display: block;
float: left;
width: 10em;
text-align: right;
}
form div { clear:both; }
div#formdiv {
border: 1em solid #069;
background: #ccc;
padding: 1em;
}
</style>
</head>
<body>
<div id="formdiv">
<form action="submit.php" method="post" enctype=
"multipart/form-data" name="myForm" onsubmit=
"return validate(this)">
<div>
<label>User Name</label> <input name="user-name" type=
"text">
</div>
<div>
<label>E-mail</label> <input name="email" type="text"
onchange=
"if (!this.value.isEmailAddress()) {alert(); this.value = ''; this.focus()}">
</div>
<div>
<label>Confirm e-mail</label> <input name="confemail"
type="text" onchange=
"if (this.value != this.form.email.value) {alert(); this.value = ''; this.focus()}">
</div>
<div>
<label>Password</label> <input name="password" type=
"password" onchange=
"if (this.value.length < 1 || this.value.length > 5) {alert(); this.value = ''; this.focus()}">
</div>
<div>
<label>Confirm Password</label> <input name=
"confpassword" type="password" onchange=
"if (this.value != this.form.password.value) {alert(); this.value = ''; this.focus()}">
</div>
<div>
<label>Country</label><select name="country">
<option value="United States">
United States
</option>
<option value="Canada">
Canada
</option>
<option value="United Kingdom">
United Kingdom
</option>
<option value="Afghanistan">
Afghanistan
</option>
<option value="Albania">
Albania
</option>
<option value="Algeria">
Algeria
</option>
<option value="American Samoa">
American Samoa
</option>
<option value="Andorra">
Andorra
</option>
<option value="etc, etc, etc">
. . .
</option>
<option value="Zaire">
Zaire
</option>
<option value="Zambia">
Zambia
</option>
<option value="Zimbabwe">
Zimbabwe
</option>
</select>
</div>
<div>
<label>city</label><input name="city" type="text">
</div>
<div>
<label>Main Interests</label> <select name="interest">
<option value="Music" selected>
Music
</option>
<option value="Sports">
Sports
</option>
<option value="2508412">
Culture
</option>
<option value="2508194">
Eating out
</option>
<option value="2508195">
Beaches
</option>
<option value="2508196">
Adventure
</option>
<option value="2508197">
History
</option>
<option value="2508198">
Nightlife
</option>
<option value="2508202">
Ecology
</option>
<option value="2508199">
Shopping
</option>
<option value="2508203">
Other
</option>
</select>
</div>
<div>
<label>Gender</label> <select name="gender">
<option value="M" selected>
Male
</option>
<option value="F">
Female
</option>
</select>
</div>
<div>
<input name="level" type="checkbox" id="level" value=
"2"> I have read and I agree to the <a href=http://www.webdeveloper.com/forum/archive/index.php/"" target=
"_blank">terms & conditions</a>
</div>
<div>
<button type="submit">Submit >></button>
</div>
</form>
</div>
</body>
</html>I've attached a CSS file that contains pretty much all the styles you need for forms. It's pretty flexible and uses the same sort of philosophy as ray326's code. The basic HTML to use my CSS styles is:
<p class="formItems">
<span>This is a special note about the form field below.
It doesn't need a <label> tag.
</span>
</p>
<p class="formItems">
<label for="someInput">Form Field Name</label>
<span><input type="text" name="someInput" id="someInput" />
<span class="spacer"> </span>
</p>
If you need to group several form fields together, get acquainted with the <fieldset> (<!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_fieldset.asp">http://www.w3schools.com/tags/tag_fieldset.asp</a><!-- m -->) and <legend> (<!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_legend.asp">http://www.w3schools.com/tags/tag_legend.asp</a><!-- m -->) tags.
EDIT:
And know what I did? Forgot to attach the file. One sec...Ah yes. Much better. 
Just give the attached file a .css file extension instead of .txt and use the @import (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/cascade.html#x6">http://www.w3.org/TR/CSS21/cascade.html#x6</a><!-- m -->[/url) method to import the style sheet to your pages.Thanks lot. That will help a lot. The only problem is that because I have 2 tables next to each other , the code doesn纾
Could I get some help to make a nice layout with CSS on the following URL: <!-- m --><a class="postlink" href="http://www.brasiltravel.com/FIG/join5.php">http://www.brasiltravel.com/FIG/join5.php</a><!-- m -->
Apreciate any help
Sandro27<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Conforming HTML 4.01 Transitional Template
</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"">
<style type="text/css">
label {
display: block;
float: left;
width: 10em;
text-align: right;
}
form div { clear:both; }
div#formdiv {
border: 1em solid #069;
background: #ccc;
padding: 1em;
}
</style>
</head>
<body>
<div id="formdiv">
<form action="submit.php" method="post" enctype=
"multipart/form-data" name="myForm" onsubmit=
"return validate(this)">
<div>
<label>User Name</label> <input name="user-name" type=
"text">
</div>
<div>
<label>E-mail</label> <input name="email" type="text"
onchange=
"if (!this.value.isEmailAddress()) {alert(); this.value = ''; this.focus()}">
</div>
<div>
<label>Confirm e-mail</label> <input name="confemail"
type="text" onchange=
"if (this.value != this.form.email.value) {alert(); this.value = ''; this.focus()}">
</div>
<div>
<label>Password</label> <input name="password" type=
"password" onchange=
"if (this.value.length < 1 || this.value.length > 5) {alert(); this.value = ''; this.focus()}">
</div>
<div>
<label>Confirm Password</label> <input name=
"confpassword" type="password" onchange=
"if (this.value != this.form.password.value) {alert(); this.value = ''; this.focus()}">
</div>
<div>
<label>Country</label><select name="country">
<option value="United States">
United States
</option>
<option value="Canada">
Canada
</option>
<option value="United Kingdom">
United Kingdom
</option>
<option value="Afghanistan">
Afghanistan
</option>
<option value="Albania">
Albania
</option>
<option value="Algeria">
Algeria
</option>
<option value="American Samoa">
American Samoa
</option>
<option value="Andorra">
Andorra
</option>
<option value="etc, etc, etc">
. . .
</option>
<option value="Zaire">
Zaire
</option>
<option value="Zambia">
Zambia
</option>
<option value="Zimbabwe">
Zimbabwe
</option>
</select>
</div>
<div>
<label>city</label><input name="city" type="text">
</div>
<div>
<label>Main Interests</label> <select name="interest">
<option value="Music" selected>
Music
</option>
<option value="Sports">
Sports
</option>
<option value="2508412">
Culture
</option>
<option value="2508194">
Eating out
</option>
<option value="2508195">
Beaches
</option>
<option value="2508196">
Adventure
</option>
<option value="2508197">
History
</option>
<option value="2508198">
Nightlife
</option>
<option value="2508202">
Ecology
</option>
<option value="2508199">
Shopping
</option>
<option value="2508203">
Other
</option>
</select>
</div>
<div>
<label>Gender</label> <select name="gender">
<option value="M" selected>
Male
</option>
<option value="F">
Female
</option>
</select>
</div>
<div>
<input name="level" type="checkbox" id="level" value=
"2"> I have read and I agree to the <a href=http://www.webdeveloper.com/forum/archive/index.php/"" target=
"_blank">terms & conditions</a>
</div>
<div>
<button type="submit">Submit >></button>
</div>
</form>
</div>
</body>
</html>I've attached a CSS file that contains pretty much all the styles you need for forms. It's pretty flexible and uses the same sort of philosophy as ray326's code. The basic HTML to use my CSS styles is:
<p class="formItems">
<span>This is a special note about the form field below.
It doesn't need a <label> tag.
</span>
</p>
<p class="formItems">
<label for="someInput">Form Field Name</label>
<span><input type="text" name="someInput" id="someInput" />
<span class="spacer"> </span>
</p>
If you need to group several form fields together, get acquainted with the <fieldset> (<!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_fieldset.asp">http://www.w3schools.com/tags/tag_fieldset.asp</a><!-- m -->) and <legend> (<!-- m --><a class="postlink" href="http://www.w3schools.com/tags/tag_legend.asp">http://www.w3schools.com/tags/tag_legend.asp</a><!-- m -->) tags.
EDIT:
And know what I did? Forgot to attach the file. One sec...Ah yes. Much better. Just give the attached file a .css file extension instead of .txt and use the @import (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/cascade.html#x6">http://www.w3.org/TR/CSS21/cascade.html#x6</a><!-- m -->[/url) method to import the style sheet to your pages.Thanks lot. That will help a lot. The only problem is that because I have 2 tables next to each other , the code doesn纾