• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 373
  • Last Modified:

How do I set the dimensions & position of a fieldset as well as those of the elements within?

Hi everyone.

I have a field set as shown in the below code. I already understand how to set the max length of input elements and the max size of the contents.

My question is two-fold. If this is contrary to the rules please advise me and I will divide my questions up.

1)
I would like to understand how to set the length, width and position of the fieldset on the page.  As well as the elements within

Also what are the dimensions of a browser page in terms of pixels? I would like design my page so that the appear the same irrespective of the resolution that they have set their monitor to.

<fieldset>
 
  <label for="Email"><span class="hlY">Email/User</span></label>
 
  <input type="text" name="Email" maxlength="40" size="20" />
  <br />
  <label for="Pass"><span class="tcO">Password</span></label>
  <input type="password" name="Pass" maxlength="20" size="20" />
  <br />
  <INPUT TYPE=SUBMIT VALUE="Enter" maxlength="20"/>
</fieldset>

Many thanks again in advance.

wb
0
winbiz
Asked:
winbiz
2 Solutions
 
CaliguianCommented:
set an id on the fieldset, and just set it like you'd set anything else.

<fieldset id="myset">....</fieldset>

The css would look like this: (goes in the head tag)
Positioning is trickier. For a full tutorial on CSS positioning go here: http://www.brainjar.com/css/positioning/default.asp
<style>
#myset{
  width: 200px;
}
</style>
I usually keep my web pages about 750px wide. that way it'll fit in 800X600 with scrolls and border windows.
0
 
BatalfCommented:
This is one example where the size of the fieldset is set in pixels by use of CSS, and then the fieldset is centered on the screen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled</title>

<style type="text/css">
body,html{
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    text-align:center;
}
.mainContent{
    text-align:left;
    margin:0 auto;
    width:350px;
    margin-top:50px;
}
fieldset{
    width:100%;
}
input{
    width:200px;
}
</style>

</head>
<body>

<div class="mainContent">
<fieldset>
    <legend>Log on</legend>
    <table>
        <tr>
            <td><label for="Email"><span class="hlY">Email/User</span></label></td>
              <td><input type="text" name="Email" maxlength="40" size="20" /></td>
          </tr>
        <tr>
            <td><label for="Pass"><span class="tcO">Password</span></label></td>
              <td><input type="password" name="Pass" maxlength="20" size="20" /></td>
          </tr>
          <tr>
              <td></td><td><INPUT TYPE=SUBMIT VALUE="Enter" maxlength="20"/></td>
          </tr>
      </table>    
</fieldset>
</div>

</body>
</html>
0
 
winbizAuthor Commented:
Thank you both.

wb
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now