Placing a layer on top of a table

Hi,
Some background: I am working on updating my webpage. I have created the files in Photoshop CS2, and then created slices and rollovers in ImageReady so that when the user mouses over a smaller icon on the left side of the screen the image changes to reveal a larger version of the icon. I then took the site in to GoLive. In GoLive I added a "table" with 1 row and 1 cell, centered and with no border and then placed a Photoshop Smart Object within the table. The original site works fine (The current site is http://www.barkingcatpictures.com).

Currently: I am trying to have one of the pages have multiple photos within the area that shows the larger image in my original site, and I would like users to be able to rollover the image and have a larger image appear. I have tried creating these rollovers in image ready, but due to slices being placed overtop of the slice that would reveal the image, slice order will not allow me to do this. So I have been trying to create layers in GoLive. I have read a lot of the posts and Nate's posts have been helpful. I have looked at the link below:
Here's a tutorial that should clarify:
<http://mindpalette.com/tutorials/center_layers/index.php>
<http://www.adobeforums.com/webx/.59b85b05/0>
I have found the area in the source code, but I wanted to be sure adding the "wrapper" command will work since my code is diferent due to using the table.

Since the table is already centered, will this change the entire page?

Sorry for the long post! If you have any other suggestions on how to proceed, please dont' hesitate.
Thanks in advance for all of your help!
Beth

Just put the wrapper around your table, and make it the same width as the table. The rest of the settings should be the same. If you get it set up that way and it's not working, post back with a link if you can. Be sure to check in the browser though - it's not likely to look right in GoLive.

Hi Nate,

Thank you so much! I have added the wrapper. The page centers, but the layers are still moving when the window is resized in any of the browswers or within GoLive. Below is a link - the images are not on the page, but the code is there.
<http://barkingcatpictures.com/pages/places1test.html>

I really appreciate your insight!
Have a great day
Beth

That means that the layers' code is not within the wrapper. Indeed, nothing
is within the wrapper!

<body onload="preloadImages();" bgcolor="black">
<div id="wrapper"></div>

Change that code to this -

<body onload="preloadImages();" bgcolor="black">
<div id="wrapper">

Then change this -

</body>

to this -

</div>
</body>

and see what happens.

--
Murray

Hi Murray,

Thanks so much for you help! Worked great!!!!

Have a great day.
Beth

P.S. You and Nate are awe inspiring. I have read so many of your posts. Thanks for sharing your knowledge!

You're welcome, Beth. There's no difference between you an me other than
having spent a few hours learning HTML and CSS. Every question here gets
back to those basics.

And the answer is ALWAYS in the code....

--
Murray

The links are moving with the page, and they look great - thanks again!

I have a new issue related to the links. I have created multiple links around smaller photos (these are part of a smartphotoshop which is placed within a table) that are simply placeholders so that I can use the show/hide action to reveal a layer that has a larger version of the image. Of course it works in GoLive, and it works in Firefox, but it isn't working IE or Netscape. The odd thing is that I have 2 drop down menus that work fine in all the browsers. Any suggestions?

Thanks
Beth

It is with genuine trepidation that I say "SHOW US YOUR CODE"! Without it
we are just guessing.

--
Murray

Hi Murray,

Complete trepidation!!!

Below is a link - there are no images, but the code is present.
<http://www.barkingcatpictures.com/pages/portrait2atest>

Thanks
Beth
P.S. At this point I have not added the wrapper to this page

Beth:

The bulk of GL-specific (and non-standard) markup on that page is a bit
daunting for me. I'm not quite sure what you are describing. But I
*believe* that this is the problem -

<div id="pic01small" onmouseover="CSAction(new
Array(/*CMP*/'53fc08c10'));return true;" onmouseout="CSAction(new
Array(/*CMP*/'53fdea311'));" csout="53fdea311" csover="53fc08c10"></div>

You have applied these links to a <div> tag. I would suggest that you NEVER
do that, since different browsers will react differently to such things -
some only triggering the events when the mouse is IMMEDIATELY over the
border of the div, and some not triggering at all. This sounds suspiciously
like the symptoms you report. Mouse events should always be applied to <a>
tags only, and then only <a> tags that also contain an href attribute.

Is it your intention to have images within these divs (seems like it would
be)? In that case, you'd need to have markup like this -

<div id="pic01small"><a href="javascript:;" onmouseover="CSAction(new
Array(/*CMP*/'53fc08c10'));return true;" onmouseout="CSAction(new
Array(/*CMP*/'53fdea311'));" csout="53fdea311" csover="53fc08c10"><img
src="images/foo.gif"></a></div>

Note how the event has been migrated from the <div> tag to the anchor tag
that wraps the <img> tag, i.e., the contents of the div.

Or am I off the deep end here?

--
Murray

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode test 33Switch to Hybrid Mode Switch to Threaded Mode

2 13th February 06:41 nate_baldwin External User Posts: 1	Placing a layer on top of a table Just put the wrapper around your table, and make it the same width as the table. The rest of the settings should be the same. If you get it set up that way and it's not working, post back with a link if you can. Be sure to check in the browser though - it's not likely to look right in GoLive.

3 13th February 06:41 beth_a_edwards External User Posts: 1	Placing a layer on top of a table Hi Nate, Thank you so much! I have added the wrapper. The page centers, but the layers are still moving when the window is resized in any of the browswers or within GoLive. Below is a link - the images are not on the page, but the code is there. <http://barkingcatpictures.com/pages/places1test.html> I really appreciate your insight! Have a great day Beth

4 13th February 06:41 murray External User Posts: 1	Placing a layer on top of a table That means that the layers' code is not within the wrapper. Indeed, nothing is within the wrapper! <body onload="preloadImages();" bgcolor="black"> <div id="wrapper"></div> Change that code to this - <body onload="preloadImages();" bgcolor="black"> <div id="wrapper"> Then change this - </body> to this - </div> </body> and see what happens. -- Murray

5 13th February 06:41 beth_a_edwards External User Posts: 1	Placing a layer on top of a table Hi Murray, Thanks so much for you help! Worked great!!!! Have a great day. Beth P.S. You and Nate are awe inspiring. I have read so many of your posts. Thanks for sharing your knowledge!

6 13th February 06:41 murray External User Posts: 1	Placing a layer on top of a table You're welcome, Beth. There's no difference between you an me other than having spent a few hours learning HTML and CSS. Every question here gets back to those basics. And the answer is ALWAYS in the code.... -- Murray

8 13th February 06:42 murray External User Posts: 1	Placing a layer on top of a table It is with genuine trepidation that I say "SHOW US YOUR CODE"! Without it we are just guessing. -- Murray

9 13th February 06:42 beth_a_edwards External User Posts: 1	Placing a layer on top of a table Hi Murray, Complete trepidation!!! Below is a link - there are no images, but the code is present. <http://www.barkingcatpictures.com/pages/portrait2atest> Thanks Beth P.S. At this point I have not added the wrapper to this page