Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Form layout problem with labels
Old 11-26-2009, 10:56 AM Form layout problem with labels
pealo86's Avatar
Super Spam Talker

Posts: 850
Name: Matt Pealing
Location: England, north west
Trades: 0
I've decided to do things a little differently with this form.

Rather than throw a load of divs or p elements into the form to break it up, I decided to target all of the labels instead, to keep my HTML a little cleaner:

Code:
              <form id="frm-quick" action="">
                  <label>Name:<input type="text" id="name" name="name" /></label>
                  <label>Email Address:<input type="text" id="email" name="email" /></label>
                  <label>Repeat Email:<input type="text" id="emailRep" name="emailRep" /></label>
                  <label>Message:<input type="text" id="message" name="message" /></label>
                <label><a href="#">View full form here</a><input class="submit" type="submit" name="quick-send" id="quick-send" value="Send" /></label>
              </form>
Only I've noticed that both the text and the fields are always right at the top of each label, making the text look to high.

I could add top padding onto the label which would budge down the text, but it would also move the input fields down so therefore it's pointless.

Is there any way to move the text inside the labels further down without affecting the input fields positioning?

Thanks.
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE
pealo86 is online now
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
 
Register now for full access!
Old 11-26-2009, 12:43 PM Re: Form layout problem with labels
prasanthmj's Avatar
Experienced Talker

Posts: 42
Name: Prasanth
Trades: 0
The right way to have the label is:
<label for="name">Name:</label> <input type="text" id="name" name="name" />
Then it is easy to arrange the labels and the input fields
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
prasanthmj is offline
Reply With Quote
View Public Profile
 
Old 11-26-2009, 12:44 PM Re: Form layout problem with labels
pealo86's Avatar
Super Spam Talker

Posts: 850
Name: Matt Pealing
Location: England, north west
Trades: 0
Thanks, I was forced to do it like that in the end anyway because of IE!
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE
pealo86 is online now
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
Reply     « Reply to Form layout problem with labels
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.11517 seconds with 12 queries