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

Positioning fieldset and legend around some absolute positioned form elements?

Options
  • 09-05-2010 5:21pm
    #1
    AARRRGH
    Closed Accounts Posts: 12,382 ✭✭✭✭


    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!


Comments

  • Options
    #2
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    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]


  • Options
    #3
    p
    Registered Users Posts: 2,119 ✭✭✭p


    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.


  • Options
    #4
    AARRRGH
    Closed Accounts Posts: 12,382 ✭✭✭✭AARRRGH


    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.


  • Options
    #5
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    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>


  • Options
    #6
    AARRRGH
    Closed Accounts Posts: 12,382 ✭✭✭✭AARRRGH


    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?


  • Advertisement
  • Options
    #7
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    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>


  • Options
    #8
    mewso
    Moderators, Science, Health & Environment Moderators Posts: 8,823 Mod ✭✭✭✭mewso


    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>


Advertisement