PDA

View Full Version : Problem displaying select beside labels


LukePVB
04-02-2014, 01:16 AM
Hi, im having problems displaying select elements beside labels. The select element keep displaying just below (one line down) from where i want it to display. Please help!

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<header>
<?php
include ("header.php");
header();
?>
</header>

<nav>
<?php
include ("nav.php");
nav();
?>
</nav>

<div id="slider"></div>

<aside></aside>
<div id="content">
<form action="" method="post">
<div id="topFormElements">
<div class="leftFormElements">
<div>
<label class="mandatory">Full Name:
<input type="text" name="Name:"></input></label>
</div>
<br>
<div>
<label class="mandatory">Address:
<input type="text" name="Address:"></input></label>
</div>
<br>
<div>
<label class="mandatory">City:
<input type="text" name="City:"></input></label>
</div>
<br>
<div>
<label class="mandatory">Home Phone:
<input type="text" name="Home Phone:"></input></label>
</div>
<br>
<div>
<label class="mandatory">Cell Phone:
<input type="text" name="Cell Phone:"></input></label>
</div>
<br>
</div>

<div class="rightFormElements">
<label class="mandatory">Email:
<input type="email" name="Email:"></input></label>
<br>
<label>Closest Intersection:
<input type="text" name="Intersection"></input></label>
<br>
<label class="mandatory">Province:
<input type="text" name="Province:"></input
></label><br>
<label>Postal Code:
<input type="text" name="Postal Code:"></input></label>
<br>
<label>Work Phone:
<input type="text" name="Work Phone:"></input></label>
<br>
</div>

</div>
</div>
<div id="bestTimeToCall">
<div id="secondFromTopFormElement">
<br>
<label>Best time to call between:
<input type="text" name="Call Between:"></input></label>
<br>
</div>

<div class="formMessage">

<p>To help us deal with the problem at hand, please fill out the below form to the best of your knowledge. If you do not understand some of the terms, check out our service pages for more information or input "unknown" in the fields below.
</p>

<div id="options">
<label>Foundation Type:
<select name="Foundation Type:">
<option value="Unknown">Unknown</option>
<option value="Block">Block</option>
<option value="Stone">Stone</option>
<option value="Brick">Brick</option>
<option value="Poured Concrete">Poured Concrete</option>
</select></label>
<br>

<label>Age of House:
<select name="Age of House:">
<option value="1-10 years">1-10 years</option>
<option value="10-15 years">10-15 years</option>
<option value="15-20 years">15-20 years</option>
<option value="20-25 years">25-30 years</option>
<option value="25-30 years">25-30 years</option>
<option value="30-40 years">30-40 years</option>
<option value="40-50 years">40-50 years</option>
<option value="50-60 years">50-60 years</option>
<option value="60-75 years">60-75 years</option>
<option value="75+ years">75+ years</option>
</select></label>

<label>Do you have a sump pump?
<select name="Sump Pump:">
<option value="Unknown">Uknown</option>
<option value="yes">Yes</option>
<option value="No">No</option>
</select></label>

<label>Do you have a finished basement?
<select name="Finished Basement?">
<option value="Unknown">Unknown</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select></label>

<label>Property Type:
<select name="Property Type:">
<option value="Unknown">Unknown</option>
<option value="Residential">Residential</option>
<option value="Commercial">Commercial</option>
<option value="Industrial">Industrial</option>
<option value="Institutional">Institutional</option>
</select></label>
<br>
<div class="formMessage">
<p>What type of work would you like to be done? Please check the appropriate box(s).</p>
</div>
<br>
<div id="checkboxes">
<div class="leftFormElements">
<input type="checkbox" name="
Repair Cracked Foundation">
<label>Repair Cracked Foundation</label>
<br>
<input type="checkbox" name="Crack Injection">
<label>Crack Injection</label>
<br>
<input type="checkbox" name="Install Weeping Tile Interior Drains">
<label>Install Weeping Tile Interior Drains</label>
<br>
<input type="checkbox" name="Weeping Tile Jetting">
<label>Weeping Tile Jetting</label>
<br>
<input type="checkbox" name="Exterior Basement Waterproofing">
<label>Exterior Basement Waterproofing</label>
<br>
<input type="checkbox" name="Interior Basement Waterproofing">
<label>Interior Basement Waterproofing</label>
<br>
<input type="checkbox" name="Masonry/Brick Sealing">
<label>Masonry/Brick Sealing</label>
<br>

</div>

<div class="rightFormElements">
<input type="checkbox" name="Concrete Sealing">
<label>Concrete Sealing</label>
<br>
<input type="checkbox" name="Exterior French Drain">
<label>Exterior French Drain</label>
<br>
<input type="checkbox" name="Excavation">
<label>Excavation</label>
<br>
<input type="checkbox" name="Install/Replace Window Wells">
<label>Install/Replace Window Wells</label>
<br>
<input type="checkbox" name="Damp Proofing/Drainage Layer">
<label>Damp Proofing/Drainage Layer</label>
<br>
<input type="checkbox" name="Sump Pump Installation">
<label>Sump Pump Installation</label>
<br>
</div>
</div>


<input type="submit">
</div></div>
</form>
</div>
</div>
</body>
</html>

edbr
04-02-2014, 05:10 AM
I always put <label> something</label>. <select>………………then style each separately in CSS.

gentleone
04-02-2014, 03:04 PM
Besides what Edbr says, you don't place inputs or selects inside a label. You use them apart. Also inputs don't have closing input tags. So you might want to have something like this:

<form action="" method="post">
<div>
<label for="name">Full Name:</label>
<input type="text" name="name" />
</div>
<div>
<label for="foundation-type">Foundation Type:</label>
<select name="foundation-type">
<option value="Unknown">Unknown</option>
<option value="Block">Block</option>
<option value="Stone">Stone</option>
<option value="Brick">Brick</option>
<option value="Poured Concrete">Poured Concrete</option>
</select>
</div>
</form>

Form elements are by default inline elements which means they line-up by default after each other on the same line. This didn't happen with your form, because your HTML was weird.
Div tags are block level elements which means the fill up a whole line, so the next one starts on the next line.
I made a little demo from the above with some basic CSS:

http://cssdeck.com/labs/full/dwc-form-elements-demo

CSS:

body {
padding: 10%
}

div {
margin-bottom: 1em;
}

label, input, select {
/* changed to 'inline-block' so we can give them a width,
* but also height, margins and paddings if we need to
*/
display: inline-block;
vertical-align: top;
width: 200px;
/* following hacks if you must support IE 7 and even IE6 (lol),
* because 'inline-block' was not supported in those browsers.
*/
*display: inline;
*zoom: 1;
}