SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    embarrassed and mortified with form styling not working

    II can't think clearly from lack of sleep but I need to figure out where I went wrong with styling this form. I think it's because the labels are not wrapped around the checkboxes and radio buttons, but I don't know how to fix it. I'd really appreciate any help you guys can give me to point out the fixes. Sample code below:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    label {
    	float: left;
    	width: 150px;
    	clear: left;
    }
    form {
    	width: 500px;
    }
    p {
    	clear: both;
    }
    </style>
    </head>
     
    <body>
    <form id="form1" name="form1" method="post" action="">
      <p>
        <label for="name">name</label>
        <input type="text" name="name" id="name" />
      </p>
      <p>
        <label for="email">email</label>
        <input type="text" name="email" id="email" />
      </p>
      <p>
        <label for="phone">phone</label>
        <input type="text" name="phone" id="phone" />
      </p>
      <p>Radios
        <input type="radio" name="radio" id="radios" value="r1" />
        <label for="radios">R1</label>
        <br />
        <input type="radio" name="radio" id="radios2" value="r2" />
        <label for="radios2">R2</label>
      </p>
      <p>
        <input name="checks" type="checkbox" id="checks1" value="c1" />
        <label for="checks1">C1</label>
        <br />
        <input name="checks" type="checkbox" id="checks2" value="c2" />
        <label for="checks2">C2</label>
      </p>
      <p>
        <input type="submit" name="submit" id="submit" value="Submit" />
        <br />
      </p>
    </form>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure how you want this to look but you'd need to target the labels on the checkboxes and radios differently.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    label {
        float: left;
        width: 140px;
        clear: left;
        text-align:right;
        padding:0 10px 0 0;
    }
    form {width: 500px;}
    p {clear: both;}
    .radios label{float:none;}
    .radios input{margin-left:150px;}
    
    </style>
    </head>
    <body>
    <form id="form1" name="form1" method="post" action="">
        <p>
            <label for="name">name:</label>
            <input type="text" name="name" id="name" />
        </p>
        <p>
            <label for="email">email:</label>
            <input type="text" name="email" id="email" />
        </p>
        <p>
            <label for="phone">phone:</label>
            <input type="text" name="phone" id="phone" />
        </p>
        <div class="radios">
        <p>
            <input type="radio" name="radio" id="radios" value="r1" />
            <label for="radios">R1</label>
            <br />
            <input type="radio" name="radio" id="radios2" value="r2" />
            <label for="radios2">R2</label>
        </p>
        <p>
            <input name="checks" type="checkbox" id="checks1" value="c1" />
            <label for="checks1">C1</label>
            <br />
            <input name="checks" type="checkbox" id="checks2" value="c2" />
            <label for="checks2">C2</label>
        </p>
        <p>
            <input type="submit" name="submit" id="submit" value="Submit" />
            <br />
        </p></div>
    </form>
    </body>
    </html>
    I wouldn't usually use a p element for form elements but I know that some people do. I'd probably use a div instead.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    1) Those are not PARAGRAPHS of TEXT, they are labels and inputs.

    2) Where's your FIELDSETS?

    3) 'radios' looks like it should be a LEGEND.

    4) floats on labels is just asking for headaches when you don't have proper clearing behaviors. Try setting the labels to display:inline-block instead, then you don't have to play with the floats.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •