Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I line up the radio buttons and checkboxes in this form?

    Here is the code I just want to line up the form named reservation. Should I use position:relative? Thx
    Code:
    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="airline.css" />
    	<title>Reservation</title>
    	<script type="text/javascript">
    		function bookTicket()
    		{
    			alert("test");
    		}
    	</script>
    	<style type="text/css">
    		#main_content{font-size:110%;}
    	</style>
    </head>
    <body>
    	<div id="header">
    	<h2>The Chicago Airline</h2>
    	</div>
    
    	<div id="main_content">
    <p><form name="reservation">
    	First Name:<input type="text" name="txtFirstName" />
    	Last Name:<input type="text" name="txtLastName" />
    
    	<p>Choose Your Arrival City<br /></p>
    	New York<input type="radio" name="radCity" /><br />
    	Las Vegas<input type="radio" name="radCity" /><br />
    	Seattle<input type="radio" name="radCity" /><br />
    
    	<p>Choose the number of days<br />
    	<select name="selDays">
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6">6</option>
    	<option value="7">7</option>
    	<option value="8">8</option>
    	</p></select>
    
    	<p>Any extra baggage on this flight?<br />
    	<select name="selBaggage">
    	<option value="No Extra Bags">No Extra Bags</option>
    	<option value="1 Extra Bag">1 Extra Bag</option>
    	<option value="2 Extra Bags">2 Extra Bags</option>
    	<option value="3 Extra Bags">3 Extra Bags</option>
    	</p></select>
    
    	<p>Type of Ticket<br />
    	Economy<input type="checkbox" name="chkEconomy" /><br />
    	Business<input type="checkbox" name="chkBusiness" /><br />
    	First Class<input type="checkbox" name="chkFirstClass" /><br />
    	</p>
    
    	<p>Are you bringing a pet on this trip?<br />
    	Yes<input type="checkbox" name="chkYes" /><br />
    	No<input type="checkbox" name="chkNo" /><br />
    	</p>
    
    	<p>Select a hotel<br />
    	Economy Hotel<input type="radio" name="radHotel" /><br />
    	Standard Hotel<input type="radio" name="radHotel" /><br />
    	Upscale Hotel<input type="radio" name="radHotel" /><br />
    
    	Special Requests?<textarea name="txttarSpecialRequests" cols="25" rows="5">
    					 </textarea>
    
    	<p><input type="button" name="btnSubmit" value="Book My Ticket" onclick="bookTicket()" /></p>
    </div></form>
    </p>
    <div id="navagation_links">
    <p><form name="navagation">
    	<p>Make a Reservation</p>
    	<p>Contact Us</p>
    	<p>Join Our Mailing List</p>
    	<p>Home</p>
    </div></form>
    </p>
    </body>
    </html>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    nah, position: relative; is actually rarely used for that purpose

    the only things I changed were "choose your arrival city" and added a doctype.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="airline.css" />
    	<title>Reservation</title>
    	<script type="text/javascript">
    		function bookTicket()
    		{
    			alert("test");
    		}
    	</script>
    	<style type="text/css">
    		#main_content{font-size:110%;}
    		.radio-inline {
    			
    		}
    		.radio-inline p {
    			
    		}
    		.radio-inline .level {
    			overflow: hidden;
    			zoom: 1;
    		}
    		.radio-inline .level .city {
    			float: left;
    			width: 80px;
    		}
    		.radio-inline .level .input {
    			float: left;
    			width: 100px;
    		}
    	</style>
    </head>
    <body>
    	<div id="header">
    		<h2>The Chicago Airline</h2>
    	</div>
    	<div id="main_content">
    		<form name="reservation">
    			First Name:<input type="text" name="txtFirstName" />
    			Last Name:<input type="text" name="txtLastName" />
    			
    			<!-- begin #choose-arrival-city -->
    			<div id="choose-arrival-city" class="radio-inline">
    				<p>Choose your arrival city</p>
    				<div class="level">
    					<label class="city">New York</label>
    					<input type="radio" name="radCity" class="input"/>
    				</div>
    				<div class="level">
    					<label class="city">Las Vegas</label>
    					<input type="radio" name="radCity" class="input"/>
    				</div>
    				<div class="level">
    					<label class="city">Seattle</label>
    					<input type="radio" name="radCity" class="input"/>
    				</div>
    			</div>
    			<!-- end #choose-arrival-city -->
    	
    	<p>Choose the number of days<br />
    	<select name="selDays">
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="5">5</option>
    	<option value="6">6</option>
    	<option value="7">7</option>
    	<option value="8">8</option>
    	</p></select>
    
    	<p>Any extra baggage on this flight?<br />
    	<select name="selBaggage">
    	<option value="No Extra Bags">No Extra Bags</option>
    	<option value="1 Extra Bag">1 Extra Bag</option>
    	<option value="2 Extra Bags">2 Extra Bags</option>
    	<option value="3 Extra Bags">3 Extra Bags</option>
    	</p></select>
    
    	<p>Type of Ticket<br />
    	Economy<input type="checkbox" name="chkEconomy" /><br />
    	Business<input type="checkbox" name="chkBusiness" /><br />
    	First Class<input type="checkbox" name="chkFirstClass" /><br />
    	</p>
    
    	<p>Are you bringing a pet on this trip?<br />
    	Yes<input type="checkbox" name="chkYes" /><br />
    	No<input type="checkbox" name="chkNo" /><br />
    	</p>
    
    	<p>Select a hotel<br />
    	Economy Hotel<input type="radio" name="radHotel" /><br />
    	Standard Hotel<input type="radio" name="radHotel" /><br />
    	Upscale Hotel<input type="radio" name="radHotel" /><br />
    
    	Special Requests?<textarea name="txttarSpecialRequests" cols="25" rows="5">
    					 </textarea>
    
    	<p><input type="button" name="btnSubmit" value="Book My Ticket" onclick="bookTicket()" /></p>
    </div></form>
    </p>
    <div id="navagation_links">
    <p><form name="navagation">
    	<p>Make a Reservation</p>
    	<p>Contact Us</p>
    	<p>Join Our Mailing List</p>
    	<p>Home</p>
    </div></form>
    </p>
    </body>
    </html>


  •  

    Posting Permissions

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