I'm currently busy with this informatics project(Build a sample datingsite) of mine. The problem is that I'm having some troubles with getting everything in the right place. Everything went fine until my email-box showed up at the wrong place(However, Dreamweaver displays it as I want it). I don't know how, I don't know why but I think it has to do something with my margins or paddings. Any help is appreciated!
Thanks in advance,
HTML+CSS(many words are dutch and I am a beginner to this all, so please don't expect a high quality code. I do have my HTML and CSS in separate files in my real project.):
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
border:0;
}
body {
background-color:#666;
font-family:corbel;
}
.container {
width: 1240px;
}
#HomeLeftSideRegister {
float:left;
}
.Form {
width: 1240px;
height: 600px;
display:block;
background-color:white;
border-radius: 10px;
margin-top: 111px;
margin-left:auto;
margin-right:auto;
}
#Registreernu {
margin-left:45px;
color: #3c948b;
font-size: 70px;
}
#Home-email {
color: #000;
font-size: 30px;
margin-top: 30px;
margin-left: 245px;
}
.Email {
color:#666;
font-weight:bold;
}
#useremail {
height: 22px;
width: 281px;
font-size: 20px;
border-width: 1px;
border-style:solid;
margin: 10px 0px 10px 149px;
}
.Gender {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
margin-left: 25px;
margin-top: 10px;
}
#gender-1 {
margin-left:150px;
}
.Radiolabel {
margin-top: 20px;
}
.Roundbutton {
background-color: #3c948b;
height: 74px;
width: 196px;
border-radius: 10px;
color: white;
font-size: 25px;
font-weight: 500;
float:none;
margin-left:193px;
}
#input {
margin-top: 220px;
}
#BlouseManImage {
float:right;
margin: 44px 70px auto auto;
}
</style>
</head>
<body>
<div id="Content" class="Container">
<section id="Home-Register">
<form class="Form" action="#" >
<div id="HomeLeftSideRegister">
<div id="Registreernu">REGISTREER NU</div>
<h2 id="Home-email">EMAIL:</h2>
<input name="email" type="email" class="Email" id="useremail"/>
<fieldset class="Gender" id="gender-1">
<H3>IK BEN EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="amman" class="styled-radio" value="Man"/>
Man
</label> <br />
<label>
<input type="radio" name="amvrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
</div>
</fieldset>
<fieldset class="Gender">
<H3 class="">IK ZOEK EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="likeman" class="styled-radio" value="Man"/>
Man
</label>
<br />
<label>
<input type="radio" name="likevrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
<br />
<label>
<input type="radio" name="likebeide" class="styled-radio" value="Beide"/>
Beide
</label>
</div>
</fieldset>
<div id="input">
<input type="submit" value="GA VERDER" class="Roundbutton">
</div>
</div>
<div id="BlouseManImage"><img src="Images/Man_Registreer.jpg" alt="Ik probeer het gewoon" height="535" width="577" />
</div>
</form>
</section>
<section id="reclame">
</section>
</div>
</body>
</html>
it seems you're another victim of the 'float' rule :-)
Your .Gender divs have float: left and it makes these divs go to the left and your email field had to appear to the right.
I solved it making the email field also float, so it gets there first... Also, I had to separate your 2 divs for gender because they are different and one needed to clear the float above so it goes to the row below.
Also, the html had to have name the 2 separated div classes, for GenderBen and GenderZoek.
(I don't know Dutch but I presume it stands for what you are and what you're looking for :-D)
The modified code is:
.Email {
color:#666;
font-weight:bold;
float: left;
}
.GenderBen {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
clear: both;
margin-left: 25px;
margin-top: 10px;
}
.GenderZoek {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
margin-left: 25px;
margin-top: 10px;
}
And the html with the changed divs:
<fieldset class="GenderBen" id="gender-1">
<H3>IK BEN EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="amman" class="styled-radio" value="Man"/>
Man
</label> <br />
<label>
<input type="radio" name="amvrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
</div>
</fieldset>
<fieldset class="GenderZoek">
<H3 class="">IK ZOEK EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="likeman" class="styled-radio" value="Man"/>
Man
</label>
<br />
<label>
<input type="radio" name="likevrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
<br />
<label>
<input type="radio" name="likebeide" class="styled-radio" value="Beide"/>
Beide
</label>
</div>
</fieldset>
Check the result here http://jsfiddle.net/yn8bjfbf/
Related
I am currently working on creating a sign up form html/css. I realised that different browsers work differently on the width of inputs. How can i rectify this issue and make sure that my sign up form is compatible with all browsers. My sign up form works perfectly for chrome as it is where i do coding on.
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: auto;
position: relative;
top: 80px;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
height: 350px;
margin: auto;
position: relative;
top: 100px;
border: 1px solid #000;
}
.fname input[type="text"] {
position: relative;
left: 115px;
top: 30px;
padding: 8px;
}
.lname input[type="text"] {
position: relative;
left: 314px;
top: -5.5px;
padding: 8px;
}
.userid input[type="text"] {
position: relative;
left: 115px;
padding: 8px;
top: 10px;
}
.pwd input[type="password"] {
position: relative;
padding: 8px;
left: 115px;
top: 25px;
}
.email input[type="email"] {
position: relative;
padding: 8px;
left: 115px;
top: 40px;
}
.btn button[type="submit"] {
position: relative;
left: 115px;
top: 55px;
padding: 8px;
width: 382px;
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
}
div.btn button[type="submit"]:hover {
background-color: rgb(255, 0, 0);
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="fname">
<label>
<input type="text" placeholder="First Name" name="fname" size="20">
</label>
</div>
<div class="lname">
<label>
<input type="text" placeholder="Last Name" name="lname" size="20">
</label>
</div>
<div class="userid">
<label>
<input type="text" placeholder="Username" name="userid" size="50">
</label>
</div>
<div class="pwd">
<label>
<input type="password" placeholder="Password" name="pwd" size="50">
</label>
</div>
<div class="email">
<label>
<input type="email" placeholder="Email Address" name="email" size="50">
</label>
</div>
<div class="btn">
<button type="submit">Create Account</button>
</div>
</form>
</div>
It's always a good idea to use something like normalize.css or any other CSS reset code (eric meyer css reset is very popular too) to reset CSS across all browsers.
Any browser come with it's defaults values for padding's,margins,widths, heights etc...
I guess it won't be an 100% solution but it will defiantly will take you closer to what you're looking for.
Do not jump to position relative and absolute. If you are new to all this, I can understand it seems the most natural way to go about positioning elements; just using a top and left position and that's that. But this is not how you should do it on the web!
Below you can find how I would do it.
Matan G. is right in pointing out that a CSS reset/normalize is often used, and I do so myself as well. However, before you do that (and considering you're new) it would be wise to take a look at the code that I posted and see if it makes any sense to you. If not, ask.
It is important to note that you should avoid these things when possible:
setting a fixed width to text items such as headings, paragraphs, lists.
using relative/absolute positioning. They are very useful but only when necessary.
using too many divs/classes than actually needed. Don't overcrowd your HTML.
* {box-sizing: border-box;}
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: 80px auto auto;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
margin: 20px auto auto;
border: 1px solid #000;
padding: 20px;
}
label {
display: block;
}
.name::after {
content: "";
display: table;
clear: both;
}
.name label:first-child {
margin-right: 20px;
}
.name label {
width: calc(100% / 2 - 10px);
float: left;
}
input, [type="submit"] {
padding: 8px;
margin-bottom: 20px;
width: 100%;
}
[type="submit"] {
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
margin: 0;
}
[type="submit"]:hover {
background-color: red;
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="name">
<label>
<input type="text" placeholder="First Name" name="fname">
</label>
<label>
<input type="text" placeholder="Last Name" name="lname">
</label>
</div>
<label>
<input type="text" placeholder="Username" name="userid">
</label>
<label>
<input type="password" placeholder="Password" name="pwd">
</label>
<label>
<input type="email" placeholder="Email Address" name="email">
</label>
<button type="submit">Create Account</button>
</form>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Forms</title>
<style>
.container{
width: 45%;
margin: auto;
}
.form-content{
margin: 40px;
}
.form-content input{
width: 100%;
}
label{
font-weight: bold;
}
input[type=text],[type=email],[type=tel],[type=date],[type=password]{
font-size: 16px;
border-radius: 5px;
background: #D9F1F7;
border: #000000;
padding: 10px;
}
input[type=submit]{
background: #4C63ED;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
color: #fff;
cursor: pointer;
}
input[type=submit]:hover{
background: #330EEF;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "container">
<form name="signup" method="get" action="">
<div class="form-content">
<label>First Name : </label>
<input type="text" name="firstname" />
</div>
<div class="form-content">
<label>Last Name : </label>
<input type="text" name="lastname" />
</div>
<div class="form-content">
<label>E-Mail : </label>
<input type="email" name="email" />
</div>
<div class="form-content">
<label>Telephone : </label>
<input type="tel" name="telephone" />
</div>
<div class="form-content">
<label>Date of Birth : </label>
<input type="date" name="dob" />
</div>
<div class="form-content">
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>
I have the following input textboxes, but I have aligned them in css with {width: xxx px;} which is not a good practice as it will not always align correctly.
<style>
#left_col p {
margin-top: 15px;
margin-bottom: 15px;
}
.notvis {
display: none;
margin-top: 5px;
margin-bottom: 5px;
}
#ws_doc_txt {
width: 350px;
}
#ws_end_txt {
width: 358px;
}
#ws_ns_txt {
width: 340px;
}
#ws_op_txt {
width: 25%;
}
#left_col {
float: left;
width: 480px;
padding: 0 0 0 0;
}
#right_col {
margin: 0 0 0 500px;
padding: 0 0 0 0;
text-align: left;
}
#textarea1 {
text-align: left;
}
#button1 {
margin-top: 20px;
margin-bottom: 20px;
}
.greentxt {
color: green;
}
.redtxt {
color: red;
}
</style>
</head>
<body>
<div id="left_col">
<p>
<label>
<input type="radio" name="ws_type" value="WSDL" id="ws_type_0">
WSDL</label>
<label>
<input type="radio" name="ws_type" value="NOWSDL" id="ws_type_1">
Endpoint</label>
</p>
<p id="ws_doc">
<label for="ws_doc">Document:</label>
<input type="text" name="ws_doc" id="ws_doc_txt">
</p>
<p id="ws_end">
<label for="ws_end">Endpoint:</label>
<input type="text" name="ws_end" id="ws_end_txt">
</p>
<p id="ws_ns">
<label for="ws_ns">Namespace:</label>
<input type="text" name="ws_ns" id="ws_ns_txt">
</p>
<p>
<label for="ws_op">Operation:</label>
<input type="text" name="ws_op" id="ws_op_txt">
</p>
<p>
<label for="ws_par">Parameter:</label>
<input type="text" name="ws_par" id="ws_par_txt">
</p>
<p>
<label for="ws_val">Value:</label>
<input type="text" name="ws_val" id="ws_val_txt">
</p>
<input type="submit" name="test" value="Test">
</div>
What would be the correct way to make the width of the textboxes always stop at a certain point on the right side? Also, is using <p> tags to make inputs behave like block elements wrong? Could I just use css to have them stay 1 at each line? Thanks
Consider using a table to have all inputs aligned on the left side. Giving all inputs the same width should then align them perfectly on the right as well.
#left_table input {
width:350px;
}
<table id="left_table">
<tr>
<td><label for="ws_doc">Document:</label></td>
<td><input type="text" name="ws_doc" id="ws_doc_txt">
</tr>
<tr>
<td><label for="ws_end">Endpoint:</label></td>
<td><input type="text" name="ws_end" id="ws_end_txt">
</tr>
<!-- etc... -->
</table>
if you want all your text boxes to have the same attribute with proper positioning you can try this(obviously set proper values):
input[type='text']
{
width: 270px;
height: 30px;
top: 167px;
left: 43px;
position:relative;
margin-left: 10px;
background-color: #F3F3F3;
border: 1px solid #D6D6C2;
border-radius: 3px;
}
I have the home.html page where I have a menu. On clicking the link I want the addnew.html page to load into the part of the code. I get the page but it is shown in an small section.....
Home.html
<!DOCTYPE html>
<head>
<title>Contact Manager</title>
<link rel="stylesheet" type="text/css" href="Style1.css" />
<script>
function Load_addnew()
{
document.getElementById("load_here").innerHTML='<object type="text/html" data="Addnew.html"></object>'
}
</script>
</head>
<body>
<div id="main">
<div id="logo">
<h1><center>Contact Manager</center></h1>
</div>
<div id="menu">
<ul>
<li>ADD NEW CONTACT</li>
<li>EDIT A CONTACT</li>
<li>DELETE CONTACT</li>
<li>SEARCH CONTACTS</li>
<li>LIST OF CONTACTS</li>
</div>
<div id="load_here"></div>
</div>
</body>
</html>
Style1.css
#main
{
background-repeat: repeat;
}
#logo a, #menu a
{
text-decoration: none;
}
#menu ul
{
line-height: 1.5em;
font-size: x-large;
float: left;
list-style: none;
}
#load_here
{
}
#logo
{
background-color:
}
#menu
{
margin: 0px auto;
left: 0px;
right: 0px;
}
AddNew.html
<!DOCTYPE HTML>
<html>
<head>
<title>Add Contact</title>
<link rel="stylesheet" type="text/css" href="addnew.css"></link>
</head>
<body>
<div id="main">
<ul id="errors">
<li id="info">Please recheck your form and Submit again: </li>
</ul>
<p id="success">Details Saved Successfully!!</p>
<div id="form1">
<form action="" method="" id="add_new">
<label for="Fname">First Name <span class="required">*</span>:</label>
<input type="text" id="First_Name" name="FirstName" value="" pattern="[A-Z a-z]" required="required" autofocus="autofocus"/>
<label for="Mname">Middle Name :</label>
<input type="text" id="Middle_Name" name="MiddleName" pattern="[A-Z a-z]" value=""/>
<label for="Lname">Last Name <span class="required">*</span>:</label>
<input type="text" id="Last_Name" name="LastName" value="" pattern="[A-Z a-z]" required="required"/>
<label for="dob">Date of Birth <span class="required">*</span>:</label>
<input type="date" id="DOB" name="dob" value="" required="required"/>
<label for="Phone1">Phone 1 <span class="required">*</span>:</label>
<input type="text" id="contactHome" name="Phone1" value="" required="required"/>
<label for="Phone2">Phone 2:</label>
<input type="text" id="contactOffice" name="Phone2" value=""/>
<label for="email">Email <span class="required">*</span>:</label>
<input type="email" id="email" name="Email" value="" placeholder="username#example.com" required="required"/>
<label for="Address">Address Line 1 <span class="required">*</span>:</label>
<input type="text" id="address" name="Address" required="required"/>
<label for="Address">Address Line 2:</label>
<input type="text" id="address1" name="Address1"/>
<label for="city">City <span class="required">*</span>:</label>
<input id="city" name="City" required="required" value=""/>
<label for="state">State <span class="required">*</span>:</label>
<input id="state" name="State" required="required" value=""/>
<label for="country">Country<span class="required">*</span>:</label>
<input id="country" name="Country" required="required" value=""/>
<label for="zip">PIN<span class="required">*</span>:</label>
<input id="zip" name="Zip" required="required" value=""/>
<input type="Submit" value="Submit" id="submit-button"/>
<input type="Reset" value="Reset" id="reset_button"/>
<p id="required-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div>
</div>
</body>
</html>
addnew.css
#main
{
width: 465px;
padding: 20px;
margin: 0px auto;
border: 6px solid #8fb5c1;
border-radius: 15px;
position: absolute;
background-repeat: repeat;
left: 0px;
right: 0px;
}
#main input, #main select, #main textarea, #main label
{
font-size: 15px;
margin-bottom: 2px;
}
#main input, #main select, #main textarea
{
width: 450px;
border: 1px solid #cee1e8;
margin-bottom: 20px;
padding: 4px;
}
#main input:focus, #main select:focus, #main textarea:focus
{
border: 1px solid #afcdd8;
background-color: #ebf2f4;
}
#main textarea
{
height: 80px;
resize: none;
}
#main label
{
display: block;
}
#main .required
{
font-weight: bold;
color: #f00;
}
#main #submit-button, #main #reset_button
{
width: 100px;
background-color:#333;
color:#FFF;
border:none;
display:block;
float:right;
margin-bottom:0px;
margin-right:6px;
background-color:#8FB5C1;
}
#main #submit-button:hover, #main #reset_button :hover
{
background-color: #A6CFDD;
}
#main #submit-button:active, #main #reset_button:active
{
position:relative;
top:1px;
}
#main #loading
{
width:32px;
height:32px;
display:block;
position:absolute;
right:130px;
bottom:16px;
display:none;
}
#errors
{
border: solid 1px #e58e8e;
padding: 10px;
margin: block;
width: 437px;
border-radius: 8px;
background: #ffe6e6 no-repeat 405px center;
display: none;
}
#errors li
{
padding: 2px;
list-style: none;
}
#errors li:before
{
content: '-';
}
#errors #info
{
font-weight: bold;
}
#errors #info:before
{
content: '';
}
#success
{
border: solid 1px #83d186;
padding: 25px 10px;
margin: 25px 0px;
display: block;
width: 437px;
border-radius: 8px;
background: #d3edd3 no-repeat 405px center;
font-weight: bold;
display: none;
}
#errors.visible, #success.visible
{
display: block;
}
#form1 #req-field-desc
{
font-style: italic;
}
Easy enough if you set a width and height.
#load_here object
{
width: 100%;
height: 500px;
}
The problem you'll run into is that there is proportional sizing for this. You'd have to specify both a width and a height, or it will default width: 300px; and height: 150px;. So, if you set width: 100%; but don't set height, it'll render the height at 150px, and vice versa.
I hope this helps. ^^
I am designing a html form using JSP. Below is my css file-
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial,
Helvetica, sans-serif;
font-size: 12px;
}
p,h1,form,button {
border: 0;
margin: 0;
padding: 0;
}
.spacer {
clear: both;
height: 1px;
}
/* ----------- My Form ----------- */
.myform {
margin: 0 auto;
width: 400px;
padding: 14px;
}
/* ----------- stylized ----------- */
#stylized {
border: solid 2px #b7ddf2;
background: #ebf4fb;
}
#stylized h1 {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
#stylized p {
font-size: 11px;
color: #666666;
margin-bottom: 20px;
border-bottom: solid 1px #b7ddf2;
padding-bottom: 10px;
}
#stylized label {
display: block;
font-weight: bold;
text-align: right;
width: 140px;
float: left;
}
#stylized .small {
color: #666666;
display: block;
font-size: 11px;
font-weight: normal;
text-align: right;
width: 140px;
}
#stylized input {
float: left;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #aacfe4;
width: 200px;
margin: 2px 0 20px 10px;
height: 30px;
}
#stylized checkbox {
float: left;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #aacfe4;
width: 10px;
margin: 2px 0 20px 10px;
}
#stylized select {
float: left;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #aacfe4;
width: 250px;
margin: 2px 0 20px 10px;
height: 100px;
}
#stylized button {
clear: both;
margin-left: 150px;
width: 125px;
height: 31px;
background: #666666 url(img/button.png) no-repeat;
text-align: center;
line-height: 31px;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
}
Below is the form that I am building using JSP.
<div id="stylized" class="myform">
<form:form id="form" name="form" method="POST" action="/showResponse">
<h1>Service call Form</h1>
<p></p>
<form:label path="userId">User Id
<span class="small">Enter User Id</span>
</form:label>
<form:input name="name" id="name" path="userId" />
<form:label path="debugFlag">Debug Flag :
<span class="small">Select Debug Flag</span>
</form:label>
<form:checkbox path="debugFlag" name="name" id="name" />
<form:label path="attributeNames">Attribute Names :
<span class="small">Select Attribute Names</span>
</form:label>
<form:select path="attributeNames" items="${attributeNamesList}"
multiple="true" name="name" id="name" />
<form:label path="machineName">Machine Name
<span class="small">Enter Machine Name</span>
</form:label>
<form:input name="name" id="name" path="machineName" />
<form:label path="portNumber">Port Number
<span class="small">Enter Port Number</span>
</form:label>
<form:input path="portNumber" name="name" id="name" />
<button type="submit">Submit</button>
<div class="spacer"></div>
</form:form>
</div>
The only problem that I am facing is, it's not aligned properly with it's label and corresponding input. Below is the screenshot-
Only user id and debug flag are assigned properly. Other than that, it's messed up somehow. Can anyone tell me what wrong I have done in CSS?
Actual HTML Code after doing view page source-
<html>
<head><link href="/ressvr/z/u4/apo4x4yiqe23jo4erdz5ig4tm.css?dataUri=true" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<title>Sample App</title>
</head><body><div id="stylized" class="myform">
<form id="form" name="form" action="/showResponse" method="POST"><h1>Service call Form</h1>
<p></p>
<label for="userId">User Id
<span class="small">Enter User Id</span>
</label><input id="name" name="userId" name="name" type="text" value=""/><div class="spacer"></div>
<label for="debugFlag">Debug Flag
<span class="small">Select Debug Flag</span>
</label><input id="name" name="debugFlag" name="name" type="checkbox" value="true"/><input type="hidden" name="_debugFlag" value="on"/><div class="spacer"></div>
<label for="attributeNames">Attribute Names
<span class="small">Select Attribute Names</span>
</label><select id="name" name="attributeNames" name="name" multiple="multiple"><option value="ACCOUNT">ACCOUNT</option><option value="ADVERTISING">ADVERTISING</option><option value="INFORMATION">INFORMATION</option></select><input type="hidden" name="_attributeNames" value="1"/><div class="spacer"></div>
<label for="machineName">Machine Name
<span class="small">Enter Machine Name</span>
</label><input id="name" name="machineName" name="name" type="text" value=""/><div class="spacer"></div>
<label for="portNumber">Port Number
<span class="small">Enter Port Number</span>
</label><input id="name" name="portNumber" name="name" type="text" value=""/><div class="spacer"></div>
<button type="submit">Submit</button>
<div class="spacer"></div>
</form></div>
</body></html>
You are setting the width of ALL inputs to be the same. You certainly don't need a width of 200px on a checkbox.
Put different class names on different input types and style these individually.
You may also want to wrap your form in an unordered list, to allow it to control the spacing and clear your floats.
<fieldset>
<legend>Delivery Details</legend>
<ol>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" />
</li>
<li>
<label for="address1">Address<em>*</em></label>
<input id="address1" />
</li>
<li>
<label for="address2">Address 2</label>
<input id="address2" />
</li>
<li>
<label for="town-city">Town/City</label>
<input id="town-city" />
</li>
<li>
<label for="county">County<em>*</em></label>
<input id="county" />
</li>
...
This is a very good guide: http://www.alistapart.com/articles/prettyaccessibleforms/
It looks like you need to add clear:both; to your form elements or utilize a <div class="spacer"></div> tag between each form element.
As an alternative you could use Table tag to place the html controls in proper format.
What is the css-way to do this...
text | input
text text | input
text | input input
text text text | input
where text is some label for the input field input
UPD usually you can see such a layout in user registration forms
CSS:
label {
float: left;
text-align: right;
width: 100px;
margin-right: 1em;
}
HTML:
<label for="i1">text</label><input id="i1" name="i1" /><br>
<label for="i2">text text</label><input id="i2" name="i2" /><br>
<label for="i3">text</label><input id="i3" name="i3" /> <input id="i5" name="i5" /><br>
<label for="i4">text text text</label><input id="i4" name="i4" /><br>
http://jsfiddle.net/wEcGf/
Another way to do it.
HTML:
<div class='form'>
<p><label>Test</label><input /></p>
<p><label>Longer test</label><input /></p>
<p><label>Even longer test</label><input /></p>
</div>
CSS:
.form p {
clear: both;
float: none;
}
.form p label {
display: block;
float: left;
text-align: right;
width: 10em;
}
.form p input {
float: left;
}
Yelds: http://jsfiddle.net/QWH2J/
You can also use ul or ol with li.
Depends on the HTML code. You can play with float: left;, float; right and clear: both for example. But without at least some HTML code, it's impossible to give you a complete solution.
Here's a little example : http://jsfiddle.net/xm5aL/1/
HTML :
<div>
<label for="input1">Input 1</label>
<input name="input1" />
<label for="input2">Some long Input 2</label>
<input name="input2" />
<label for="input3">Input 3</label>
<input name="input3" />
<label for="input4">short</label>
<input name="input4" />
<label for="input5">Input 5</label>
<input name="input5" />
</div>
CSS :
div {
width: 20em;
}
label {
clear: both;
float: left;
text-align: right;
width: 10em;
}
label:after {
margin: 0em 1em;
content: " | "
}
input {
float: right;
width: 10em;
}
input {
border: 1px solid #ccc;
background: #f5f5f5;
padding-left:5px;
}
label {
display: block;
width:auto;
width: 100px;
float: left;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight:bold;
color:#555;
}
br{
clear:both;
}
Check working example at http://jsfiddle.net/LW2Ss/3
See http://jsfiddle.net/fXeX2/
<html>
<head>
<title></title>
<style type="text/css">
label {
display: inline;
float: left;
width: 10em;
text-align: right;
}
input {
margin-left: 15em;
display: block;
}
</style>
</head>
<body>
<fieldset>
<label>text</label>
<input type="text" style="width:10em;" />
<label>text</label>
<input type="text" style="width:10em;" />
<label>text text</label>
<input type="text" style="width:20em;" />
<label>text text text</label>
<input type="text" style="width:10em;" />
</fieldset>
</body>
</html>