SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile problem with a form

    Hi

    I have a problem with code below. The alignement of my fields doesn't look good.. I am quite stuck on this one...
    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>
    <title>learning CSS: form test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    .table {
     margin: 0px auto;
     width: 300px;
     border: 1px solid #000;
    }
    
    form p {
    width: 298px;
    clear: both;
    }
    
    form p label {
    float: left;
    }
    
    form p input, form p textarea, form p select {
    float: right;
    }
    
    h3 {
    color: #000;
    background-color: #fff;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="table">
    <h3>Ship to</h3>
    <p><label for="shipping_first_name">First name:</label>
    <input type="text" id="shipping_first_name" name="shipping_first_name" size="20" maxlength="100" /></p>
    <p><label for="shipping_last_name">Last name:</label>
    <input type="text" id="shipping_last_name" name="shipping_last_name" size="20" maxlength="100" /></p>
    <p><label for="shipping_email">Email address:</label>
    <input type="text" id="shipping_email" name="shipping_email" size="20" maxlength="100" /></p>
    <p><label for="shipping_email2">Please re-type email address:</label>
    <input type="text" id="shipping_email2" name="shipping_email2" size="20" maxlength="100" /></p>
    <p><label for="shipping_phone">Phone number:</label>
    <input type="text" id="shipping_phone" name="shipping_phone" size="20" maxlength="100" /></p>
    <p><label for="shipping_address">Address:</label>
    <input type="text" id="shipping_address" name="shipping_address" size="20" maxlength="100" /></p>
    <p><label for="shipping_city">City:</label>
    <input type="text" id="shipping_city" name="shipping_city" size="20" maxlength="100" /></p>
    <p><label for="ship_state">State:</label>
    <select id="ship_state" name="ship_state"> 
    <option value="VA">Virginia</option> 
    </select></p>
    <p><label for="shipping_zip">Zip code:</label>
    <input type="text" id="shipping_zip" id="" name="shipping_zip" size="10" maxlength="100" /></p>
    </div>
    
    </body>
    
    </html>
    thank you very much for your time and help.


  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, to start with, there's no <FORM> tag in your code, so your wonderful stylings won't actually work the way you put them

    so, adding it (and fixing a double id attribute error in the last input)
    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>
    <title>learning CSS: form test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    .table {
     margin: 0px auto;
     width: 300px;
     border: 1px solid #000;
    }
    
    form p {
    width: 298px;
    clear: both;
    }
    
    form p label {
    float: left;
    }
    
    form p input, form p textarea, form p select {
    float: right;
    }
    
    h3 {
    color: #000;
    background-color: #fff;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="table">
    <h3>Ship to</h3>
    <form action="blah.php" method="post">
    <p><label for="shipping_first_name">First name:</label>
    <input type="text" id="shipping_first_name" name="shipping_first_name" size="20" maxlength="100" /></p>
    <p><label for="shipping_last_name">Last name:</label>
    <input type="text" id="shipping_last_name" name="shipping_last_name" size="20" maxlength="100" /></p>
    <p><label for="shipping_email">Email address:</label>
    <input type="text" id="shipping_email" name="shipping_email" size="20" maxlength="100" /></p>
    <p><label for="shipping_email2">Please re-type email address:</label>
    <input type="text" id="shipping_email2" name="shipping_email2" size="20" maxlength="100" /></p>
    <p><label for="shipping_phone">Phone number:</label>
    <input type="text" id="shipping_phone" name="shipping_phone" size="20" maxlength="100" /></p>
    <p><label for="shipping_address">Address:</label>
    <input type="text" id="shipping_address" name="shipping_address" size="20" maxlength="100" /></p>
    <p><label for="shipping_city">City:</label>
    <input type="text" id="shipping_city" name="shipping_city" size="20" maxlength="100" /></p>
    <p><label for="ship_state">State:</label>
    <select id="ship_state" name="ship_state"> 
    <option value="VA">Virginia</option> 
    </select></p>
    <p><label for="shipping_zip">Zip code:</label>
    <input type="text" id="shipping_zip" name="shipping_zip" size="10" maxlength="100" /></p>
    </form>
    </div>
    
    </body>
    
    </html>
    making it a bit more swish:

    Code:
    form p {
    width: 298px;
    clear: both;
    }
    
    form p label {
    display: inline;
    float: left;
    width: 100px;
    text-align: right;
    margin: 0 10px 0 0;
    padding: 0;
    }
    
    form p input, form p textarea, form p select {
    margin: 0;
    }
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wonderful!
    thank you very much

    Just one little question: what does the inline trick does exactly?

    One other little question: in Moz there is a space between the top of the container (.table div) and the h3. How could I get rid of it?

    Thank you very much for your help...

  4. #4
    SitePoint Enthusiast trifolic's Avatar
    Join Date
    Sep 2003
    Location
    NY
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by duuudie
    One other little question: in Moz there is a space between the top of the container (.table div) and the h3. How could I get rid of it?
    Try taking this out of the table tag in the CSS
    margin: 0px auto;

    It's a good tag to have, but not always required.
    Do you have news? Want it published?
    Visit http://www.w3reports.com -Daily News for Webmasters
    Get FREE News for your site by clicking here

  5. #5
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just the shadow of a doubt... I read somewhere that floating labels not at all appearing is an old moz bug. Since 1.2, Netscape 7.0 and Camino 0.7 are all affected is it a good idea to use it? Is there a better way? Is the bug fixed?

  6. #6
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regarding this thread and the excellent link provided by Paul, I was wondering how I could make the same form (posted in this thread... I mean... the one you're reasding right now ) without using labels. Any ideas?

    Thanks to you all


  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you don't want to use the label tag then just search and replace and use a span instead.
    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>
    <title>learning CSS: form test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .table {
     margin: 0px auto;
     width: 300px;
     border: 1px solid #000;
    }
     
    h3 {
    color: #000;
    background-color: #fff;
    }
    form p {
    width: 298px;
    clear: both;
    }
    form p span {
    display: inline;
    float: left;
    width: 100px;
    text-align: right;
    margin: 0 10px 0 0;
    padding: 0;
    }
    form p input, form p textarea, form p select {
    margin: 0;
    }
    </style>
    </head>
    <body>
    <div class="table"> 
      <h3>Ship to</h3>
      <form action="blah.php" method="post">
    	<p>
    	  <span title="shipping_first_name">First name:</span>
    	  <input type="text" id="shipping_first_name" name="shipping_first_name" size="20" maxlength="100" />
    	</p>
    	<p>
    	  <span title="shipping_last_name">Last name:</span>
    	  <input type="text" id="shipping_last_name" name="shipping_last_name" size="20" maxlength="100" />
    	</p>
    	<p>
    	  <span title="shipping_email">Email address:</span>
    	  <input type="text" id="shipping_email" name="shipping_email" size="20" maxlength="100" />
    	</p>
    	<p>
    	  <span title="shipping_email2">Please re-type email address:</span>
    	  <input type="text" id="shipping_email2" name="shipping_email2" size="20" maxlength="100" />
    	</p>
    	<p>
    	  <span title="shipping_phone">Phone number:</span>
    	  <input type="text" id="shipping_phone" name="shipping_phone" size="20" maxlength="100" />
    	</p>
    	<p>
    	  <span title="shipping_address">Address:</span>
    	  <input type="text" id="shipping_address" name="shipping_address" size="20" maxlength="100" />
    	</p>
    	<p>
    	  <span title="shipping_city">City:</span>
    	  <input type="text" id="shipping_city" name="shipping_city" size="20" maxlength="100" />
    	</p>
    	<p>
    	  <span title="ship_state">State:</span>
    	  <select id="ship_state" name="ship_state">
    		<option value="VA">Virginia</option>
    	  </select>
    	</p>
    	<p>
    	  <span title="shipping_zip">Zip code:</span>
    	  <input type="text" id="shipping_zip" name="shipping_zip" size="10" maxlength="100" />
    	</p>
      </form>
    </div>
    </body>
    </html>
    Paul

  8. #8
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    If you don't want to use the label tag then just search and replace and use a span instead.
    thus removing accessibility and usability advantages of actually having proper labels ?
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    thus removing accessibility and usability advantages of actually having proper labels ?
    I know but he asked

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I think the real reason Duuudie didn't want lables is due to the problem with camino:

    http://www.pixy.cz/blogg/clanky/css-...andlabels.html

    But frankly I would leave the code as you had it already

  11. #11
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the advice guys. I will leave the code as it was. But thanks a lot Paul fot taking the time to offer me an alternative.

    Thank you guys for your great help!

    Respect.


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
  •