PDA

View Full Version : Positioning Help

molsonbubba
11-23-2007, 04:51 AM
Hi,
Site designed in photoshop slices. Needed to create user login (username and password) text fields. Ran into problem with using a form over sliced images. On form insert images positions would go out of control. Solved by using layers with div tag. Now ran into positioning problem. On design pc all looks great and in place. On pcs with different resolution div tag is not alligned correctly. I have a small laptop and older 15" LCD. My text boxes are in different places on all monitors I tested. I know I am missing something but can not figure this one out (ASP was easier for me...lol)
I am stomped. Please help. Using CSS. Code is below.

#apDiv1 {
position:absolute;
width:461px;
height:396px;
z-index:1;
left: 575px;
top: 184px;

<div id="apDiv1">
<FORM METHOD="POST" ACTION="redirect.php">
<P><font face="Verdana" size="2" color="#2852A8"><BR>
</font><font color="#2852A8" face="Verdana">
<INPUT NAME="username" TYPE="text" class="AccountNumber" value="User Name" SIZE=25 MAXLENGTH=25>
<br>
</font></p>
<P><font face="Verdana" size="2" color="#2852A8"><br>
</font><font color="#2852A8" face="Verdana">
<INPUT NAME="password" TYPE="password" class="AccountNumber" value="Password" SIZE=25 MAXLENGTH=25>
</font></p>
<P><font face="Verdana"><font color="#2852A8">
<input name="remember" type="checkbox" class="CheckButton" value="Yes">
</font><font color="#2852A8" size="2" class="font">Remember
me </font></font></p>
<P>&nbsp;</P>
<p><a href="emailpass.html" class="font1">
<font color="#999999">Click here to email your user name and password to the address we have on file.</font></a></font> </p>
<P>&nbsp;</P>
<INPUT NAME="submit" TYPE="image" class="EnterButton" VALUE="Login" src="images_errorlogin/customerzone_75.jpg">
</font></P>
</FORM>
</div>
rmedek
11-23-2007, 05:14 AM
Do you have a link to the page? We'll need either that or to see the entire HTML/CSS code (use tags please) to see where the problem is.

BTW, as long as you're taking the leap into modern webdesign by using CSS for positioning, you might as well drop the circa-1994 <font> tags as well. :)
molsonbubba
11-23-2007, 11:57 AM
here it is. thanks.



