Solved

CSS Form layout - problem with checkboxes

Posted on 2004-08-31
3
686 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

729 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