Layers- Positioning

Guest · Oct 1, 2005

Is there a way to position a layer with reference to the table it is in
rather than the whole page?

Thank you for your help!

Murray · Oct 1, 2005

Is there a way to position a layer with reference to the table

Depends on what you mean by "layer" and by "reference to the table" but,
yes. Can you say more about what you want to do?

Guest · Oct 1, 2005

I have a table, in one of the cells there is a graphic, I would like to place
a layer on top of that graphic. I need the layer to appear in the same spot
no matter what size the browser window is.

Here is the page I am working on:
http://www.ccsd.edu/littletor/class_menu/classes_menu.htm

I would like the "coming soon" to appear over "4th grade"

Does that help?

Murray · Oct 1, 2005

Yes - perfectly!

Let's clean things up a bit first. The page is a bit messy with improper
placement of tags.

Change this -

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="670">

to this -

<table border="0" cellpadding="0" cellspacing="0" width="670"
align="center">

(you do not need such a redundant 'belt and bracers' approach to center a
table)

and this -

<td colspan="2" width="670"
 </td>
<hr noshade>

to this -

<td colspan="2" width="670"
<hr noshade</td>

There can never be any code between </td> and <td>/</tr>.

and this -

<td colspan="2" width="670" height="72"
 </td>
<a href="../classes/Kindergarten/KINDERGARTEN.htm">
<img border="0" src="images/k1_0804.gif" width="670" height="72"
id="img9" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img9',/*url*/'images/k2_0804.gif')"></a></tr>

to this -

<td colspan="2" width="670" height="72">
<a href="../classes/Kindergarten/KINDERGARTEN.htm">
<img border="0" src="images/k1_0804.gif" width="670" height="72"
id="img9" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img9',/*url*/'images/k2_0804.gif')"></a>
</td>
</tr>

(Missing ">" at the end of the opening <td>, and again, code outside of
</td>)

and this -

<td colspan="2" width="670"
<hr noshade></td>
</tr>

to this -

<td colspan="2" width="670">
<hr noshade></td>
</tr>

(again, missing ">")

and this -

<td colspan="2" width="670" height="72" 0" width="670" height="72"
 </td>

to this -

<td colspan="2" width="670" height="72" width="670" height="72">
 </td>

