Page 1 of 1

table alignment help

Posted: Tue Dec 31, 2002 10:49 am
by maverickman55
hey guys, i'm doing this ecard project where a user chooses an image, enters information, and they can send a nice little greeting card to someone. i have all the server scripting done...but i'm having problem with TABLES! i have an image that a drew of the "postcard" and have that as a background, and then i put the image the user chooses where i want it and then i need to have some input boxes. i'm having trouble lining up the boxes where i need them...i can do it with "position:absolute" but not everyone will have the same resolution. could someone plz look at my code or IM me at maverickman55 and try to help me out? thanks
here is the code and the link to my page http://216.25.255.85/cearly/card/test.php

Code: Select all

<html>
<body bgcolor="#999999">
<style type="text/css">

</style>
<div align="center">
<!--main table-->
<table name="main" width="660" height="350" cellpadding="0" cellspacing="0" background="images/postcard.jpg">
<tr>
<td width="50%"><table><tr><td></td><td></td><td><img src="images/cottage.jpg"></td></tr></table></td>
<!--form-->
<td width="19%" name="spacer">
<table height="100%" width="90%" cellpadding="0" cellspacing="0">
<tr><td>
<div style="position:absolute;left:644px;top:106"><table height="10% cellpadding="0" cellspacing="0"><td><input type="text"></td></table></div>
<div style="position:absolute;left:644px;top:137"><table height="10%"cellpadding="o" cellspacing="0"><td><input type="text"></td></table></div>
<div style="position:absolute;left:644px;top:167"><table height="10%"cellpadding="o" cellspacing="0"><td><input type="text"></td></table></div>
</td></tr>
</table>



</td>
</tr>
</table>
</div>
</body>
</html>

Posted: Tue Dec 31, 2002 2:50 pm
by Gen-ik
Why are you using so many DIVs? It would be a lot easier for you if you just used TABLES.

For a start your STYLE tags should be in the HEAD of your page.

Try this...

Code: Select all

<html>

<head>
<style type="text/css"></style>
</head>

<body bgcolor="#999999" leftmargin="0" topmargin="0">

<table border=0 width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr><td width="100% height="100%" align="center" valign="middle">

<table name="main" width="660" height="350" cellpadding="0" cellspacing="0" background="images/postcard.jpg">
<tr>

<td align="center" valign="middle">
<img src="images/cottage.jpg">
</td>

<td align="center" valign="middle">

<!--IMAGE HERE-->To: <input type="text"><br>
<!--IMAGE HERE-->From: <input type="text"><br>
<!--IMAGE HERE-->E-mail: <input type="text"><br>

</td>
</tr>
</table>

</td>
</tr>
</table>

</body>

</html>

I'm not sure where you want things aligned to.. your example page looks ok to me.

Replace the <!-- IMAGE HERE --> bits with images which contain your TO, FROM, and EMAIL text.

And you will obviously need to adjust the length of your inputs using the SIZE="?" commands.


Hope this helps.


A wise man once said "Never let new knowledge cloud your view, or you will lose sight of the knowledge you gained."

Basically.. if someone discovers how to use DIVs on a web page they shouldn't flood the page with them!

Posted: Tue Dec 31, 2002 6:23 pm
by maverickman55
i know exactly what u mean, and i dont' know if i put it in my original post, but i mean to say that i don't want to or like to use all those DIVs, but so far that was the only way i was getting stuff to align. i'm wanting to align the boxes where they were on the page, but without using the DIVs...thanks for the help and i'll try it

Posted: Tue Dec 31, 2002 9:19 pm
by Gen-ik
Let me know who you get on.

If you still have problems then drop me an email with the graphics you use.. and the link to your example page again.. and I will code you up a half decent page :)

Have a good new year!

Posted: Wed Jan 01, 2003 8:55 am
by maverickman55
i appreciate it, and i might just do that