Associate
- Joined
- 27 Jan 2005
- Posts
- 1,373
- Location
- S. Yorks
I am writing a HTML file just to learn a few things what I am wanting to do is position a few select boxes on a form with labels to the left of these select boxes, all very simple but it doesn't seem to be working as I expect.
I have also created a CSS file
All I want to do is be able to position the quoteselect and have the label to the left of this - what am I doing wrong?
Matt
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<label class="left">Select Quote:</label>
<select id="quoteselect" name="quoteselect" onchange="populateDD2()"></select>
<h1><select id="quote" name="quote"></select></h1>
<h1><select id="customer" name="customer"></select></h1>
<h1><select id="pricelist1" name="pricelist1"></select></h1>
<h1><select id="pricelist2" name="pricelist2"></select></h1>
<h1><select id="pricelist3" name="pricelist3"></select></h1>
<select id="month" name="month"></select>
<script type="text/javascript">
populateDD();
</script>
</body>
</head>
</html>
I have also created a CSS file
Code:
#quoteselect
{
position:absolute;
top: 100px;
left: 200px;
width: 150px;
}
label{
position: absolute;
}
.right{
top: 0;
left: 100%;
}
.left{
top: 0;
right: 100%;
}
.top{
bottom: 100%;
left: 0;
}
.bottom{
top: 100%;
left: 0;
}
#quote
{
position:absolute;
top: 100px;
left: 200px;
width: 150px;
}
#customer
{
position:absolute;
top: 100px;
left: 200px;
width: 150px;
}
#pricelist1
{
position:absolute;
top: 100px;
left: 200px;
width: 150px;
}
#pricelist2
{
position:absolute;
top: 100px;
left: 200px;
width: 150px;
}
#pricelist3
{
position:absolute;
top: 100px;
left: 200px;
width: 150px;
}
All I want to do is be able to position the quoteselect and have the label to the left of this - what am I doing wrong?
Matt