/    Sign up×
Community /Pin to ProfileBookmark

CSS Tableless Forms

Copy linkTweet thisAlerts:
Apr 01.2012

This is style I’ve created with the intention of positioning in the following layout with the widths below:

label1 inputtextbox1 label2 inputtextbox2
200px 260px 200px 260px

Style follows:

<style type=”text/css”>
#mainFormContainer{left:2px; top:388px; position:relative; height:424px; width:920px;}
label#fname{left:0px; top:90px; position:absolute; font-weight:400; text-align:center; width:200px;}
input, textarea#firstname{left:200px; top:90px; position:absolute; width:260px;}
label#sname{left:460px; top:90px; position:absolute; font-weight:400; text-align:center; width:200px;}
</style>

label1, input textbox1 and label2 so far are perfectly positioned exactly how I want it to be, but when I created the style for input textbox2, it moves the position of input textbox1

style used for input textbox2 being:

input, textarea#surname{left:660px; top:90px; position:relative; width:260px;}

They’ve even got id’s to differentiate between input textbox1 and input textbox2so why is it repositioning input textbox1?
Any ideas? solutions, corrections of styles much appreciated

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@holyhttpApr 04.2012 — You really do not need to use the positioning.

form {

width:920px;

height:auto;

padding:0;

margin:10px;

overflow:hidden;

}

form p{

float:none;

clear:both;

margin:0.5em 0;

padding:0;

}

form label{

width:200px;

height:auto;

text-align:right:

margin:0 5px 5px 0;

padding:0 0 5px;

float:left;

clear:left;

}

form input{

width:200px;

height:18px;

float:left;

clear:none;

}

/* class for submit button */

form input.btn{

width:70px;

height:35px;

margin:5px 0 0;

padding:0 10px;

line-height:32px;

text-align:center;

}

if you are using check boxes and radio buttons you can define the following CSS classes

form input.checkbox, form input.radio{

width:15px;

height:15px;

float:left;

clear:none;

margin:5px 10px 0 0;

padding:0;

}

It's best to create an external form.css stylesheet will all the above styles you can reuse in pretty much all your web design projects.

If you want to position the label above its corresponding field, then you can just add the following CSS rules:

clear:both;

text-align:left; /* to flush the text label to the left */

You could also choose to not float both label and field.

In that case just use the following CSS rule:

float:none;

You can wrap each label & field in a <p>...</p>
×

Success!

Help @nsath spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...