CSS Form Layout help

[almaline03]

Can anyone help me create a form that looks like this:




Thanks in advance!

[BLiZZaRD]

In what language? I realize you posted in CSS, but pure CSS forms? Only if you want them to do nothing.

JavaScript would work, PHP would be better... I can write up a CSS/HTML code to make one look just like that, but it won't function very well. Combine those looks with php and you have a winner, if that's what you want.

[almaline03]

Hi Blizzard, thank you for the reply. I just need it layed out in css/html for now. I will add the php script to it later. I just need help with the visual layout. I struggle with the gridlike features in css. I am trying to get out of using tables, but I can never get things to line up correctly. Things like this are taking me hours upon hours right now..lol.

In addition to the layout above I am trying to do one like this. I will probably see how you do the top one and follow the structure to build this one.

[BLiZZaRD]

Okay, well there is a quick and dirty way, like I have done here, and a "I want perfection" way, which I can do if you need more help.

Quick and dirty html:

<div class="greenMenu">
<h1>FOR SALE</h1>
<p>
<form>
<p>
<input type="text" size="25" value="City, State, Zip">
Price: <select name="price">
<option value="min">0 - 10</option>
<option value="med">11 - 20</option>
<option value="high">21 - 30</option>
<option value="max">31 - 50</option>
</select>
<select name="price2">
<option value="min">0 - 10</option>
<option value="med">11 - 20</option>
<option value="high">21 - 30</option>
<option value="max">31 - 50</option>
</select>
<br>
E.G. "Naples, FL"
</p><p>
<input type="checkbox" name="open" value="open">Show open houses first<br>
<input type="checkbox" name="open" value="images">Show only asd w/ Images<br>
<input type="text" size="25" value="Enter a Listing Number">

Beds:
<select name="beds">
<option value="min">0 - 1</option>
<option value="med">1 - 2</option>
<option value="high">2 - 3</option>
<option value="max">3 - 5</option>
</select>
</p>
</div>

Quick and dirty CSS:

.greenMenu
{
	background: green;
	border: 1px solid yellow;
	font-family: Georgia, Arial, SunSans-Regular, sans-serif;
	font-size: 15px;
	font-style: normal;
	color: #000;
	width: 500px;
	height: 200px;
}

.greenMenu h1 {
	font-weight: 800;
}

You will notice that there is no submit button. Because the button shown is an image I figured you had one and could add it.