By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,261 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

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

P: n/a
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;
}
Feb 2 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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.
Feb 2 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.