Positioning fieldset and legend around some absolute positioned form elements?

AARRRGH · 09-05-2010 04:21PM #1

Hello

I hope someone can help me with this.

I am building a new form and am using absolute positioning to place the form elements exactly where I want them.

I want to put a fieldset and legend around some of the form elements.

My problem is this:

It seems I cannot position the fieldset around these absolute positioned elements - it is ignoring my attempts to use "left" and "top".

Please see the attachment to see what I mean.

Does anyone know an easy way I can accomplish this?

Thanks!

louie · 09-05-2010 04:33PM

did you try float?
[php]
<form>
<div style='float:left;'>
<input type="text" />
</div>
<div style="float:left;">
<fieldset><legend>TEXT</legend>
<input type="checkbox" />
</fieldset>
</div>
</form>
[/php]

09-05-2010 07:10PM

Without seeing code, it's hard to tell what's going on, but my guess is that you need to position the fieldset itself, not the elements inside it.

That way, you can move the fieldset around and the elements will move with it.

AARRRGH · 09-05-2010 07:12PM

Thank you for your reply. I have tried that but it just made parts of the page shift to the right.

I have attached the HTML and CSS (just rename from .txt to .html).

Any other ideas?

Thanks again.

louie · 09-05-2010 08:30PM

You are complicating yourself using position for styling.
Create a holder div in the space required and work from there.

try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form sample</title>
<style type="text/css">
body{font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif;}
p{padding:2px 0px; margin:1px 0px;}
legend{font-weight:bold; padding:2px;}
</style>
</head>

<body>
<!-- SEARCH FORM -->
<form action="search_seo.php" method="post" class="searchform" name="searchform">
    <input type="hidden" name="search" value="basic" /> 
    <div style='float:left; padding:5px;'> 
        <p><b>Job Type</b></p>
        <select name="category"> 
            <option value="all">All Jobs</option> 
            <option value="03,10,13,05" class="heading">Administration &amp; Office</option>
            <option value="03">&nbsp;&nbsp;Admin / Office / Secretarial</option> 
            <option value="10">&nbsp;&nbsp;Call-Centre</option>
            <option value="13">&nbsp;&nbsp;HR / Recruitment</option>
            <option value="05">&nbsp;&nbsp;Legal</option>
            <option value="09,22,08,25" class="heading">Manual &amp; Trades</option>
            <option value="09">&nbsp;&nbsp;Operative / Manual / Labouring</option>
            <option value="22">&nbsp;&nbsp;Security</option> 
            <option value="08">&nbsp;&nbsp;Trades</option>
            <option value="25">&nbsp;&nbsp;Warehousing / Logistics / Transport</option> 
            <option value="12,24" class="heading">Hospitality &amp; Tourism</option>
            <option value="12">&nbsp;&nbsp;Bars / Hotels / Restaurants</option>
            <option value="24">&nbsp;&nbsp;Travel / Tourism</option> 
            <option value="26,04,28,27" class="heading">Career Level</option>
            <option value="26">&nbsp;&nbsp;Graduate</option> 
            <option value="04">&nbsp;&nbsp;Managers / Supervisors</option>
            <option value="28">&nbsp;&nbsp;Voluntary Work / Charity</option> 
            <option value="27">&nbsp;&nbsp;Work Experience / Internship</option> 
            <option value="06,20,21" class="heading">Sales &amp; Marketing</option>
            <option value="06">&nbsp;&nbsp;Marketing / Public Relations</option>
            <option value="20">&nbsp;&nbsp;Retail</option> 
            <option value="21">&nbsp;&nbsp;Sales</option> 
            <option value="17,16" class="heading">Arts &amp; Design</option>
            <option value="17">&nbsp;&nbsp;Arts / Culture</option>
            <option value="16">&nbsp;&nbsp;Design / Media</option>
            <option value="01,02" class="heading">Finance</option>
            <option value="01">&nbsp;&nbsp;Accountancy / Finance</option>
            <option value="02">&nbsp;&nbsp;Banking / Insurance</option>
            <option value="19,15,18" class="heading">Science &amp; Technology</option>
            <option value="19">&nbsp;&nbsp;Engineering / Manufacturing</option> 
            <option value="15">&nbsp;&nbsp;IT / Programming / Software</option>
            <option value="18">&nbsp;&nbsp;Pharmaceutical / Science</option> 
            <option value="07,29,23,11,30,14" class="heading">Other</option>
            <option value="07">&nbsp;&nbsp;Architecture / Property</option>
            <option value="29">&nbsp;&nbsp;Childcare / Healthcare / Nursing</option> 
            <option value="23">&nbsp;&nbsp;Fitness / Leisure / Beauty</option> 
            <option value="11">&nbsp;&nbsp;Languages</option>
            <option value="30">&nbsp;&nbsp;Public Sector</option> 
            <option value="14">&nbsp;&nbsp;Teaching / Training</option>
        </select>
        <p><b>Keywords</b></p>
        <input name="keywords" size="30" value="" /><br /><br />
        <input type="submit" value="Search" />
</div> 
    <div style="float:left; padding:5px;"> 
    <fieldset><legend>Search Options</legend> 
        <label class="vertical-text"><input type="checkbox" value="1" name="exagencies" />Exclude agencies</label><br /><br />
        <label class="vertical-text"><input type="checkbox" value="1" name="ptime" />Part-time jobs only</label><br /><br />
        <label class="vertical-text disabled"><input type="checkbox" value="1" name="within" disabled />Search within my results</label>
        <p><a href="http://www.empleobcn.es/search/advanced/" class="vertical-text">Advanced Search</a></p>
    </fieldset> 
    </div> 
    <div style="clear:both;"></div>
