SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,921
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Styling Drop-downs

    How do I add a label or labels to my "Expiration Month" and "Expiration Date" drop-down lists?

    Also, what is the best way to position them?

    Should I make each one an <LI> ??

    Here is my code...

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Payment Form</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<link type="text/css" rel="stylesheet" href=".css">
    		<style type="text/css" >
    			form{
    				width: 400px;
    				margin: 0 auto;
    			}
     
    			fieldset{
    				margin: 1.5em 0 0 0;
    				padding: 0;
    			}
     
    			legend{
    				margin: 0 0 0 1em;
    				color: #000000;
    				font-weight: bold;
    			}
     
    			fieldset ol{
    				padding: 1em 1em 0 1em;
    				list-style: none;
    			}
     
    			fieldset li{
    				padding: 0 0 1em 0;
    			}
     
    			fieldset.submit{
    				border-style: none;
    				padding: 0 0 0 12em;
    			}
     
    			label{
    				float: left;
    				text-align: right;
    				width: 10em;
    				margin: 0 1em 0 0;
    			}
     
    		</style>
    	</head>
    	<body>
    		<form action="process_payment.php">
    			<fieldset>
    				<legend>Billing Details</legend>
    				<ol>
    					<li>
    						<label for="firstName">First Name:</label>
    						<input id="firstName" name="firstName" class="text" type="text" />
    					</li>
    					<li>
    						<label for="middleInitial">M.I.:</label>
    						<input id="middleInitial" name="middleInitial" class="text" type="text" />
    					</li>
    					<li>
    						<label for="lastName">Last Name:</label>
    						<input id="lastName" name="lastName" class="text" type="text" />
    					</li>
    					<li>
    						<label for="address1">Address1:</label>
    						<input id="address1" name="address1" class="text" type="text" />
    					</li>
    					<li>
    						<label for="address2">Address2:</label>
    						<input id="address2" name="address2" class="text" type="text" />
    					</li>
    					<li>
    						<label for="city">City:</label>
    						<input id="city" name="city" class="text" type="text" />
    					</li>
    					<li>
    						<label for="state">State:</label>
    						<input id="state" name="state" class="text" type="text" />
    					</li>
    					<li>
    						<label for="zip">Zip:</label>
    						<input id="zip" name="zip" class="text" type="text" />
    					</li>
    					<li>
    						<label for="teleNo">Telephone No.:</label>
    						<input id="teleNo" name="teleNo" class="text" type="text" />
    					</li>
    					<li>
    						<label for="email">Email:</label>
    						<input id="email" name="email" class="text" type="text" />
    					</li>
    				</ol>
    			</fieldset>
     
    			<fieldset>
    				<legend>Credit Card Details</legend>
    				<ol>
    					<li>
    						<label for="cardNumber">Credit Card Number:</label>
    						<input id="cardNumber" name="cardNumber" class="text" type="text" />
    					</li>
    					<li>
    					<select name="expMonth">
    						<option></option>
    						<option>01</option>
    						<option>02</option>
    						<option>03</option>
    						<option>04</option>
    						<option>05</option>
    						<option>06</option>
    						<option>07</option>
    						<option>08</option>
    						<option>09</option>
    						<option>10</option>
    						<option>11</option>
    						<option>12</option>
    					</select>
    					<select name="expYear">
    						<option></option>
    						<option>2011</option>
    						<option>2012</option>
    						<option>2013</option>
    						<option>2014</option>
    						<option>2015</option>
    						<option>2016</option>
    						<option>2017</option>
    						<option>2018</option>
    						<option>2019</option>
    						<option>2020</option>
    					</select>
    					<li>
    						<label for="cvv">CVV Code:</label>
    						<input id="cvv" name="cvv" class="text" type="text" />
    					</li>
    				</ol>
    			</fieldset>
     
    			<fieldset class="submit">
    				<input class="submit" type="submit" value="Process Order" />
    			</fieldset>
    		</form>
    	</body>
    </html>

    Thanks,



    Debbie

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

    If you want them on one line then keep them within the same parent. Your existing code would seem to allow this to happen quote easily.



    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Payment Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href=".css">
    <style type="text/css" >
    form {
        width: 400px;
        margin: 0 auto;
    }
    fieldset {
        margin: 1.5em 0 0 0;
        padding: 0;
    }
    legend {
        margin: 0 0 0 1em;
        color: #000000;
        font-weight: bold;
    }
    fieldset ol {
        padding: 1em 1em 0 1em;
        margin:0;
        list-style: none;
    }
    fieldset li {
        padding: 0 0 1em 0;
        width:100%;
        overfrlow:hidden;
    }
    fieldset.submit {
        border-style: none;
        padding: 0 0 0 12em;
    }
    label {
        float: left;
        text-align: right;
        width: 10em;
        margin: 0 1em 0 0;
    }
    </style>
    </head>
    <body>
    <form action="process_payment.php">
        <fieldset>
        <legend>Billing Details</legend>
        <ol>
            <li>
                <label for="firstName">First Name:</label>
                <input id="firstName" name="firstName" class="text" type="text" />
            </li>
            <li>
                <label for="middleInitial">M.I.:</label>
                <input id="middleInitial" name="middleInitial" class="text" type="text" />
            </li>
            <li>
                <label for="lastName">Last Name:</label>
                <input id="lastName" name="lastName" class="text" type="text" />
            </li>
            <li>
                <label for="address1">Address1:</label>
                <input id="address1" name="address1" class="text" type="text" />
            </li>
            <li>
                <label for="address2">Address2:</label>
                <input id="address2" name="address2" class="text" type="text" />
            </li>
            <li>
                <label for="city">City:</label>
                <input id="city" name="city" class="text" type="text" />
            </li>
            <li>
                <label for="state">State:</label>
                <input id="state" name="state" class="text" type="text" />
            </li>
            <li>
                <label for="zip">Zip:</label>
                <input id="zip" name="zip" class="text" type="text" />
            </li>
            <li>
                <label for="teleNo">Telephone No.:</label>
                <input id="teleNo" name="teleNo" class="text" type="text" />
            </li>
            <li>
                <label for="email">Email:</label>
                <input id="email" name="email" class="text" type="text" />
            </li>
        </ol>
        </fieldset>
        <fieldset>
        <legend>Credit Card Details</legend>
        <ol>
            <li>
                <label for="cardNumber">Credit Card Number:</label>
                <input id="cardNumber" name="cardNumber" class="text" type="text" />
            </li>
            <li>
                <label for="expMonth">Month Expires:</label>
                <select id="expMonth" name="expMonth">
                    <option></option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <label for="expyear"></label>
                Year Exp.:
                </label>
                <select id="expYear" name="expYear">
                    <option></option>
                    <option>2011</option>
                    <option>2012</option>
                    <option>2013</option>
                    <option>2014</option>
                    <option>2015</option>
                    <option>2016</option>
                    <option>2017</option>
                    <option>2018</option>
                    <option>2019</option>
                    <option>2020</option>
                </select>
            <li>
                <label for="cvv">CVV Code:</label>
                <input id="cvv" name="cvv" class="text" type="text" />
            </li>
        </ol>
        </fieldset>
        <fieldset class="submit">
        <input class="submit" type="submit" value="Process Order" />
        </fieldset>
    </form>
    </body>
    </html>
    Personally I don't use lists for form elements but I know that others have made a case for them. I prefer to use divs or breaks to separate items but the coding techniqure is much the same either way.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,921
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I fixed my code to look like yours but there are still a few issues...

    1.) What is the best way to change the style on the labels for the drop-downs?

    Since there are two on a line, I need a narrower label width than 10em, but I don't know if I should add a class to the label or there is a better way to change the style for them.


    2.) More importantly, the drop-downs - what exactly is the proper name??? - are "hopping" over the labels and moving to the far right?!


    Here is my code...

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Payment Form</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<link type="text/css" rel="stylesheet" href=".css">
    		<style type="text/css" >
    			form{
    				width: 400px;
    				margin: 0 auto;
    			}
     
    			fieldset{
    				margin: 1.5em 0 0 0;
    				padding: 0;
    			}
     
    			legend{
    				margin: 0 0 0 1em;
    				color: #000;
    				font-weight: bold;
    			}
     
    			fieldset ol{
    				margin: 0; /* NEW */
    				padding: 1em 1em 0 1em;
    				list-style: none;
    			}
     
    			fieldset li{
    				width: 100%;	/* NEW */
    				padding: 0 0 1em 0;
    				overflow: hidden; /* NEW */
    			}
     
    			fieldset.submit{
    				padding: 0 0 0 12em;
    				border-style: none;
    			}
     
    			label{
    				float: left;
    				text-align: right;
    				width: 10em;
    				margin: 0 1em 0 0;
    			}
     
    		</style>
    	</head>
    	<body>
    		<form action="process_payment.php">
    			<fieldset>
    				<legend>Billing Details</legend>
    				<ol>
    					<li>
    						<label for="firstName">First Name:</label>
    						<input id="firstName" name="firstName" class="text" type="text" />
    					</li>
    					<li>
    						<label for="middleInitial">M.I.:</label>
    						<input id="middleInitial" name="middleInitial" class="text" type="text" />
    					</li>
    					<li>
    						<label for="lastName">Last Name:</label>
    						<input id="lastName" name="lastName" class="text" type="text" />
    					</li>
    					<li>
    						<label for="address1">Address1:</label>
    						<input id="address1" name="address1" class="text" type="text" />
    					</li>
    					<li>
    						<label for="address2">Address2:</label>
    						<input id="address2" name="address2" class="text" type="text" />
    					</li>
    					<li>
    						<label for="city">City:</label>
    						<input id="city" name="city" class="text" type="text" />
    					</li>
    					<li>
    						<label for="state">State:</label>
    						<input id="state" name="state" class="text" type="text" />
    					</li>
    					<li>
    						<label for="zip">Zip:</label>
    						<input id="zip" name="zip" class="text" type="text" />
    					</li>
    					<li>
    						<label for="teleNo">Telephone No.:</label>
    						<input id="teleNo" name="teleNo" class="text" type="text" />
    					</li>
    					<li>
    						<label for="email">Email:</label>
    						<input id="email" name="email" class="text" type="text" />
    					</li>
    				</ol>
    			</fieldset>
     
    			<fieldset>
    				<legend>Credit Card Details</legend>
    				<ol>
    					<li>
    						<label for="cardNumber">Credit Card Number:</label>
    						<input id="cardNumber" name="cardNumber" class="text" type="text" />
    					</li>
    					<li>
    						<label for="expMonth">Exp Month:</label>
    						<select name="expMonth">
    							<option></option>
    							<option>01</option>
    							<option>02</option>
    							<option>03</option>
    							<option>04</option>
    							<option>05</option>
    							<option>06</option>
    							<option>07</option>
    							<option>08</option>
    							<option>09</option>
    							<option>10</option>
    							<option>11</option>
    							<option>12</option>
    						</select>
    						<label for="expMonth">Exp Year:</label>
    						<select name="expYear">
    							<option></option>
    							<option>2011</option>
    							<option>2012</option>
    							<option>2013</option>
    							<option>2014</option>
    							<option>2015</option>
    							<option>2016</option>
    							<option>2017</option>
    							<option>2018</option>
    							<option>2019</option>
    							<option>2020</option>
    						</select>
    					<li>
    						<label for="cvv">CVV Code:</label>
    						<input id="cvv" name="cvv" class="text" type="text" />
    					</li>
    				</ol>
    			</fieldset>
     
    			<fieldset class="submit">
    				<input class="submit" type="submit" value="Process Order" />
    			</fieldset>
    		</form>
    	</body>
    </html>

    Thanks,


    Debbie

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Sorry, I had typos in that code.

    I would probably put the month and year on top of the selects although it complicates the mark up a bit but it looks neater and is more usable.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Payment Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href=".css">
    <style type="text/css" >
    form.billing {
        width: 400px;
        margin: 0 auto;
    }
    .billing fieldset {
        margin: 1.5em 0 0 0;
        padding: 0;
    }
    .billing legend {
        margin: 0 0 0 1em;
        color: #000000;
        font-weight: bold;
    }
    .billing ol {
        padding: 1em 1em 0 1em;
        margin:0;
        list-style: none;
    }
    .billing li {
        padding: 0 0 1em 0;
        width:100%;
        overflow:hidden;
    }
    fieldset.submit {
        border-style: none;
        padding: 0 0 0 12em;
    }
    .billing label, span.label {
        float: left;
        text-align: right;
        width: 10em;
        margin: 0 1em 0 0;
        display:inline;
    }
    span.label {
        padding:.9em 0 0;
        margin:0
    }
    label.innerlabel {
        float:none;
        display:block;
        margin:-5px 0 0;
        padding:0 0 2px;
        text-align:left;
        width:auto;
        font-size:92%;
    }
    .billing select {
        display:block;
        width:4.9em;
    }
    .group {
        float:left;
        margin:0 0 0 1em;
    }
    
    </style>
    </head>
    <body>
    <form class="billing" action="process_payment.php">
        <fieldset >
        <legend>Billing Details</legend>
        <ol>
            <li>
                <label for="firstName">First Name:</label>
                <input id="firstName" name="firstName" class="text" type="text" />
            </li>
            <li>
                <label for="middleInitial">M.I.:</label>
                <input id="middleInitial" name="middleInitial" class="text" type="text" />
            </li>
            <li>
                <label for="lastName">Last Name:</label>
                <input id="lastName" name="lastName" class="text" type="text" />
            </li>
            <li>
                <label for="address1">Address1:</label>
                <input id="address1" name="address1" class="text" type="text" />
            </li>
            <li>
                <label for="address2">Address2:</label>
                <input id="address2" name="address2" class="text" type="text" />
            </li>
            <li>
                <label for="city">City:</label>
                <input id="city" name="city" class="text" type="text" />
            </li>
            <li>
                <label for="state">State:</label>
                <input id="state" name="state" class="text" type="text" />
            </li>
            <li>
                <label for="zip">Zip:</label>
                <input id="zip" name="zip" class="text" type="text" />
            </li>
            <li>
                <label for="teleNo">Telephone No.:</label>
                <input id="teleNo" name="teleNo" class="text" type="text" />
            </li>
            <li>
                <label for="email">Email:</label>
                <input id="email" name="email" class="text" type="text" />
            </li>
        </ol>
        </fieldset>
        <fieldset>
        <legend>Credit Card Details</legend>
        <ol>
            <li>
                <label for="cardNumber">Credit Card Number:</label>
                <input id="cardNumber" name="cardNumber" class="text" type="text" />
            </li>
            <li> <span class="label">Expires:</span> <span class="group">
                <label class="innerlabel" for="expMonth">Month</label>
                <select id="expMonth" name="expMonth">
                    <option></option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                </span> <span class="group">
                <label class="innerlabel" for="expyear">Year</label>
                <select id="expYear" name="expYear">
                    <option></option>
                    <option>2011</option>
                    <option>2012</option>
                    <option>2013</option>
                    <option>2014</option>
                    <option>2015</option>
                    <option>2016</option>
                    <option>2017</option>
                    <option>2018</option>
                    <option>2019</option>
                    <option>2020</option>
                </select>
                </span>
            <li>
                <label for="cvv">CVV Code:</label>
                <input id="cvv" name="cvv" class="text" type="text" />
            </li>
        </ol>
        </fieldset>
        <fieldset class="submit">
        <input class="submit" type="submit" value="Process Order" />
        </fieldset>
    </form>
    </body>
    </html>

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,921
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Sorry, I had typos in that code.

    I would probably put the month and year on top of the selects although it complicates the mark up a bit but it looks neater and is more usable.
    That looks much better!

    Some pretty fancy gun-slingin' you did there!

    Thanks,


    Debbie


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
  •