<html>
<head>
<title>errorlogin</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.EnterButton {
right: 205px;
position: absolute;
top: 135px;
}
.CheckButton {
height: 10px;
width: 10px;
top: 80px;
right: 294px;
position: absolute;
}
.AccountNumber {
font-size: 9px;
font-style: normal;
background-color: #151515;
height: 19px;
width: 148px;
border: 1px solid #5C5C5C;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #999999;
text-align: center;
vertical-align: middle;
position: absolute;
right: 155px;
}
#apDiv1 {
position:absolute;
width:461px;
height:396px;
z-index:1;
left: 575px;
top: 184px;
}
.font {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
position: absolute;
top: 80px;
right: 208px;
color: #999999;
}
.font1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #999999;
position: absolute;
top: 160px;
right: 35px;
}
body {
background-image: url(../images/background.jpg);
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (errorlogin.psd) -->
<div id="apDiv1">
<FORM METHOD="POST" ACTION="redirect.php">
<P><font face="Verdana" size="2" color="#2852A8"><BR>
</font><font color="#2852A8" face="Verdana">
<INPUT NAME="username" TYPE="text" class="AccountNumber" value="User Name" SIZE=25 MAXLENGTH=25>
<br>
</font></p>
<P><font face="Verdana" size="2" color="#2852A8"><br>
</font><font color="#2852A8" face="Verdana">
<INPUT NAME="password" TYPE="password" class="AccountNumber" value="Password" SIZE=25 MAXLENGTH=25>
</font></p>
<P><font face="Verdana"><font color="#2852A8">
<input name="remember" type="checkbox" class="CheckButton" value="Yes">
</font><font color="#2852A8" size="2" class="font">Remember
me </font></font></p>
<P>&nbsp;</P>
<p><a href="emailpass.html" class="font1">
<font color="#999999">Click here to email your user name and password to the address we have on file.</font></a></font> </p>
<P>&nbsp;</P>
<INPUT NAME="submit" TYPE="image" class="EnterButton" VALUE="Login" src="images_errorlogin/customerzone_75.jpg">
</font></P>
</FORM>
</div>
<table id="Table_01" width="777" height="681" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="23">
<img src="images_errorlogin/up.jpg" width="776" height="24" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images_errorlogin/logos.jpg" width="215" height="157" alt=""></td>
<td rowspan="35">
<img src="images_errorlogin/r2.jpg" width="7" height="567" alt=""></td>
<td colspan="10" rowspan="7">
<img src="images_errorlogin/errorlogin_04.jpg" width="524" height="292" alt=""></td>
<td rowspan="38">
<img src="images_errorlogin/errorlogin_05.jpg" width="30" height="656" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="157" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images_errorlogin/q1.jpg" width="215" height="7" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images_errorlogin/q1-08.jpg" width="30" height="107" alt=""></td>
<td colspan="2">
<img src="images_errorlogin/x10.jpg" width="59" height="94" alt=""></td>
<td colspan="8" rowspan="2">
<img src="images_errorlogin/q1-10.jpg" width="126" height="107" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="94" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images_errorlogin/q1-11.jpg" width="59" height="13" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images_errorlogin/q2.jpg" width="215" height="7" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images_errorlogin/q3.jpg" width="215" height="5" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="11" rowspan="4">
<img src="images_errorlogin/lnews.jpg" width="215" height="24" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="images_errorlogin/hr.jpg" width="524" height="12" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images_errorlogin/errorlogin_15.jpg" width="335" height="2" alt=""></td>
<td colspan="3" rowspan="6">
<img src="images_errorlogin/h1.jpg" width="176" height="21" alt=""></td>
<td rowspan="25">
<img src="images_errorlogin/errorlogin_17.jpg" width="13" height="258" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="8">
<img src="images_errorlogin/errorlogin_18.jpg" width="18" height="67" alt=""></td>
<td rowspan="3">
<img src="images_errorlogin/1.jpg" width="10" height="8" alt=""></td>
<td colspan="3" rowspan="8">
<img src="images_errorlogin/errorlogin_20.jpg" width="307" height="67" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images_errorlogin/a1.jpg" width="215" height="4" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td colspan="11" rowspan="2">
<img src="images_errorlogin/errorlogin_22.jpg" width="215" height="5" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images_errorlogin/errorlogin_23.jpg" width="10" height="59" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="10">
<img src="images_errorlogin/errorlogin_24.jpg" width="32" height="117" alt=""></td>
<td colspan="3" rowspan="7">
<img src="images_errorlogin/sunset.jpg" width="59" height="90" alt=""></td>
<td colspan="6" rowspan="2">
<img src="images_errorlogin/errorlogin_26.jpg" width="124" height="17" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images_errorlogin/errorlogin_27.jpg" width="176" height="8" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="images_errorlogin/errorlogin_28.jpg" width="8" height="100" alt=""></td>
<td>
<img src="images_errorlogin/sdc.jpg" width="8" height="7" alt=""></td>
<td colspan="4" rowspan="6">
<img src="images_errorlogin/errorlogin_30.jpg" width="108" height="78" alt=""></td>
<td rowspan="18">
<img src="images_errorlogin/errorlogin_31.jpg" width="8" height="229" alt=""></td>
<td rowspan="3">
<img src="images_errorlogin/s1.jpg" width="50" height="50" alt=""></td>
<td rowspan="18">
<img src="images_errorlogin/errorlogin_33.jpg" width="118" height="229" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="images_errorlogin/errorlogin_34.jpg" width="8" height="93" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="33" alt=""></td>
</tr>
<tr>
<td rowspan="16">
<img src="images_errorlogin/errorlogin_35.jpg" width="15" height="189" alt=""></td>
<td colspan="3" rowspan="11">
<img src="images_errorlogin/pic1.jpg" width="161" height="105" alt=""></td>
<td rowspan="11">
<img src="images_errorlogin/dx.jpg" width="153" height="105" alt=""></td>
<td rowspan="16">
<img src="images_errorlogin/errorlogin_38.jpg" width="6" height="189" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td>
<img src="images_errorlogin/errorlogin_39.jpg" width="50" height="13" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images_errorlogin/s2.jpg" width="50" height="49" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images_errorlogin/errorlogin_41.jpg" width="59" height="27" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images_errorlogin/errorlogin_42.jpg" width="38" height="22" alt=""></td>
<td>
<img src="images_errorlogin/more.jpg" width="60" height="15" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images_errorlogin/errorlogin_44.jpg" width="10" height="22" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td>
<img src="images_errorlogin/errorlogin_45.jpg" width="60" height="7" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="images_errorlogin/beetwen.jpg" width="214" height="4" alt=""></td>
<td rowspan="13">
<img src="images_errorlogin/errorlogin_47.jpg" width="1" height="137" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td colspan="10" rowspan="2">
<img src="images_errorlogin/errorlogin_48.jpg" width="214" height="13" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images_errorlogin/errorlogin_49.jpg" width="50" height="10" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="10">
<img src="images_errorlogin/errorlogin_50.jpg" width="32" height="120" alt=""></td>
<td colspan="2" rowspan="5">
<img src="images_errorlogin/duck.jpg" width="58" height="90" alt=""></td>
<td colspan="6" rowspan="10">
<img src="images_errorlogin/errorlogin_52.jpg" width="124" height="120" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images_errorlogin/s3.jpg" width="50" height="49" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="5">
<img src="images_errorlogin/errorlogin_54.jpg" width="314" height="84" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td>
<img src="images_errorlogin/errorlogin_55.jpg" width="50" height="8" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images_errorlogin/s4.jpg" width="50" height="49" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images_errorlogin/errorlogin_57.jpg" width="58" height="30" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td>
<img src="images_errorlogin/errorlogin_58.jpg" width="50" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="images_errorlogin/tak.jpg" width="524" height="3" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td colspan="10" rowspan="2">
<img src="images_errorlogin/ss.jpg" width="524" height="5" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td>
<img src="images_errorlogin/r1.jpg" width="7" height="3" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images_errorlogin/over.jpg" width="215" height="22" alt=""></td>
<td colspan="11">
<img src="images_errorlogin/ddd.jpg" width="531" height="22" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td colspan="22">
<img src="images_errorlogin/errorlogin_64.jpg" width="746" height="64" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="64" alt=""></td>
</tr>
<tr>
<td>
<img src="images_errorlogin/spacer.gif" width="30" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="57" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="38" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="148" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="153" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="50" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="118" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images_errorlogin/spacer.gif" width="30" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
abduraooft
11-23-2007, 12:44 PM
not , the ending is
effpeetee
11-23-2007, 02:08 PM
You don't have a Doctype .

Frank
molsonbubba
11-23-2007, 11:41 PM
Thanks.
DOCTYPE I selcted was <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
It does not work. I tried them all.

Earlier I said that it was working on the design pc. I was wrong. I use IE7 on the design pc. So by accident I minimized the browser to 50% and...my text boxes ended up way to the right. It is as if they are floating, not anchored to one XY position.

Sorry about the code thing. I fixed it.

Here is the link:
www.raeonimages.com/images/customerzone/customerzone.html. Enter anything into Account Number and it will take you to the error page.