Please help with (hopefully) simple box login form layout?

[bobmct]

Again: struggling to convert old-style HTML to html using css.

I am trying to create a rectangular box divided into approx three vertical
sections. The top section contains an image I would like on the extreme
left of the box, the text centered in the reamaining space in that section.

The center third contains two lines prompting for a user's login and
password with a thirdline with some info (this section actually look OK
now).

The bottom third section again has an image I would like on the extreme left
with the two submit buttons appearing to the right of it.

The difficulties I am having are primarily left/center positioning and
getting the text to align with the middle of the images (i.e.:
valign=middle which is deprecated).

I am including my HTML code snippets as well as css snippets.

Can someone please advise as to what needs to be altered to achieve the
desired look/effects? Thank you - I am a quick understudy!

HTML snippet:

print "
<!-- Main Login Prompt Section -->
<div id=\"pv00\">
<h2 style=\"margin-left: 30%\">Welcome to $D</h2>
<fieldset style=\"width: 400px; text-align: center; margin-left: 20%;
margin-right: auto;\" >
<form name=\"login\" action=\"sc_login.php?s=1&$N&$D\" method=\"post\" >
<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" >
<tr>
<td id=\"login_top\">
<span class=\"login_left\"><img src=\"pix/ss_keys.png\" width=\"40\"
height=\"40\" alt=\"keys\" border=\"0\" /></span>
<span class=\"login_center\">Login to: $D</span>
</td>
</tr>
<tr>
<td>
<table align=\"center\" summary=\"\" >
<tr>
<td align=\"left\"><strong>Login:</strong></td>
<td><input name=\"_Userid\" type=\"text\" value=\"$_Userid\"
size=\"15\" maxlength=\"15\" /></td>
</tr>
<tr>
<td align=\"left\"><strong>Password:</strong></td>
<td><input name=\"_Passwd\" type=\"password\" value=\"$_Passwd\"
size=\"15\" maxlength=\"15\" /></td>
</tr>
<tr>
<td colspan=\"2\" align=\"center\"><small>Please user your normal
login information.</small></td>
</tr>
</table>
<span class=\"red\">$eMsg</span><br />
</td>
</tr>
<tr>
<td>
<img src=\"pix/ss_logo.png\" width=\"184\" height=\"44\" alt=\" SS
Logo\" border=\"0\" />
<input type=\"submit\" name=\"_Btn1\" value=\"Login\" />
<input type=\"button\" name=\"_Btn1\" value=\"Quit\"
onclick=\"location.href='sc00.php'\" />
</td>
</tr>
</table>
</form>
</fieldset>
</div>
<!-- End of Login Prompt Section -->
css code snippet:

/* Common Login Prompt */
#login_top {
height: 45px;
background-color: #990033;
color: #ffffff;
font-size: 14px;
vertical-align: middle;
}
..login_left {
text-align: left;
vertical-align: middle;
}
..login_center {
text-align: center;
vertical-align: middle;
}

[Ben C]

On 2007-02-02, bobmct <bo*****@gmail.comwrote:

Again: struggling to convert old-style HTML to html using css.

I am trying to create a rectangular box divided into approx three vertical
sections. The top section contains an image I would like on the extreme
left of the box, the text centered in the reamaining space in that section.

The center third contains two lines prompting for a user's login and
password with a thirdline with some info (this section actually look OK
now).

The bottom third section again has an image I would like on the extreme left
with the two submit buttons appearing to the right of it.

The way to do this with tables is to put the left image in its own
column (i.e. <td>). Set the width of that column explicitly to the width
of the image, and set the overall width of the table. The other column
will get the rest of the width automatically. You can give the cell in
the second column text-align: center to make its inline contents
centered.

text-align applies to block boxes, and determines how the inline boxes
in them are aligned. It's no good setting text-align: left on an inline
box to make it go to the left, with another inline box on the same line
with text-align: center. It doesn't work like that. You can float a box
to the left within a container whose inline boxes are centered
(text-align: center on the container); but they will be centered with
respect to the total width, not to the space available to the right of
the float. All the same, that might look acceptable, so you could try
it. But you won't easily be able to get "Login in $D" aligned vertically
to the centre of the image if you use a float.

The difficulties I am having are primarily left/center positioning and
getting the text to align with the middle of the images (i.e.:
valign=middle which is deprecated).

You can just use vertical-align: middle in the styles for <tdinstead.