...

View Full Version : How do I line up the radio buttons and checkboxes in this form?



sbzero546
11-14-2011, 10:28 PM
Here is the code I just want to line up the form named reservation. Should I use position:relative? Thx:thumbsup:


<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>

Sammy12
11-15-2011, 12:59 AM
nah, position: relative; is actually rarely used for that purpose

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



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum