Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

form positioning and CCS

Posted on 2005-04-25
11
Medium Priority
?
250 Views
Last Modified: 2012-06-27
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...
0
Comment
Question by:wood1e
  • 5
  • 2
  • 2
  • +1
10 Comments
 
LVL 1

Expert Comment

by:Tag_Markman
ID: 13862620
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
 
LVL 33

Expert Comment

by:humeniuk
ID: 13862756
"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
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 13862769
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:wood1e
ID: 13862882
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
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 13863864
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
 
LVL 29

Accepted Solution

by:
rdivilbiss earned 2000 total points
ID: 13863872
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
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 13863922
BTW, I should have added a title attribute for each text box and an alt attribute for each picture.
0
 

Author Comment

by:wood1e
ID: 13864639
MAny thanks for all the help, greatly appreciated.  Certanly helps my learning curve, when you can start to see something work.

Rob (wood1e)
0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 13866310
You are welcome sir.

Good luck with your project,
Rod
0
 
LVL 33

Expert Comment

by:humeniuk
ID: 13868016
My 2c - good work rdivilbiss & stick with it wood1e.  You'll be glad you did.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month20 days, 23 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question