• Locked
1 reply [Last post]
Mon, 2014-03-31 00:56
Kip
Kip's picture
Offline
newbie
Last seen: 9 years 18 hours ago
Timezone: GMT-6
Joined: 2014-03-30
Posts: 2
Points: 3

Hi, I have made good progress helping a friend with an assignment, but we are stumped as to how to fix the remaining layout issue. The fields and labels following "Credit Card" won't line up as they should. I have tried a number of hacks trying to get closer to a solution but without positive results, so here I am asking for any advice that those with more knowledge than me might have.

The code is below, and there is also a Github Gist available here https://gist.github.com/anonymous/9881826 if anyone would prefer to look at it there/that way...

Thank you!

HTML

<!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>Park City Gazette Subscription</title>
	<link  href="pcg.css" rel="stylesheet" type="text/css"/>
	<link href="sform.css" rel="stylesheet" type="text/css"/>
   </head>
 
<body>
 
   <div id="header">
      <img src="pcglogo.jpg" alt="The Park City Gazette" />
   </div>
 
   <div id="leftColumn">
      <h2><a href="#">Home Page</a></h2>
      <h2><a href="#">News</a></h2>
      <ul>
         <li><a href="#">Local</a></li>
         <li><a href="#">State</a></li>
         <li><a href="#">National</a></li>
         <li><a href="#">International</a></li>
         <li><a href="#">Sports</a></li>
         <li><a href="#">Weather</a></li>
      </ul>
      <h2><a href="#">Classifieds</a></h2>
      <ul>
         <li><a href="#">For Sale</a></li>
         <li><a href="#">Wanted</a></li>
         <li><a href="#">Employment</a></li>
         <li><a href="#">Real Estate</a></li>
         <li><a href="#">Personals</a></li>
      </ul>
      <h2><a href="#">Tourism</a></h2>
      <ul>
         <li><a href="#">Attractions</a></li>
         <li><a href="#">Events</a></li>
         <li><a href="#">Parks</a></li>
         <li><a href="#">Camping</a></li>
      </ul>
      <h2><a href="#">Subscriptions</a></h2>
      <h2><a href="#">Contact Us</a></h2>
   </div>
 
   <div id="rightColumn">
      <h1>Subscriptions</h1>
      <p>Yes, I want to subscribe to the Park City Gazette! <br />
         I can choose from one of the following options:</p>
 
		<form id="subForm" name="subForm"
				action="http//www.theparkcitygazette.com/subscribe"
				method="post">
			<fieldset id="subPlans">
				<input type ="radio" name="plan1" id="plan1" value="1" />
				<label for="subplan">6 mo./$24</label>
 
				<input type ="radio" name="plan2" id="plan2" value="2" />
				<label for="subplan">12 mo./$45</label>
 
				<input type ="radio" name="plan3" id="plan3" value="3" />
				<label for="subplan">18 mo./$64</label>
 
				<input type ="radio" name="plan4" id="plan4" value="4" />
				<label for="subplan">24 mo./$80 (best value)</label>
 
			</fieldset>
 
			<label for="cName" class="floatLabel">Name</label>
			<input type ="text"  class="floatCtrl" size="50" />
 
			<label for="address" class="floatLabel">Address</label>
			<textarea name="address" class="floatCtrl" rows="6" cols="50" ></textarea>
 
			<label for="agree" id="agreeLabel" class="floatLabel">
				<input type="checkbox" />
				Yes, I wish to pay online by entering my credit card information below.
			</label>
 
			<fieldset id="payment">
				<label for="cardType" class="floatLabel">Credit Card</label>
				<select name="cardType" id="cardType" class="floatCtrl" size="4">
					<option value="Amex">American Express</option>
					<option value="Disc">Discover</option>
					<option value="MC">Master Charge</option>
					<option value="Visa">Visa</option>
				</select>			
 
				<label for="cardname" class="floatlabel" >Name on Card</label>
				<input type="text" name="cardName" class="floatctrl" size="30"  />				
 
				<label for="cardNumber" class="floatLabel" >Card Number</label>
				<input type="text" name="cardNumber" class="floatCtrl" size="30" />
 
				<label for="expDate" class="floatLabel">Expiration Date</label>
				<select name="expMonth" class="floatCtrl">
						<option value="1">01</option>
						<option value="2">02</option>
						<option value="3">03</option>
						<option value="4">04</option>
						<option value="5">05</option>
						<option value="6">06</option>
						<option value="7">07</option>
						<option value="8">08</option>
						<option value="9">09</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select>
 
					<select name="expYear" class="floatCtrl">
						<option value="2011">2011</option>
						<option value="2012">2012</option>
						<option value="2013">2013</option>
						<option value="2014">2014</option>
						<option value="2015">2015</option>
					</select>
 
			</fieldset>
 
			<fieldset id="buttons">
 
				<input type="submit" value="Subscribe" />
				<input type="reset" value="Cancel" />
 
			</fieldset>
		</form>
 
 
   </div>
 
</body>
 
</html>

CSS

/*
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 6
   Case Problem 1
 
   Subscription Form Style Sheet
   Author:Jonathon L. Bayliff 
   Date:3/14/2014   
 
   Filename:         sform.css
   Supporting files: parch.jpg, pcglogo.jpg, pcg.css, subscription.htm
*/
body                   
{margin: 0px; background-image: url(parch.jpg);
font-family: Arial, Helvetica, sans-serif}
 
#header                
{position: absolute; top: 20px; left: 80px}
 
#leftColumn            
{position: absolute; top: 180px; left: 10px; 
width: 100px; color: rgb(63,56,46)}
 
#leftColumn h2         
{font-size: 14px; margin: 10px 0px 0px 2px;
font-weight: normal}
 
#leftColumn ul         
{list-style-type: none; margin: 0px; padding: 0px;
margin-left: 22px; font-size: 12px}
 
#leftColumn ul li     
{margin: 0px; padding: 0px; line-height: 1.4}
 
#leftColumn a          
{text-decoration: none; color: black}
 
#leftColumn a:visited  
{color: black}
#leftColumn a:hover    
{text-decoration: underline}
 
#rightColumn           
{position: absolute; top: 180px; left: 125px; width: 600px;
font-size: 14px}
 
#rightColumn h1        
{font-size: 24px; margin: 0px; padding: 0px;
text-align: center; font-weight: normal;
letter-spacing: 5px}
 
#rightColumn p         
{text-align: center}
 
#rightColumn address   
{font-size: 10px; font-style: normal; text-align: center;
border-top: 1px solid rgb(63,56,46); margin-bottom: 20px}
 
#subPlans					{background-color: white; padding: 5px; margin-bottom: 20px; text-align: center}
 
#subPlans label				{margin-right: 15px}
 
.floatLabel					{display: block; float: left; clear: left; width: 150px; margin-bottom: 10px; text-align: right}
 
.floatCtrl					{display: block; float: left; margin-left: 20px; margin-bottom: 10px}
 
#agreeLabel					{width: 600px; margin: 20 px 0 px 20px 0px; text-align: center}
 
#payment					{clear: left; background-color: white; width: 400px; margin-left: 100px; padding: 5px}
 
#buttons					{text-align: center; margin: 10px 0px 10px 0px; border-style: none}

Top
Tags:
Mon, 2014-03-31 01:12
#1
Kip
Kip's picture
Offline
newbie
Last seen: 9 years 18 hours ago
Timezone: GMT-6
Joined: 2014-03-30
Posts: 2
Points: 3

Adding screenshot to illustrate the issue

Adding screenshot to illustrate the issue, please see attached...

AttachmentSize
screenshot.layout.png 1006.77 KB
Top
  • Locked