How the f**k - Graphic Design Forum and Web Design Forum

alex_gomy · #1 (**permalink**) 28-02-2008, 11:18 PM

Do i align all the form fields over to the right?? and keep the text where it is. please, its driving me mad!

Untitled Document

ilabstudios · #2 (**permalink**) 28-02-2008, 11:53 PM

Not 100% certain, but wouldn't you just put the text and form fields in a separate div container, then you can just align them to be positioned to the right.

LeadMagnet · #3 (**permalink**) 29-02-2008, 12:33 AM

This is one of the valid uses of a html table. That's the easiest way to do it and that's my recommendation.

alex_gomy · #4 (**permalink**) 29-02-2008, 12:35 AM

Yeah using tables is the easy option... But i really wanna learn CSS, so this is 1 of them stumbling blocks i wanna get over. I know it can be done using css.

LeadMagnet · #5 (**permalink**) 29-02-2008, 12:41 AM

Well, i suppose you could just add:

select{
float:right;
}
input{
float:right;
}

Just make sure you check that in other browsers. I know it'll work in firefox.
Things probably won't line up properly though... i still recommend tables. You wanna learn css, fine, but don't forget that there's a time and a place. Tables should not be outlawed completely. They're for information just like this.

The next best, easiest option is to do what ilabstudios said.

tommylogic · #6 (**permalink**) 29-02-2008, 02:31 AM

Here ya go.. added extra div #details_right and #container (see notes in html)

HTML 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>
<link href="creditcard.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br />
<div id="main_container">
    <div class="main_title">
        <div class="main_title_center">
            <div class="title">
              <h1>Secure online payment on gomylocal.com</h1>
             </div>
        </div>
    </div>
    <div class="main_title">
        <div class="main_title_center">
            <div class="title">Credit card payment</div>
        </div>
    </div>
    <div class="main_content">
    
         <div id="container">
          <div id="details_left" class="blank">
                 <p><label class="label">Cardholder's name*</label></p>
                <p><label>Billing address</label></p>
                    <p><label>Street**</label></p>
                        <p><label>City*</label></p>
                          <p><label>State*</label></p>
                            <p><label>Zip*</label></p>
                           <p><label>Credit card type*</label></p>
                             <p><label>Credit card number*</label></p>
                               <p><label>Expiration date*</label></p>
                                 <p><label>CID (What is this?)*</label></p>
                               <p><label>Send receipt to</label></p>
                              <p>Customer ID</p>
        </div>
              
  <!--ADDED div id="details_right" to accomodate justification-->      
    <div id="details_right" class="blank">
     <form action="#" method="post" name="creditcard_form" id="creditcard_form">
        <p><input class="form200" type="text" value="" name="NameonCard" /></p>
        <p><input class="form200" type="text" value="" name="last_name" maxlength="32" size="20"/></p>
        <p><input class="form200" type="text" value="" name="last_name" maxlength="32" size="20"/></p>
        <p><select name="Cardstate" size="1" class="select">
         <?php
            if($state!="")
            {
            ?>
            <option selected="selected" value="<?php echo $state; ?>"><?php echo $state; ?></option>
                                    <?php 
                                     }
                                    else
                                    {
                                     ?>
                                    <option selected="selected" value="">State...</option>
                                    <?php
                                    }
                                     ?>
                                    <option value="AL">Alabama</option>
                                    <option value="AK">Alaska</option>
                                    <option value="AZ">Arizona</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="CA">California</option>
                                    <option value="CO">Colorado</option>
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="ID">Idaho</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IN">Indiana</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NV">Nevada</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="OH">Ohio</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="OR">Oregon</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="TX">Texas</option>
                                    <option value="UT">Utah</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WA">Washington</option>
                                    <option value="WV">West Virginia</option>
                                    <option value="WI">Wisconsin</option>
                                    <option value="WY">Wyoming</option>
                                      </select> </p>
         <p><input class="form80" type="text" value="" name="last_name" maxlength="5" size="20"/></p>
         <p><input class="form80" type="text" value="" name="last_name" maxlength="5" size="20"/></p>
         <p><select name="Cardname" class="grey_12pt">
                                      <option selected="selected"></option>
                                      <option value="Visa">Visa</option>
                                      <option value="MasterCard">MasterCard</option>
                                    <option value="Amex">Amex</option>
                                    <option value="Discover">Discover</option>
                                    </select></p>
         <p><input class="form200" type="text" value="" name="last_name" maxlength="32" size="20"/></p>
         <p><select name="CardexpM">
                            <option selected="selected"></option>
                            <option value="01">January</option>
                            <option value="02">Febuary</option>
                            <option value="03">March</option>
                            <option value="04">April</option>
                            <option value="05">May</option>
                            <option value="06">June</option>
                            <option value="07">July</option>
                            <option value="08">August</option>
                            <option value="09">September</option>
                            <option value="10">Octobar</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                            </select> </p>
                        <p><select name="CardexpY">
                            <option selected="selected"></option>
                            <option value="07">2007</option>
                            <option value="08">2008</option>
                            <option value="09">2009</option>
                            <option value="10">2010</option>
                            <option value="11">2011</option>
                            <option value="12">2012</option>
                            <option value="13">2013</option>
                            <option value="14">2014</option>
                            <option value="15">2015</option>
                            </select></p>
           <p><input class="form80" type="text" value="" name="last_name" maxlength="32" size="20"/></p>
           <p><input class="form200" type="text" value="e.g johnsmith@yahoo.com" name="last_name2" maxlength="32" size="20"/></p>
        </form>
        </div>
      </div>
    </div>
    <div class="clear"></div>   
</div>
</body>
</html>

And here's your CSS..

HTML Code:

