form positioning and CCS

Hi,

I am trying to postion a form in a left column, abouit half down.  With graphics for search, above the text box, and a graphic saying memebers above the two text fields for username and password. these are text immediatly below their respective text box.  Both log in and search buttons are immediately below their respective boxes but align right instead of left like with the text username and password.

Can anyone help, I keep trying andfailing, using tables to keep it all in...etc etc...
wood1eAsked:
Who is Participating?
 
rdivilbissConnect With a Mentor Commented:
NOTE: The only thing in the markup is the elements you need to display.  Much shorter than the table markup, and simpler too, I think.
0
 
Tag_MarkmanCommented:
I prefer to use tables.  The cool thing about tables it that you can put a table in a table. This way you can use one to layout the page and the other to layout your other contained information such as password, username, and corresponding labels.

ex:

<table>
  <tr>
    <td>&nbsp;&nbsp;</td>
    <td><!-- you can put your image here if you like --></td>
    <td>&nbsp;&nbsp;</td>
    <td>
<!----- BEGIN login form -------->
<form method=post action="https://www.example.com/login" >
      <table>
        <tr><td>Username</td></tr>
        <tr><td><input name="login" size="17" value=""></td></tr>
        <tr><td>Password</td></tr>
        <tr><td><input name="passwd" size="17" value="" type="password"></td></tr>
      </table>
</form>
<!----- END login form -------->
    </td>
  </tr>
</table>

0
 
humeniukCommented:
"I prefer to use tables.  The cool thing about tables it that you can put a table in a table."

Tables are only easier if they are all you know how to use.  Tables are only more effective . . . okay, they're never more effective.

Wood13 - you're doing the right thing by going with CSS.  While it can be tricky to learn, once you've learned it you will find it much easier and useful than tables.  And you have a great resource for helping you along in E-E.  It would be easier to provide a good working solution if you provide a link to your site or the relevant parts of your code.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

 
rdivilbissCommented:
If you know ahead of time the only people you wish to communicate with are sighted persons who only use web browsers versus any person with a visual imparement or using an alternative HTTP device, then tables are any easy way out.

If your message is important, or it is your business, you'll want to follow the W3C recommendations made 7 years ago and not use tables for layout, reserving them for tabular data.

If you want to do this according to current design recommendations, post your page markup and I'll help.

Regards,
Rod

0
 
wood1eAuthor Commented:
HI I have just been playing around with your code....ANd I am trying to achieve something like this....But wth the members "submit " button on the same line as the password text.  IN other words, the text "password" and "username" aligned to the left so both text is aligned wiht the textfields...but then the submit buttons aligned to the right....

<table width="152">
  <tr>
    <td width="1" height="402">&nbsp;</td>
    <td width="158">
<!----- BEGIN login form -------->
<form method=post action="https://www.example.com/login" >
      <table width="158" height="398" cellpadding="0" cellspacing="0">
         <tr><td colspan="2"><div align="left">
           <p><img src="images/search.jpg" width="74" height="14"><br>             
                     <input name="search" size="20" value="">
         <table width="75"  border="0" align="right" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                  <div align="left">
                    <input type="submit" name="Submit3" value="Submit">
                  </div></td>
            </tr>
          </table>
         </div></td>
        </tr>
         <tr>
           <td colspan="2"><img src="images/a_gift_of_poetry_43.jpg" width="152" height="165" alt=""></td>
           </tr>
        <tr><td colspan="2"><img src="images/members.jpg"><br>          
            
            <input name="login" size="20" value="">
            <br>
            username</td>
        </tr>
        <tr>
          <td width="168" colspan="2"><input name="passwd" size="20" value="" type="password">            
                    </td>
        </tr>
        <tr>
          <td colspan="2"><div align="left">
            password
               
          </div>
            <table width="72"  border="0" align="right" cellpadding="0" cellspacing="0">
              <tr>
                <td width="61">
                        <div align="left">
                          <p>
                            <input type="submit" name="Submit32" value="Submit">
                                  </p>
                      </div></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td colspan="2"></td>
        </tr>
      </table>
</form>
<!----- END login form -------->
    </td>
  </tr>
</table>
0
 
rdivilbissCommented:
Pure CSS, no table.  I did move you lables and enclose them in a label tag, for the following reasons...

1. If the user agent does not use styles, the label will appear before the field as expected (otherwise you may confuse people)

2. If the user agent is a screen reader, the label would also be expected prior to the field and it will be read as the caption for that field.

If you want it below the input field, you can alter the label's CSS positioning, then if one or two above occur, the label will still be where the other user agents would expect it to be.

You had both 158 and 168 for widths within your table, so I just picked 158.  You can adjust it as you need to.  You did not have a height and width for member.jpg so I made one up.  Use whatever is correct for your image.

I assigned ID's for a lot of your element you may not need.  Both CSS and DOM programming in JavaScript are easier for me using ID's, so it is my habit to assign them.  You can take them out if you don't need them.

Of course, if you want to adjust spacing vertically, those IDs will be handy to use.

<style>
#left {
      width: 158;
      }

label {
      float:left;
      clear:left;
      }
      
.leftSubmit {
      position: relative;
      float:right;
      clear:right;
      }      
</style>

<div id="left">
<form method=post action="https://www.example.com/login" >
<img border="0" src="images/search.JPG" width="74" height="14">            
<input id="search" name="search" size="20" value=""><br>
<input class="leftSubmit" id="submit2" name="Submit3" type="submit" value="Submit">
<img border="0" src="images/a_gift_of_poetry_43.JPG" width="152" height="165">
<img border="0" src="images/member.JPG" width="74" height="14"><br>
<label for="login">User Name</label><input id="login" name="login" size="20" value="">
<label for="passwd">Password</label><input id="passwd" name="passwd" size="20" value="" type="password"><br>
<input class="leftSubmit" id="submit32" name="Submit32" type="submit" value="Submit">
</form>
</div>

Rod
0
 
rdivilbissCommented:
BTW, I should have added a title attribute for each text box and an alt attribute for each picture.
0
 
wood1eAuthor Commented:
MAny thanks for all the help, greatly appreciated.  Certanly helps my learning curve, when you can start to see something work.

Rob (wood1e)
0
 
rdivilbissCommented:
You are welcome sir.

Good luck with your project,
Rod
0
 
humeniukCommented:
My 2c - good work rdivilbiss & stick with it wood1e.  You'll be glad you did.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.