Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Form design without tables?!?

Status
Not open for further replies.
TobyA

TobyA

MIS
Nov 7, 2002
164
GB
Dear Web Gurus,

I am trying to design a form without using tables..


Unfortunately the <br style="clear:left"> seems to be making that big gap as it clears the left menu (at least I think that's what's happening).

Also, how can I get the labels for the checkboxes to be left aligned so they sit right next to the boxes?

Apologies for the Nooby questions!!

Any help would be much appreciated.

Thanks,
Toby
 
Sort by date Sort by votes
Your big gaps are made by that margin-bottom declaration on your labels and inputs. What else did you expect when giving that kind of margin to them?

As for the last, why did you not put the text next to checkboxes in labels? Put them in labels and give them a class to adjust the text-alignment.
 
Upvote 0 Downvote
Sorry Vragabond, I mean the big gap after "First Name".

Obviously I wanted the bottom margin of 10px to keep it nicely spaced out.

Thanks for the link Chris. I'll have a ganders at it now.

Cheers,
Toby
 
Upvote 0 Downvote
TobyA, that gap is there because you're clearing the float, which also includes clearing the float of sidebar, so your stuff continues at the bottom of that. Try floating the entire main container to the left to avoid that.
 
Upvote 0 Downvote
With a bit more tinkering it's possible to get rid of the <br>s altogether, along with the inline style attributes:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
  <title>Test</title>

  <style type="text/css">
    body,input { font-size: medium; }

    fieldset {
       margin: 1em 0;
    }

    fieldset label {
       float: left;
       clear: both;
       width: 8em;
       margin: 0.25em 0;
       text-align: right;
    }

    fieldset input {
       display: block;
       margin: 0.25em 0 0.25em 8.5em;
    }

    fieldset label.check {
       float: none;
       display: block;
       margin: 0.25em 0 0.25em 8.5em; /* left margin = a bit wider than label */
       width: auto;
       text-align: left;
    }

    fieldset label.check input {
       display: inline;
       margin: 0 0.5em 0.1em 0;
   }

  </style>

</head>
<body>

<form>
  <fieldset>
    <legend>Name / Company Name</legend>
				
    <label for="FirstName">First Name</label>
    <input style="text" id="FirstName" name="FirstName">
				
    <label for="LastName">Last Name</label>
    <input style="text" id="LastName" name="LastName">
				
    <label for="Company">Company Name</label>
    <input style="text" id="Company" name="Company">
  </fieldset>
		
  <fieldset>
    <legend>Terms &amp; Conditions</legend>

    <label class="check" for="Remember">	
      <input type="checkbox" name="Remember" id="Remember">
      Remember me!
    </label>

    <label class="check" for="Terms">
      <input type="checkbox" name="Terms" id="Terms">
      I accept the Terms and Conditions displayed below
    </label>
  </fieldset>	

</form>
</body>
</html>
Note that I had to explicitly set the font-size of the <input> elements to being the same size as normal body text in order to be able to easily use ems everywhere. If you want the text to be different sizes, you'll have to fudge the em amounts, or just use pixels.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Chris,

You're a legend.

Looking good in FF now, but the margins in IE6 are a bit dodgy. For some reason the inputs appear miles away from the labels.....


You'll have to forgive me, I don't fully understand measurements in em's.

Also, can you point me in the direction of any good tutorials on cookies? I want to save the user's address details if they click the relevant check box.

Thanks again for all your help. :-D

Toby
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
746
3esolar
3
southbeach
  • Locked
  • Question
Responsive Design - Get 3 col down to 2 col and down to 1 col
Replies
3
Views
133
southbeach
southbeach
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
176
PeDa
PeDa
ghbeers
  • Locked
  • Question
Viewing form through portal messing up .css formatting
Replies
4
Views
142
ghbeers
ghbeers
Everton1Blue
  • Locked
  • Question
How to display user error in form field
Replies
2
Views
187
Everton1Blue
Everton1Blue

Part and Inventory Search

Sponsor

Back
Top