@charset "UTF-8";
/* CSS Document */

/* main bits */
BODY {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; color: #666666;}
INPUT, TEXTAREA, SELECT {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #666666;}
P {font-size: 12px; color: #666666;}
H1, H2, H3 {font-family:Verdana, Arial, Helvetica, sans-serif;}
H1, H2, H3, H4 {font-weight: bold; color: #666666;text-align:left;}
H1 {font-size: 14px; color:#FF6600; font-weight:bold;}
H2 {font-size: 12px;}
H3 {font-size: 12px;}
H4 {font-size: 12px;}
A:hover {color: #666666; text-decoration: underline;}
P, FORM {
    margin: 0px;
    padding: 0px;
    text-align:right;
}
P {
    font-size: 12px;
    color: #666666;
    margin: 5px 0px 5px 0px;
    height: 30px;
}

.clear {
    clear:left;
    }
    
#main_container {
    margin:auto;
    width:950px;
    border-bottom: Solid #CCCCCC 1px;
    border-top: Solid #CCCCCC 1px;
    border-left: Solid #CCCCCC 1px;
    border-right: Solid #CCCCCC 1px;
    }
    
.main_title {
    padding: 10px 10px 0px 10px;
    height:32px;
    }
    
.main_title_center {
    border-bottom:solid #CCC 1px;
    height:32px;
    }
    
.title {
    float:left;
    }
/* end main bits */

/* credit card page */

.main_content {
    float:left;
    width: 930px;
    padding: 0px 10px 0px 10px;
    }
#container {
    border-right:1px solid #CCCCCC;
    float:left;
    width: 455px;
}    

#details_left {
    float:left;
    margin:10px 0px 10px 0px;
    padding-right:20px;
    width:auto;
}

#details_left p{
    text-align: left;
}

#details_right {
    float:left;
    margin:10px 0px 10px 0px;
    padding-right:20px;
    width:auto;
}
    
#image_right {
border-right:0px none;
display:inline;
float:right;
margin:10px 0px 0px;
width:300px;
background:url(images/creditcards.jpg) no-repeat 100% 0%;
width:435px;
height:374px;
}

.left {
    border-right:1px solid #CCCCCC;
    float:left;
    margin:10px 0px 10px 0px;
    width:455px;
    padding-right: 20px;
}

.blank {
    background-color: #fff;
    margin: 0px 10px 10px 10px;
}

.formNote {
font-style:oblique;
}

INPUT.form80,  TEXTAREA.form80  {
    width:  80px;
    color: #666666;
}
INPUT.form120, TEXTAREA.form120 {
    width: 120px;
    color: #666666;
}
INPUT.form130, TEXTAREA.form130 {
    width: 130px;
    color: #666666;
}
INPUT.form150, TEXTAREA.form150 {
    width: 150px;
    color: #666666;
}
INPUT.form170, TEXTAREA.form170 {
    width: 170px;
    color: #666666;
}
INPUT.form200, TEXTAREA.form200 {
    width: 200px;
    color: #666666;
}
INPUT.form250, TEXTAREA.form250 {
    width: 250px;
    color: #666666;
}
INPUT.form300, TEXTAREA.form300 {
    width: 300px;
    color: #666666;
}
INPUT.form400, TEXTAREA.form400 {
    width: 400px;
    color: #666666;
}

.label {
margin-top:10px;
}

.input {
float:right;
}

You may wish to add this CSS to play with positioning of your input areas

HTML Code:

#details_right p{
    text-align:right  /*or left*/
}

Also might want to play with padding & margins in #details_right and #details_left

The CSS is valid... you may want to re-evaluate your XHTML form.. the php is not going to validate.. 9 errors, I think you can handle sorting that

alex_gomy · #7 (**permalink**) 29-02-2008, 03:18 AM

Sweet cheers for that tommy. You got a business in the U.S? if so let me know what and where and i'll give you a free premium listing on our site.

tommylogic · #8 (**permalink**) 29-02-2008, 01:45 PM

No problem... I only left the php untouched because I know you have an outstanding programmer.

Thank you for the offer, I'll be in touch.

Meanwhile you can check out my site here... Tommy Logic | Valid XHTML and CSS Web Design

PaulClark · #9 (**permalink**) 07-03-2008, 12:03 AM

Hi Guys,

Sorry to throw a spanner in the works, but there's a bit of an accessibility issue with this proposed solution. I've read that web developers in the US are a bit less hung up on this than in Europe, but might as well flag it up anyway:

tommylogic's solution works visually, but completely divorces the field labels from the fields. Imagine someone accessing the page with assistive technology such as a screen reader. They would get a list of all the field labels, and then separately following that all the fields to fill in. To complete the form, they would need to remember the order that all the labels were in to know what is to go in each field.

Putting the labels and fields in a table would actually be more accessible than this, but the best solution if you want to use CSS and be accessible is to use the following pattern for each row of input data (taking the Forename field as an example):

HTML Code:

<div class="myfield">
    <label for="forename">Forename</label>
    <input name="forename" id="forename" type="text" />
</div>

The CSS that will make this layout correctly looks as follows:

HTML Code:

.myfield {
    clear:left;
    }

.myfield label {
    float:left;
    width:200px;      /* or whatever width you want */
    }

.myfield input {
    width:250px;      /* or whatever width you want */
    }

Additional margins and padding can be added as required to space the form out the way you want it.

As can be seen, this technique keeps the field inputs in their natural order behind the field labels, and also positively associates labels to fields using the 'label for' construction. 'Label for' can and ideally also should be used when laying out with tables.

tommylogic · #10 (**permalink**) 07-03-2008, 12:10 AM

he said valid, not accessible.. haha.. yes, after looking at it, I see that too. This works well, good solution.