[SOLVED] More alignment help

[debtless]

Hi, I have explored through the forum however can not find the answer for me. I am new to CSS and are having one last problem putting a line of text where it needs to go. I want the line "Please be as accurate as you can." to be left aligned to the "2" image. Here is the webpage.

http://allnewzealandrealestate.com/formpage.html

Note the links do not work yet and neither does the form. That is the next step. Just trying to get this piece of css out of the way first.

Thanks for your help.

Brent

[Daniel0]

First, remove the div for the "2" image.

 

Next, replace the CSS rules for the selector .formboxcontent h2 to:

.formboxcontent h2 {
font-weight: bold;
height: 34px;
line-height: 34px;
margin-left: 75px;
padding-left: 40px;
font-size: 1.3em;
background: url(../images/Step02.gif) no-repeat;
color: #415181;
}

[debtless]

Thanks Daniel0. That was so simple. I can see I was stuck on one train of thought.

 

A friend just commented on the form being long. I don't want to break it into 2 pages but maybe I can squeeze it a little. How would I get the check boxes to be in 2 columns?

 

Cheers

[Daniel0]

You can make its container <div> into an unordered list (<ul>) and then make each checkbox+label combination a list item (<li>). You can then set the <li> to have width:50%;float:left;.

[Daniel0]

Another thing you might do if you think it's too long is to use <fieldset>s. This group your form into sections and will make the form look less cluttered.

[debtless]

Hmmmm...OK. Tried that with the list however does not seem to work. Tried in a blank page with minimal css and it works. Maybe because my divs are already list items? But you can put a list within a list correct?

 

Here is my checkbox list:

 

<li id="" class=" ">
<label class="desc" id="" for="living">
	Living Areas
			</label>

<div class="columns"><ul>
	<li class="lareas"><input id="" name="living" type="checkbox" class="field checkbox" value="Open Plan" tabindex="6" />
<label class="choice" for="living">Open Plan</label></li>
	<li class="lareas"><input id="" name="living" type="checkbox" class="field checkbox" value="Separate Lounge" tabindex="7" />
<label class="choice" for="living">Separate Lounge</label></li>
	<li class="lareas"><input id="" name="living" type="checkbox" class="field checkbox" value="Family Room" tabindex="8" />
<label class="choice" for="living">Family Room</label></li>
	<li class="lareas">	<input id="" name="living" type="checkbox" class="field checkbox" value="Seperate Dining" tabindex="9" />
<label class="choice" for="living">Seperate Dining</label></li>
		<li class="lareas"><input id="" name="living" type="checkbox" class="field checkbox" value="Office" tabindex="10" />
<label class="choice" for="living">Office</label></li>
		<li class="lareas"><input id="" name="living" type="checkbox" class="field checkbox" value="Sunroom Conservatory" tabindex="11" />
<label class="choice" for="living">Sunroom/Conservatory</label></li>
<li class="lareas"><input id="" name="living" type="checkbox" class="field checkbox" value="Rumpus Room" tabindex="12" />
<label class="choice" for="living">Rumpus Room</label></li>
	</ul></div>
</li>

 

There must be other css code interferring....

[Daniel0]

Add padding:0;clear:none; to li.lareas. Also, you seem to have lost the id values on your checkboxes, so clicking the labels doesn't work.

[debtless]

Thanks for the help.