View Full Version : Table Positioning


Cruzn
03-31-2005, 05:22 PM
My friend asked me to code this layout for... neopets? Anyways, Im having trouble with the link section and other section.
Page that im working on: http://www.geocities.com/glacier8699/index.html
I dont want to use position:absolute and stuff because it views it differently in each browser.
<style type="text/css">
div.a{height:175;width:335;filter:Alpha(opacity=80 );font-weight:bold;overflow:auto;}
div.b{height:235;width:335;filter:Alpha(opacity=80 );font-weight:bold;overflow:auto;}
div.d{width:150;height:200;filter:Alpha(opacity=80 );font-weight:bold;overflow:auto;}
marquee{color:black;font-weight:bold;filter:Alpha(opacity=80)}
b{font:10px verdana; font-weight:bold;}
p,div,table,font,td,input,textarea{color:black;fon t:10px verdana;line-height:80% overflow: auto; font=weight:bold}
input,textarea{border:1px solid;}
a:link,a:visited,a:active,a:hover{font-weight:bold;color:black; text-decoration:none;font:10px;}</style>
<table border=0 style="border-collapse:collapse;" background="http://img.photobucket.com/albums/v473/Cruznx/template.gif" height=550 width=550 cellpadding=0 cellspacing=0><tr><td></tr></td><tr><td style="padding-top: 7px;padding-right: 20px;padding-left: 0px;" valign=top align=center><marquee width=350 scrollamount=3>This is where you type your welcome message.This is where you type your welcome message.This is where you type your welcome message.This is where you type your welcome message.This is where you type your welcome message.This is where you type your welcome message.This is where you type your welcome message.</marquee></tr></td><tr><br><td style="padding-top: 38px;padding-left: 12px; padding-right: 0px;" width=300 rowspan=1 colspan=3 valign=top align=left><div CLASS="a">This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.</div><td style="padding-bottom: 150px" width=150 height=175 align=left><div CLASS="c">LINK AREA</div></tr></td><tr><td style="padding-top: 67px;padding-left: 12px; padding-right: 200px;overflow:auto" width=300 rowspan=1 colspan=1 valign=top align=left><div CLASS="b">This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.</div></tr></td>
Edit: So what im saying is I need to get the link section and the "other" section inline without using absolute positioning, and without the image repeating.

Thanks in advance

Monkey Bizzle
03-31-2005, 05:33 PM
Well, first of all, you were missing the most important codes (<body></body>, <head></head>, etc..) and you closed your table tags in the wrong order... I also found some mistakes in your CSS... Here is your code, corrected:

<html>
<head>

<title>Your Title Goes Here</title>

<style type="text/css">

div.a
{height: 175px;
width: 335px;
filter: Alpha(opacity=80);
font-weight: bold;
overflow: auto;}

div.b
{height: 235px;
width: 335px;
filter: Alpha(opacity=80);
font-weight: bold;
overflow: auto;}

div.d
{width: 150px;
height: 200px;
filter: Alpha(opacity=80);
font-weight: bold;
overflow: auto;}

marquee
{color: #000000;
font-weight: bold;
filter: Alpha(opacity=80);}

b
{font: 10px Verdana;
font-weight: bold;}

p,div,table,font,td,input,textarea
{color: #000000;
font: 10px Verdana;
line-height: 80%;
overflow: auto;
font-weight: bold;}

input,textarea
{border: 1px solid;}

a:link,a:visited,a:active,a:hover
{font-weight: bold;
color: black;
text-decoration: none;
font: 10px;}

</style>

</head>

<body>

<table border="0" style="border-collapse: collapse;" background="http://img.photobucket.com/albums/v473/Cruznx/template.gif" height="550" width="550" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
<tr>
<td style="padding-top: 7px; padding-right: 20px; padding-left: 0;" valign="top" align="center">
<marquee width="350" scrollamount="3">This is where you type your welcome message.This is where you type your welcome message.This is where you type your welcome message.This is where you type your welcome message.This is where you type your welcome message.This is where you type your welcome message.This is where you type your welcome message.</marquee>
</td>
</tr>
<tr>
<td style="padding-top: 38px; padding-left: 12px; padding-right: 0;" width="300" rowspan="1" colspan="3" valign="top" align="left">
<div class="a">This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.This is where you put all of your news.
</div>
</td>
<td style="padding-bottom: 150px;" width="150" height="175" align="left">
<div class="c">LINK AREA</div>
</td>
</tr>
<tr>
<td style="padding-top: 67px; padding-left: 12px; padding-right: 200px; overflow: auto;" width="300" rowspan="1" colspan="1" valign="top" align="left">
<div class="b">This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.This is where your you put all of your contests.
</div>
</td>
</tr>

</body>
</html>

You can absolutely position if you want to as long as you position from the top left. Then, your divs will stay where you want them to. Also, you don't really need to use a table for this... Just absolutely position the image and the divs.

proud_american
04-01-2005, 08:16 PM
My problem is diffrent, I am coding sorta a webpage and am having trouble postioning my table here is the table code I am using:

<div align=center style=filter:alpha(opacity=60);background:#993399; overflow:auto;height:500;width:568;border:dotted green>

If anyone could please help me and maybe tell me what to add so I could position it. Also if your wondering I would like to put it in the middle of the page. Just saying if it helps at all!

pb&j
04-01-2005, 08:22 PM
My problem is diffrent, I am coding sorta a webpage and am having trouble postioning my table here is the table code I am using:

<div align=center style=filter:alpha(opacity=60);background:#993399; overflow:auto;height:500;width:568;border:dotted green>

If anyone could please help me and maybe tell me what to add so I could position it. Also if your wondering I would like to put it in the middle of the page. Just saying if it helps at all!
that is a div tag, not a table.
it may work a bit better like this...

<div style="text-align:center; filter:alpha(opacity=60); background-color:#993399; overflow:auto; height:500px; width:568px; border:solid dotted green;">

proud_american
04-01-2005, 09:16 PM
thank you so much for the code you gave me. It looks better but do you know how I could postiotion it maybe tell me what I could add and were??

pb&j
04-01-2005, 09:20 PM
to position the DIV to a specific spot, take this part out...
text-align:center;
and replace it with this...
position:absolute; left:100px; top:100px;
then adjust the two 100 parts to the correct numbers you want from the left, top corner of your window. it takes a bit of try and error to get the right numbers, but once you have it, its golden.

proud_american
04-01-2005, 09:27 PM
Thank you so much! You wouldn't beleive how long I was searching for that awnser! the best part was that is only took me about 5 tries to get it right. It sure felt good because the table was the only thing I needed to fix. I hope you don't mind if I go to you for more questions :idea:

proud_american
04-01-2005, 09:40 PM
I hate asking another question and putting you through all this trouble again, but I want to make a navigation box in a seprate table. How do I do that without making this navigation box inside the one I alread have. It is a complicated question and I don't know if you even understand it but I mean its worth a shot.

pb&j
04-01-2005, 09:43 PM
you can put the navigation into a new div area and use the same positioning technique to place it into the right spot too. this div area should be coded outside of the first div area. well, really it does not matter, but for good coding practice, its best to be on its own for each div.

questions may be asked openly in the forums as there are many helpful people here that may have different or better answers.

proud_american
04-01-2005, 09:48 PM
I treid making a new table with the same exact code but each time I do the table will appear inside the already existing one

pb&j
04-01-2005, 09:50 PM
you just have to adjust the left and top values.
if its already in the right spot, then you are done.
if not, just adjust those numbers till it falls into the right spot you like.

if problems persist, perhaps provide a link to your page and explain what you are trying to put into what spot.