complicated header problem

[SysFix]

I'm a little confused since the change from 1.27 to v1.3 of zen in that we are moving away from tables and onto layers instead.

I have created a header in photoshop which I have sliced up, exported using image ready which creates an html file with the sliced header in a table.

In dreamweaver, there's an option to convert table to layers in which each slice is made into a new layer.

However, if I copy this code onto my template header file, the header is fixed in a position and does not follow the rest of the store when you click windowed (restore down) in internet explorer. The main problem though is that the layers are in fact placed over current content in the store. If I simply copy the table code created by photoshop and place in the php file, this works fine.


So, with that in mind - where do i go from here. Use a table? or try to resolve the layers problem. I know that using tables can dramatically change your page ranking in search engines as the content is grabbed from the first cell the bot finds on the page.

As an example, my old store on 1.27 www.sysfix.co.uk/store uses a table at the top. If I convert this table to 20 layers (20 slices) the whole header image is simply plonked on top of the header content (the current stuff doesnt move down)


your thought?

[Kim]

You can simply replace the <div> layout with the table you have created- NOTE: mixing tables and <divs> sometimes has strange results.

[SysFix]

Im not sure you understand.

I really shouldnt use a table as zen has moved away from them
The code below is what has been generated by converting a table to a layers.

<!-- End ImageReady Slices -->
<div id="Layer1" style="position: absolute; left: 0px; top: 0px; width: 323px; height: 31px; z-index: 1; vertical-align: middle"><img src="images/header_01.gif" width="323" height="31" alt=""></div>
<div id="Layer2" style="position: absolute; left: 323px; top: 0px; width: 50px; height: 64px; z-index: 2; vertical-align: middle"><img src="images/header_02.gif" width="50" height="64" alt=""></div>
<div id="Layer3" style="position: absolute; left: 373px; top: 0px; width: 66px; height: 22px; z-index: 3"><img src="images/header_03.gif" width="66" height="22" alt=""></div>
<div id="Layer4" style="position: absolute; left: 439px; top: 0px; width: 300px; height: 64px; z-index: 4; vertical-align: middle"><img src="images/header_04.gif" width="300" height="64" alt=""></div>
<div id="Layer5" style="position: absolute; left: 373px; top: 22px; width: 66px; height: 42px; z-index: 5; vertical-align: middle"><img src="images/header_05.gif" width="66" height="42" alt=""></div>
<div id="Layer6" style="position: absolute; left: 0px; top: 31px; width: 323px; height: 33px; z-index: 6"><img src="images/header_06.gif" width="323" height="33" alt=""></div>
<div id="Layer7" style="position: absolute; left: 0px; top: 0px; width: 1px; height: 64px; z-index: 7"><!-- ImageReady Slices (Untitled-1) --></div>

if you go to http://######-shop.sysfix.co.uk you can see the effect this code has on my store. I have purposely not uploaded the images but you can clearly see that the header will sit on top of the zen cart which is wrong

[SysFix]

i've removed the above example above - i've added the text as a table.
I hope this wont cause any problems with page ranking