</form>  
</body>
</html>

AARRRGH · 09-05-2010 08:36PM

That's very close to what I want - thanks Louie! I really appreciate you taking the time to do that.

Question: I'm being a bit of a nazi about padding in my new design (I'm trying to make the padding between everything as equal as possible), so if I did want to use margins etc. to position everything evenly, would that still be feasible with your new design?

louie · 09-05-2010 09:30PM

It should. CSS can be very tricky but used correctly should do exactly what you want.

As I said position it's not really the answer here.
To keep a certain height between fields, make use of the div tag and give it a height

<div style="height:60px;">your text here</div>

mewso · 10-05-2010 10:13AM

Lets all see how many divs we can use to achieve what we want. For starters please don't tell me you are using a fieldset for one set of form elements and not for another simply because you want a border around one of the set of elements and not the other.

Fieldsets are their for a reason and serve a good purpose (assitive technology for one). There is no good reason not to use them for any set of form elements. For the first set you can leave out the legend and remove the border.

Also you can style the fieldsets. There is zero need to wrap them in divs. This is one of the big problems in web design these days, div-itis. This is my first attempt. You could mess around with it. I have used labels for each caption because it's best practice. When something is easy to do properly you might as well. To do more specific styling you could give the fieldsets an id or class:-

    <style type="text/css">
        fieldset    {
            float:left;
            width:auto;
            padding:5px;
            margin:5px;
        }
        
        fieldset.no-border  {
            border:none;
        }
        
        fieldset.no-border label  {
            display:block;
            margin:0;
        }
    </style>
    <fieldset class="no-border">
        <label for="category">Job Type:</label>
        <select name="category" id="category"> 
            <option value="all">All Jobs</option> 
            <option value="03,10,13,05" class="heading">Administration &amp; Office</option>
            <option value="03">&nbsp;&nbsp;Admin / Office / Secretarial</option> 
            <option value="10">&nbsp;&nbsp;Call-Centre</option>
            <option value="13">&nbsp;&nbsp;HR / Recruitment</option>
            <option value="05">&nbsp;&nbsp;Legal</option>
            <option value="09,22,08,25" class="heading">Manual &amp; Trades</option>
            <option value="09">&nbsp;&nbsp;Operative / Manual / Labouring</option>
            <option value="22">&nbsp;&nbsp;Security</option> 
            <option value="08">&nbsp;&nbsp;Trades</option>
            <option value="25">&nbsp;&nbsp;Warehousing / Logistics / Transport</option> 
            <option value="12,24" class="heading">Hospitality &amp; Tourism</option>
            <option value="12">&nbsp;&nbsp;Bars / Hotels / Restaurants</option>
            <option value="24">&nbsp;&nbsp;Travel / Tourism</option> 
            <option value="26,04,28,27" class="heading">Career Level</option>
            <option value="26">&nbsp;&nbsp;Graduate</option> 
            <option value="04">&nbsp;&nbsp;Managers / Supervisors</option>
            <option value="28">&nbsp;&nbsp;Voluntary Work / Charity</option> 
            <option value="27">&nbsp;&nbsp;Work Experience / Internship</option> 
            <option value="06,20,21" class="heading">Sales &amp; Marketing</option>
            <option value="06">&nbsp;&nbsp;Marketing / Public Relations</option>
            <option value="20">&nbsp;&nbsp;Retail</option> 
            <option value="21">&nbsp;&nbsp;Sales</option> 
            <option value="17,16" class="heading">Arts &amp; Design</option>
            <option value="17">&nbsp;&nbsp;Arts / Culture</option>
            <option value="16">&nbsp;&nbsp;Design / Media</option>
            <option value="01,02" class="heading">Finance</option>
            <option value="01">&nbsp;&nbsp;Accountancy / Finance</option>
            <option value="02">&nbsp;&nbsp;Banking / Insurance</option>
            <option value="19,15,18" class="heading">Science &amp; Technology</option>
            <option value="19">&nbsp;&nbsp;Engineering / Manufacturing</option> 
            <option value="15">&nbsp;&nbsp;IT / Programming / Software</option>
            <option value="18">&nbsp;&nbsp;Pharmaceutical / Science</option> 
            <option value="07,29,23,11,30,14" class="heading">Other</option>
            <option value="07">&nbsp;&nbsp;Architecture / Property</option>
            <option value="29">&nbsp;&nbsp;Childcare / Healthcare / Nursing</option> 
            <option value="23">&nbsp;&nbsp;Fitness / Leisure / Beauty</option> 
            <option value="11">&nbsp;&nbsp;Languages</option>
            <option value="30">&nbsp;&nbsp;Public Sector</option> 
            <option value="14">&nbsp;&nbsp;Teaching / Training</option>
        </select>
        <label for="keywords">Keywords</label>
        <input name="keywords" id="keywords" size="30" value="" /><br /><br />
        <input type="submit" value="Search" class="submit" />
    </fieldset> 
    <fieldset>
        <legend>Search Options</legend> 
        <input type="checkbox" value="1" name="exagencies" id="exagencies" /><label for="exagencies">Exclude agencies</label><br /><br />
        <input type="checkbox" value="1" name="ptime" id="ptime" /><label for="ptime">Part-time jobs only</label><br /><br />
        <input type="checkbox" value="1" name="within" id="within" disabled="disabled" /><label for="within">Search within my results</label>
        <p><a href="http://www.empleobcn.es/search/advanced/" class="vertical-text">Advanced Search</a></p>
    </fieldset>

Positioning fieldset and legend around some absolute positioned form elements?

Comments