Absolute Position of a table realtive to a cell?

S

Sixbells

Hello;
I am creating a sidebar for a website that is a cell within a table and has
a background picture, and I want to add a photo that stays in an absolute
position relative to the same cell. I thought the code below defined the
absolute position, but I was wrong. This is easy I am sure, but I have been
spending too much time figuring it out. This is the last hurtle before I can
do a beta release to the client.

Thanks in advance...
~~~~~~~~~~~~~~~
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Position Layers in Tables</title>
</head>

<body>
<div align="center">
<center>
<table border="0" cellpadding="0" style="border-style:solid;
border-width:1px; padding:0; border-collapse: collapse; width:390;
height:693" bordercolor="#000000" id="AutoNumber1" bgcolor="#FFFFFF">
<tr>
<td align="left" style="background-position: left center; margin:0;
padding:0px; font-family:Arial; font-size:12pt; letter-spacing:2;
color:#FFFFFF; font-weight:bold; text-align:center; word-spacing:0;
line-height:150%; text-indent:0; vertical-align:middle;
background-image:url('images/MBar390x693.jpg')" nowrap width="390"
height="693">
</td>
</tr>
</table>
</center>
</div>
<!-- Photo here, I want it to remain style="position: absolute; width:
252px; height: 315px; right: 50; top: 50" to the TR above -->
<img border="0" src="images/CSMPhoto252x315.jpg" style="position: absolute;
width: 252px; height: 315px; right: 283; top: 43">
<!-- DOESN'T WORK!! ;-P -->
</body>

</html>
~~~~~~~~~~~~~~~
Sixbells
 
R

Ronx

<div align="center">
<center>
<table border="0" cellpadding="0" style="border-style:solid;
border-width:1px; padding:0; border-collapse: collapse; width:390;
height:693" bordercolor="#000000" id="AutoNumber1" bgcolor="#FFFFFF">
<tr>
<td style="background-position: left center; margin:0; padding:0px;
font-family:Arial,sans-serif; font-size:12pt; letter-spacing:2px;
color:#FFFFFF; font-weight:bold; text-align:center; word-spacing:0;
line-height:150%; text-indent:0; vertical-align:middle;
background-image:url('images/MBar390x693.jpg')" nowrap width="390"
height="693"><div style="position:relative;> <!-- Photo here, I want it
to remain style="position: absolute; width:
252px; height: 315px; right: 50; top: 50" to the TR above --> <img
src="images/CSMPhoto252x315.jpg" style="position: absolute;width: 252px;
height: 315px; right: 283px; top: 43px;border:none;"></div>
</td>
</tr>
</table>
</center>
</div>

Note that when using CSS, all dimensions must have units (px, em, %
etc) except when 0 is involved.
Pt are a printers measure, 1/72 inches. Different browsers will
interpret pts in different ways resulting in different sized text.
Opera is noticeably smaller than IE. Better to use pixels or relative
sizes (em, % or keywords such as small, medium etc.).
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp
 
S

Sixbells

Thanks Ron!...you were kind enough to respond to my thread regarding
embedding an IMG in a cell. I have a couple of additional final questions:

1) Why two "center" declarations?
~~~~~~~~~~~~~~~
<div align="center">
<center>
~~~~~~~~~~~~~~~
<table border="0" cellpadding="0" style="border-style:solid;
border-width:1px; padding:0; border-collapse: collapse; width:390;
height:693" bordercolor="#000000" id="SideBarM" bgcolor="#FFFFFF">
<tr>
<td style="background-position: left center; margin:0; padding:0px;
vertical-align:middle; background-image:url('images/MBar390x693.jpg')"
nowrap width="390" height="693">
~~~~~~~~~~~~~~~
2) Why two style declarations, <div style="position:relative">, the other
refers to the actual IMG, style="position: absolute;?
~~~~~~~~~~~~~~~
<div style="position:relative">
<img src="images/csmphoto252x315.jpg" style="position: absolute;width:
252px;
height: 315px; right: 50px; top: 50px;border:none;" id="CSMPhoto274x342">
</div>
</td>
</tr>
</table>
</center>
</div>

3) Finally, I want the IMG(Photo) in the upper right corner, yet I have
tried top: 50px; right: 50px; with no joy. Are the settings based relative to
the top left of the page, table, TR, TD?
 
R

Ronx

1) Why two "center" declarations?
This provides code for very old browsers (Netscape 3 and that era). The
better way for modern browsers is:
<table style="border:solid 1px #000000; padding:0; border-collapse:
collapse; width:390; margin 0 auto; background:#ffffff" id="SideBarM">

margin: 0 auto; together with the specified width, centers the table
without the side effect of centering everything in the table.

2) Why two style declarations, <div style="position:relative">, the
other refers to the actual IMG, style="position: absolute;?

Placing the image inside a relatively positioned container (<div
style="position:relative;"><img ..></div> means that the image will
always be in the same place relative to the <div>. Since the <div> is
in a table cell, in a table that centres in the browser of unknown
width, the image will always be correctly located. Without the <div>,
the image will be positioned relative to the top left corner of the page
- and will thus appear to move around as the browser width is changed.

3) Finally, I want the IMG(Photo) in the upper right corner, yet I have
tried top: 50px; right: 50px; with no joy. Are the settings based
relative to the top left of the page, table, TR, TD?

The coordinates are relative to the top left corner of the <div>. The
div fills the table cell, so the cords required are top: 0; right: 0; to
place the image in top right of the <div> and thus table cell. The cell
itself still has to have content to keep it open to the correct minimum
size to accommodate the image.
It may be easier to not use positioning at all (but this depends on the
cell content):

<td style="background-position: left center; margin:0; padding:0px;
vertical-align:middle; background-image:url('images/MBar390x693.jpg');
white-space:nowrap; width:390px; height:693px;"><img
style="float:right;margin-left:5px;margin-bottom:5px;border:none;"
src="images/csmphoto252x315.jpg" alt="image description" width="252"
height="315" id="CSMPhoto274x342">
Rest of cell contents
</td>
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Error message "An error has occured in the script on this page" 1
CSS DOES NOT DISPLAY IN IE7 FROM AN INDEX PAGE 4
Report Grouping 2
Menu to drop down only on arrow? 3
Frontpage removes javascript after save 6
Problem seeing some characters when sending email to Outlook client 60
Aligning trouble 4
Front page Template ?? 3

Top