PDA

View Full Version : DIV relative to top left corner of a table?

dysfunctionGazz
01-17-2007, 02:28 PM
Ive done a site using imageready html table for the background. This is 750px wide and centered on the page.

I want to just sit a layer on top of it, for the text to go in. This normally nicely avoids things stretching etc if content overflows vertically.

But as the table is centered, the postition of the text varies dependent on the size of the window (as in a small window the table fills the whole thing, whereas if u maximise it, then it goes to the middle).

I just want to set the same DIV for my text so that it goes X many pixels down and across from the top left corner of my table.

Can this be done?

Thanks,
Gazz
koyama
01-17-2007, 02:49 PM
Perhaps something like this:

#table_wrapper {
position: relative;
width: 750px;
margin: 0 auto;
}
#text {
position: absolute;
width: 100px; // for example
left: 30px;
top: 30px;
}


<div id="table_wrapper">
<div id="text">Text on top of table</div>
<table>
...
</table>
</div>


Not quite sure if this is what you mean. But is it really necessary to use tables?
dysfunctionGazz
01-17-2007, 03:03 PM
Hi thanks for the reply

Im sure its not strictly necessary to use tables but this is a rush job I have to get up today (its for a club night I DJ at) so Im just doing things the way I know!

Ill post the code below, as im not sure how to integrate what you put into what I have, maybe you could help with that?

The DIV position which I want to change is the one where it talks about welcome to the site, etc...

<html>
<head>
<title>:: Guerilla Rocks ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
<link rel="stylesheet" href="guerillastyle.css" type="text/css">
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Layer1" style="position:absolute; left:281px; top:147px; width:526px; height:463px; z-index:1">
<p class="mainheading">WELCOME TO GUERILLA ROCKS 2007</p>
<p class="maintext">Hello all, happy new year and welcome to our brand spanking
new site, we hope you like it! Please look around to see all the new features
and what's coming up at the club.</p>
<p class="maintext">If you haven't yet done so, please sign up as a member on
the left (Membership link) to enjoy discounted entry to the club every week!</p>
<p class="maintext">We've added a forum too, as a way for you to talk to new
people from the club, make requests to us and so on.</p>
<p class="maintext">New photos etc coming very soon!<br>
<br>
DJs Jig-Saw, Gazz Marlow &amp; Sam</p>
<p class="maintext">GUERILLA ROCKS</p>
</div>
<div align="center">
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0 HEIGHT="100%" BGCOLOR=CB0000>
<TR>
<TD VALIGN="TOP" ALIGN="CENTER">
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=CB0000>
<TR>
<TD COLSPAN=2><IMG SRC="images/guerillarocks_01.gif" WIDTH=525 HEIGHT=98 ALT=""></TD>
<TD ROWSPAN=2><IMG SRC="images/guerillarocks_02.gif" WIDTH=225 HEIGHT=114 ALT=""></TD></TR>
<TR>
<TD ROWSPAN=2><IMG SRC="images/guerillarocks_03.gif" WIDTH=129 HEIGHT=31 ALT=""></TD>
<TD><IMG SRC="images/guerillarocks_04.gif" WIDTH=396 HEIGHT=16 ALT=""></TD></TR>
<TR>
<TD COLSPAN=2><IMG SRC="images/guerillarocks_05.gif" WIDTH=621 HEIGHT=15 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_06.gif" WIDTH=129 HEIGHT=29 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=9><IMG SRC="images/guerillarocks_07.gif" WIDTH=621 HEIGHT=348 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_08.gif" WIDTH=129 HEIGHT=30 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_09.gif" WIDTH=129 HEIGHT=29 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_10.gif" WIDTH=129 HEIGHT=29 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_11.gif" WIDTH=129 HEIGHT=30 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_12.gif" WIDTH=129 HEIGHT=30 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_13.gif" WIDTH=129 HEIGHT=30 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_14.gif" WIDTH=129 HEIGHT=31 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_15.gif" WIDTH=129 HEIGHT=110 ALT=""></TD></TR>
<TR>
<TD colspan="3" width="750" height="*">&nbsp;
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</div>
</body>
</html>
koyama
01-17-2007, 03:24 PM
I've quickly made some changes. I don't know what there is in your linked style sheet though.

