Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
CSS, Forms & Strict XHTML Help
-
18-09-2009 3:17pmHi again,
I'm working on the same project and am putting in a form to search through the database. It's proving difficult for me to meet the design/layout I came up with for the from.
Here's what I want:
and here's what I'm getting:
I'm quite new to CSS so please feel free to hammer me on any bad methods I'm using. My alignments are all off and I'm at a loss as to how to acheive the layout I want, especially with the little geometries being perfectly aligned above the check boxes. Also the "area" alignments are driving me nuts!
Hopefully someone has the time to point out how I might do this.
Thank you,
Nick<div id="preface-sidebar">
<div id="search-fields">
<form id="form1" method="post" action="">
<fieldset id="search-fieldset">
<h2>Search Plans</h2>
<hr/>
<div id="search-bedrooms">
<h6>Number of Bedrooms</h6>
<ul>
<li><label>1<input type="checkbox" name="checkbox1" id="checkbox1" /></label></li>
<li><label>2<input type="checkbox" name="checkbox2" id="checkbox2" /></label></li>
<li><label>3<input type="checkbox" name="checkbox3" id="checkbox3" /></label></li>
<li><label>4<input type="checkbox" name="checkbox4" id="checkbox4" /></label></li>
<li><label>5<input type="checkbox" name="checkbox5" id="checkbox5" /></label></li>
<li><label>6+<input type="checkbox" name="checkbox6" id="checkbox6" /></label></li>
</ul>
</div>
<div id="search-area">
<h6>Total Area</h6>
<div id="search-area-ft">
<ul>
<li><label>from</label><input name="textfield1" type="text" id="textfield1" size="4" maxlength="5" />ft2</li>
<li><label>to</label><input name="textfield3" type="text" id="textfield3" size="4" maxlength="5" />ft2</li>
</ul>
</div>
<div id="search-area-m">
<ul>
<li><label>from</label><input name="textfield2" type="text" id="textfield2" size="4" maxlength="5" />m2</li>
<li><label>to</label><input name="textfield4" type="text" id="textfield4" size="4" maxlength="5" />m2</li>
</ul>
</div>
</div>
<div id="search-geometry">
<h6>Geometry</h6>
<ul>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-vesica.png" />
<input type="checkbox" name="checkbox7" id="checkbox7" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-hex.png" />
<input type="checkbox" name="checkbox8" id="checkbox8" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-pent.png" />
<input type="checkbox" name="checkbox9" id="checkbox9" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-triangle.png" />
<input type="checkbox" name="checkbox10" id="checkbox10" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-circle.png" />
<input type="checkbox" name="checkbox11" id="checkbox11" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-square.png" />
<input type="checkbox" name="checkbox12" id="checkbox12" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-sept.png" />
<input type="checkbox" name="checkbox13" id="checkbox13" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-octa.png" />
<input type="checkbox" name="checkbox14" id="checkbox14" />
</label>
</li>
<li>
<label>
<img src="themes/acquia_slate/images/geometry-gold.png" />
<input type="checkbox" name="checkbox15" id="checkbox15" />
</label>
</li>
</ul>
</div>
<div id="search-advanced">
Advanced Search>>
</div>
<div id="search-button">
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</div>
</fieldset>
</form>
</div>
</div>#preface-sidebar {
background: url('images/search-bg.jpg') no-repeat center;
float: left;
height: 298px;
margin: 0 0 0 0px;
padding: 0px;
width: 297px;
}
#search-fields {
padding: 5px 5px 5px 15px;
}
#search-fields h2 {
color: #fff;
font-size: 1.6312em;
}
#search-fields hr {
color: #eee;
background-color: #eee;
height: 1px;
width:200px;
text-align:left;
border: 0;
}
#search-fieldset
{ border:2px;
padding: 0px;
margin: 0px;
color:none;
background-color:transparent;
}
#search-fieldset label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}
#search-bedrooms
{
}
#search-bedrooms ul
{ padding: 0px;
margin: 0px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
margin-bottom:45px;
width:300px;
}
#search-bedrooms li
{ float: left;
width: 20px;
color: #000;
}
#search-area
{ float: left;
}
#search-area-ft
{ float: left;
width: 130px;
}
#search-area-m
{ float: left;
width: 130px;
}
#search-area ul
{ padding: 0px;
margin: 0px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
#search-area li
{ float: left;
color:#000;
}
#search-geometry
{ float: left;
}
#search-geometry ul
{ padding: 0px;
margin: 0px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
#search-geometry li
{ float: left;
width: 30px;
color:#000;
}
#search-advanced
{ float: left;
width:120px;
}
#search-button
{ float: right;
width:100px;
}0
Comments
-
Your use of label seems to be off.
<li><label>1<input type="checkbox" name="checkbox1" id="checkbox1" /></label></li>
I recommend changing this too.<li><label for="checkbox1">1</label><input type="checkbox" name="checkbox1" id="checkbox1" /></li>
Also, I recommend giving your form elements better names/ids - it will help you in the server side coding.
The above will probably not resolve your issues.
I recommend using firebug and use "Inspect Element" to see what CSS is influencing an element and you can edit the CSS to fix it (though these changes will not be saved).0
Advertisement