(ditto - also deleted that instance of 0" that had wandered into that tag)

and this -

<td colspan="2" width="670" height="72" 0" width="670" height="72">
 </td>
<a href="../classes/second_grade/Index.htm">
<img border="0" src="images/2nd_gr_roll0804_01.gif" width="670"
height="72" id="img4" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img4',/*url*/'images/2nd_gr_roll0804_01-over.gif')"></a></tr>

to this -

<td colspan="2" height="72" width="670">
<a href="../classes/second_grade/Index.htm">
<img border="0" src="images/2nd_gr_roll0804_01.gif" width="670"
height="72" id="img4" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img4',/*url*/'images/2nd_gr_roll0804_01-over.gif')"></a>
</td>
</tr>

(the wandering 0" again, duplicate widths and heights, and the code outside
of </td>)

and this -

<td colspan="2" width="670" height="72"
</td>
<div style="position: absolute; width: 189px; height: 42px; z-index: 1;
left: 168px; top: 424px" id="layer1">
<h3 align="center"><font color="#FF0000">*** Coming Soon!
***</font></h3>
</div>
<a href="../classes/fourth_grade/fourth_grade.htm">
<img border="0" src="images/4th_gr0804_01.gif" width="670" height="72"
id="img10" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img10',/*url*/'images/4th_gr0804_01-over.gif')"></a></tr>

to this -

<td colspan="2" width="670" height="72">
<div style="position: absolute; width: 189px; height: 42px; z-index: 1;
left: 168px; top: 424px" id="layer1">
<h3 align="center"><font color="#FF0000">*** Coming Soon!
***</font></h3>
</div>
<a href="../classes/fourth_grade/fourth_grade.htm">
<img border="0" src="images/4th_gr0804_01.gif" width="670" height="72"
id="img10" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img10',/*url*/'images/4th_gr0804_01-over.gif')"></a>
</td>
</tr>

(the missing ">" on the <td> tag, and code outside of </td>)

and your page should be at least ready for the next step. How did it get
into such desparate shape?

Let me know, and I'll post back with the real solution.

Guest · Oct 1, 2005

In answer to your quesiton, "how did the page get into such desperate shape",
the HTML on this page was written completely by FrontPage.

Could you please share with me what the real solution is?

Thank you.

Murray · Oct 1, 2005

In answer to your quesiton, "how did the page get into such desperate

shape",
the HTML on this page was written completely by FrontPage.

Somebody would have had to muck about in the code to have it look like that,
though. FP could not write such distressed code.

Could you please share with me what the real solution is?

Yes, but you have to clean the page first, otherwise the real solution may
not work properly. I am assuming that you have cleaned it as I
recommended....

The next thing you will have to do is to get the layer out of the table
cell, where you told FP to put it. So, change this -

<td colspan="2" width="670" height="72">
<div style="position: absolute; width: 189px; height: 42px; z-index: 1;
left: 168px; top: 424px" id="layer1">
<h3 align="center"><font color="#FF0000">*** Coming Soon!
***</font></h3>
</div>
<a href="../classes/fourth_grade/fourth_grade.htm">
<img border="0" src="images/4th_gr0804_01.gif" width="670" height="72"
id="img10" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img10',/*url*/'images/4th_gr0804_01-over.gif')"></a></td>

to this -

<td colspan="2" width="670" height="72">
<a href="../classes/fourth_grade/fourth_grade.htm">
<img border="0" src="images/4th_gr0804_01.gif" width="670" height="72"
id="img10" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img10',/*url*/'images/4th_gr0804_01-over.gif')"></a></td>

(putting absolutely positioned page elements into table cells is always a
bad idea)

and then change this -

</body>

to this -

<div style="position: absolute; width: 189px; height: 42px; z-index: 1;
left: 168px; top: 424px" id="layer1">
<h3 align="center"><font color="#FF0000">*** Coming Soon!
***</font></h3>
</div>
</body>

Finally, you would need do the following.

Change this -

</head>

to this -

<style type="text/css">

</style>
</head>

change this -

<body ...>

to this -

<body ...>
<div id="wrapper">

and this -

</body>

to this -

</div>
</body>

Now, use FP's design view to align the layer exactly where you want it, and
that's where it'll stay.

If you are not up to all these changes, I have done them for you -

http://www.murraytestsite.com/Dpage.txt

Browse to that link, copy the entire chunk of code and paste it into your
page (overwriting everything).

If you want to see how the page will look after you have done that, go
here -

http://www.murraytestsite.com/Dpage.html

(you may need to reposition the layer)

Guest · Oct 1, 2005

Thank you for your hard work.

Murray said:
Somebody would have had to muck about in the code to have it look like that,
though. FP could not write such distressed code.

Yes, but you have to clean the page first, otherwise the real solution may
not work properly. I am assuming that you have cleaned it as I
recommended....

The next thing you will have to do is to get the layer out of the table
cell, where you told FP to put it. So, change this -

<td colspan="2" width="670" height="72">
<div style="position: absolute; width: 189px; height: 42px; z-index: 1;
left: 168px; top: 424px" id="layer1">
<h3 align="center"><font color="#FF0000">*** Coming Soon!
***</font></h3>
</div>
<a href="../classes/fourth_grade/fourth_grade.htm">
<img border="0" src="images/4th_gr0804_01.gif" width="670" height="72"
id="img10" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img10',/*url*/'images/4th_gr0804_01-over.gif')"></a></td>

to this -

<td colspan="2" width="670" height="72">
<a href="../classes/fourth_grade/fourth_grade.htm">
<img border="0" src="images/4th_gr0804_01.gif" width="670" height="72"
id="img10" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img10',/*url*/'images/4th_gr0804_01-over.gif')"></a></td>

(putting absolutely positioned page elements into table cells is always a
bad idea)

and then change this -

</body>

to this -

<div style="position: absolute; width: 189px; height: 42px; z-index: 1;
left: 168px; top: 424px" id="layer1">
<h3 align="center"><font color="#FF0000">*** Coming Soon!
***</font></h3>
</div>
</body>

Finally, you would need do the following.

Change this -

</head>

to this -

<style type="text/css">

</style>
</head>

change this -

<body ...>

to this -

<body ...>
<div id="wrapper">

and this -

</body>

to this -

</div>
</body>

Now, use FP's design view to align the layer exactly where you want it, and
that's where it'll stay.

If you are not up to all these changes, I have done them for you -

http://www.murraytestsite.com/Dpage.txt

Browse to that link, copy the entire chunk of code and paste it into your
page (overwriting everything).

If you want to see how the page will look after you have done that, go
here -

http://www.murraytestsite.com/Dpage.html

(you may need to reposition the layer)

Murray · Oct 1, 2005

You're welcome. Is it working for you?

Layers- Positioning

Guest

Murray

Guest

Murray

Guest

Murray

Guest

Murray