<html>
<head>
<title>:: Guerilla Rocks ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>

<style type="text/css">
#table_wrap {
position: relative;
width: 750px;
margin: 0 auto;
}
#text {
position: absolute;
left: 50px; /* changable */
top: 50px; /* changable */
width: 526px; /* changable */
}
</style>

<link rel="stylesheet" href="guerillastyle.css" type="text/css">
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="table_wrap">
<div id="text">
<p class="mainheading">WELCOME TO GUERILLA ROCKS 2007</p>
<p class="maintext">Hello all, happy new year and welcome to our brand spanking
new site, we hope you like it! Please look around to see all the new features
and what's coming up at the club.</p>
<p class="maintext">If you haven't yet done so, please sign up as a member on
the left (Membership link) to enjoy discounted entry to the club every week!</p>
<p class="maintext">We've added a forum too, as a way for you to talk to new
people from the club, make requests to us and so on.</p>
<p class="maintext">New photos etc coming very soon!<br>
<br>
DJs Jig-Saw, Gazz Marlow &amp; Sam</p>
<p class="maintext">GUERILLA ROCKS</p>
</div>
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0 HEIGHT="100%" BGCOLOR=CB0000>
<TR>
<TD VALIGN="TOP" ALIGN="CENTER">
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=CB0000>
<TR>
<TD COLSPAN=2><IMG SRC="images/guerillarocks_01.gif" WIDTH=525 HEIGHT=98 ALT=""></TD>
<TD ROWSPAN=2><IMG SRC="images/guerillarocks_02.gif" WIDTH=225 HEIGHT=114 ALT=""></TD></TR>
<TR>
<TD ROWSPAN=2><IMG SRC="images/guerillarocks_03.gif" WIDTH=129 HEIGHT=31 ALT=""></TD>
<TD><IMG SRC="images/guerillarocks_04.gif" WIDTH=396 HEIGHT=16 ALT=""></TD></TR>
<TR>
<TD COLSPAN=2><IMG SRC="images/guerillarocks_05.gif" WIDTH=621 HEIGHT=15 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_06.gif" WIDTH=129 HEIGHT=29 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=9><IMG SRC="images/guerillarocks_07.gif" WIDTH=621 HEIGHT=348 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_08.gif" WIDTH=129 HEIGHT=30 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_09.gif" WIDTH=129 HEIGHT=29 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_10.gif" WIDTH=129 HEIGHT=29 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_11.gif" WIDTH=129 HEIGHT=30 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_12.gif" WIDTH=129 HEIGHT=30 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_13.gif" WIDTH=129 HEIGHT=30 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_14.gif" WIDTH=129 HEIGHT=31 ALT=""></TD></TR>
<TR>
<TD><IMG SRC="images/guerillarocks_15.gif" WIDTH=129 HEIGHT=110 ALT=""></TD></TR>
<TR>
<TD colspan="3" width="750" height="*">&nbsp;
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</div>
</body>
</html>
dysfunctionGazz
01-17-2007, 03:43 PM
Still being problematic - the DIV Id #table wrap doesnt seem to actually do anything at the mo. I copied the code as it was and basically it still seems to be absolute in its alignment (50 x 50 in from the top left of the screen, as opposed to the table).

How does the #text div know to be relative to the #table wrap?
as #text is absolute positioning and #table wrap is relative... or am i just getting confused?!

Ta
koyama
01-17-2007, 03:55 PM
yeah, but the text now follows the centered table and not the viewport as you scale your browser window width, right?

I couldn't see where you wanted the text positioned since I wasn't able to see the slices, but go ahead and change the styles in this part to fit the actual values you need:

#text {
position: absolute;
left: 50px; /* offset in x direction from tabel */
top: 50px; /* offset from table top */
width: 526px; /* width of text */
}

Setting position: relative for the #table_wrapper ensures that positions for positioned elements within #table_wrapper are relative to this---which is exactly the case for #text having position absolute.
koyama
01-17-2007, 04:40 PM
whoops sorry... forgot IE. I see what you mean. Apparently you need a doctype declaration in order to get content cetered, so put this in at the top.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">