Solved

CSS Form layout - problem with checkboxes

Posted on 2004-08-31
3
675 Views
Last Modified: 2008-02-01
I am trying to layout a simple form without using tables.  I am trying to replicate a two column layout using code based on http://www.themaninblue.com/experiment/InForm/margin_hack.htm.  The main labels and text fields seem to work fine, but I am having problems with the checkbox at the bottom.  I would like this all on one row, checkbox first and then the label.

HTML

            <form>      
            <fieldset>
                        <legend>
                              Contact form</legend>
            <label for="enquiryname" class="first">Name: <strong class="text_red">*</strong>
        <input type="text" name="enquiryname" id="enquiryname" value="" size="32" /></label>
        <label for="enquiryemail">Email Address: <span class="text_red">*</span>
          <input type="text" name="enquiryemail" id="enquiryemail" value="" size="32" /></label>
          <label for="enquirytelephone">Telephone:
          <input type="text" name="enquirytelephone" id="enquirytelephone" value="" size="32" /></label>
          <label for="enquiryaddress1"><strong>Address Line 1:</strong><strong class="text_red"> *</strong>
          <input type="text" name="enquiryaddress1" id="enquiryaddress1" size="32" value="" /></label>
          <label for="enquiryaddress2">Address Line 2:
          <input type="text" name="enquiryaddress2" id="enquiryaddress2" size="32" /></label>
          <label for="enquirytown">Town: <strong class="text_red">*</strong>
          <input type="text" name="enquirytown" id="enquirytown" size="32" /></label>
          <label for="enquirypostcode">Postcode: <span class="text_red">*</span>
          <input type="text" name="enquirypostcode" id="enquirypostcode" value="" size="8" /></label>
          <label for="enquirycomments" class="textarea">Comments or questions <span class="text_red">*</span>
        <textarea name="enquirycomments" id="enquirycomments" cols="50" rows="10"></textarea></label>
          <label for="enquirynewsletter"><input type="checkbox" name="enquirynewsletter" id="enquirynewsletter" value="checkbox" />Tick if you wish to receive David Mundell's email newsletters</label>
          <input type="submit" value="Send" name="submit" class="submit" />
        </fieldset>
</form>


CSS

fieldset
{
      display: block;
      margin: 0 0 1em 0;
      border: 1px solid #D9954C;
      padding: 0 1em 1em 1em;
}

legend
{
      font-size: 110%;
      font-weight: bold;
      color: #D9954C;
}

input
{
      position: relative;
      top: -1.4em;
      left: 10em;
      display: block;
}

input.submit
{
      clear: both;
      top: 0;
}

label
{
      clear: both;
      float: left;
      display: block;
      width: 10em;
      margin-top: -1em;
      font-weight: bold;
}

label.first
{
      margin-top: 1em;
}

label.textarea {
      clear: both;
      top: 0;
      width: 100%;
}
0
Comment
Question by:Orroland
  • 2
3 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 11943454
Hi :-)

To be honest, I handle this a little differently. Have a look through the code below, as well as the red asterisks and using the margin on the legend instead of the first 2 items...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<style type="text/css">

body
{
      font: 13px verdana, sans-serif;
}

#myform
{
      margin:0;
      padding:0;
      display:inline;
}

#myform span
{
      color:red;
      font-weight: bold;
}

fieldset
{
      display: block;
      margin: 0 0 1em 0;
      border: 1px solid #D9954C;
      padding: 0 1em 1em 1em;
}

legend
{
      font-size: 110%;
      font-weight: bold;
      color: #D9954C;
      margin-bottom:1em;
}

label
{
      clear: left;
      float: left;
      width: 10em;
      padding: 0px 4px;
      margin:4px 0px 0px 2px;
      font-weight: bold;
}

label.right
{
      text-align:right;
}

input
{
      margin:4px 0px;
}

.comment
{
      margin:10px 0px;
}

.button
{
      width:80px;
      background-color:#CCC;
      border:1px solid #FC9;
}
         
</style>
</head>

<body>
<form id="myform">

      <fieldset>
      <legend>Contact form</legend>

      <label for="enquiryname">Name: <span>*</span></label>
      <input type="text" name="enquiryname" id="enquiryname" value="" size="32" /><br />

      <label for="enquiryemail">Email Address: <span>*</span></label>
      <input type="text" name="enquiryemail" id="enquiryemail" value="" size="32" /><br />

      <label for="enquirytelephone">Telephone:</label>
      <input type="text" name="enquirytelephone" id="enquirytelephone" value="" size="32" /><br />

      <label for="enquiryaddress1"><strong>Address Line 1:</strong> <span>*</span></label>
      <input type="text" name="enquiryaddress1" id="enquiryaddress1" size="32" value="" /><br />

      <label for="enquiryaddress2">Address Line 2:</label>
      <input type="text" name="enquiryaddress2" id="enquiryaddress2" size="32" /><br />

      <label for="enquirytown">Town: <span>*</span></label>
      <input type="text" name="enquirytown" id="enquirytown" size="32" /><br />

      <label for="enquirypostcode">Postcode: <span>*</span></label>
      <input type="text" name="enquirypostcode" id="enquirypostcode" value="" size="8" /><br />

      <label for="enquirycomments" class="textarea">Comments or questions <span>*</span></label>
      <textarea name="enquirycomments" id="enquirycomments" cols="50" rows="10"></textarea><br />

      <label for="enquirynewsletter" class="right"><input type="checkbox" name="enquirynewsletter" id="enquirynewsletter" value="checkbox" /></label>
      <div class="comment">Tick if you wish to receive David Mundell's email newsletters</div>

      <label style="border:none;"></label>
      <input class="button" type="submit" value="Send" name="submit" class="submit" />

      </fieldset>

</form>
</body>
</html>

Thanks,
Sean
0
 

Author Comment

by:Orroland
ID: 11943493
Sean

I realise that nothing is ever perfect, but your code breaks in NN6.

Any other thoughts?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11943786
Yes, N6 has a bad bug with labels. I didn't include it as I usually don't try and support that browser - there don;t seem to be many people left using it.
You'll need to add some extra semantic markup to get over that problem:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<style type="text/css">

body
{
      font: 13px verdana, sans-serif;
}

#myform
{
      margin:0;
      padding:0;
      display:inline;
}

fieldset
{
      display: block;
      margin: 0 0 1em 0;
      border: 1px solid #D9954C;
      padding: 0 1em 1em 1em;
}

legend
{
      font-size: 110%;
      font-weight: bold;
      color: #D9954C;
      margin-bottom:1em;
}

label span
{
      display:block;
      clear: left;
      float: left;
      width: 10em;
      padding: 0px 4px;
      margin:4px 0px 0px 2px;
      font-weight: bold;
}

.red_text
{
      color:red;
      font-weight: bold;
}

label.right
{
      text-align:right;
}

input
{
      margin:4px 0px;
}

.comment
{
      margin:10px 0px;
}

.button
{
      width:80px;
      background-color:#CCC;
      border:1px solid #FC9;
}
         
</style>
</head>

<body>
<form id="myform">

      <fieldset>
      <legend>Contact form</legend>

      <label for="enquiryname"><span>Name: <strong class="red_text">*</strong></span></label>
        <input type="text" name="enquiryname" id="enquiryname" value="" size="32" /><br />

        <label for="enquiryemail"><span>Email Address: <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquiryemail" id="enquiryemail" value="" size="32" /><br />

      <label for="enquirytelephone"><span>Telephone:</span></label>
      <input type="text" name="enquirytelephone" id="enquirytelephone" value="" size="32" /><br />

      <label for="enquiryaddress1"><span><strong>Address Line 1:</strong> <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquiryaddress1" id="enquiryaddress1" size="32" value="" /><br />

      <label for="enquiryaddress2"><span>Address Line 2:</span></label>
      <input type="text" name="enquiryaddress2" id="enquiryaddress2" size="32" /><br />

      <label for="enquirytown"><span>Town: <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquirytown" id="enquirytown" size="32" /><br />

      <label for="enquirypostcode"><span>Postcode: <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquirypostcode" id="enquirypostcode" value="" size="8" /><br />

      <label for="enquirycomments" class="textarea"><span>Comments or questions <strong class="red_text">*</strong></span></label>
        <textarea name="enquirycomments" id="enquirycomments" cols="50" rows="10"></textarea><br />

      <label for="enquirynewsletter" class="right"><span><input type="checkbox" name="enquirynewsletter" id="enquirynewsletter" value="checkbox" /></span></label>
      <div class="comment">Tick if you wish to receive David Mundell's email newsletters</div></p>

      <label style="border:none;"><span></span></label>
      <input class="button" type="submit" value="Send" name="submit" class="submit" />

        </fieldset>

</form>
</body>
</html>
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
FIx alignment of two texts 1 26
Error in page 3 46
form button worked now it doesnt anymore 9 41
I can't get this footer to "stick" to the bottom! Why not? 4 21
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now