Where do you paste image ready sliced header code?

[ladysaat]

1st you rock for explaining that to me.

2nd I changed one little thing in the css and the header pieces all joined back up together again BUT they were above the top green bar... so still not right. My wonderment is why removing this one thing allowed them all to join back up again?

{
<!-- ImageReady Styles (logo.psd) -->
<STYLE TYPE="text/css">
<!--

the little red thing is what I removed

[gws76]

Yeah that's what I had to put in to get it to move below the main wrapper where the home and log in are and to stop covering that and categories side box in IE.

Things have all moved up but they aren't all in the placing they are suppose to be. It's as if they are all aligned to the top. I've notice that only the first slice is directly aligned with the top meaning no space and the others are aligned at the top but with a seperation space. I tried your <div tags to enclose everything but no go on that one. I have been inserting some <table, <td, <tr tags in the tpl_header and that is what has moved everything up but all aligned to the top not under some of the slices like it should be. This is what it looks like in the tpl_header now. I know I'm leaving something simple out but haven't figured it out yet.


This is what my tpl_header and the source of the headache looks like now.


<!--bof-branding display-->
<div id="logoWrapper">

<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>
<!-- ImageReady Slices (logo.psd) -->
<TD>
<DIV ID="logo-01">
<IMG SRC="includes/templates/customtemplate/images/logo_01.gif" WIDTH=18 HEIGHT=165></DIV></TD>

<TD><DIV ID="logo-02">
<a href="http://sullivanvitamins.com">
<IMG SRC="includes/templates/customtemplate/images/logo_02.gif" WIDTH=766 HEIGHT=111></DIV></TD>
<TD><DIV ID="logo-03">
<IMG SRC="includes/templates/customtemplate/images/logo_03.gif" WIDTH=16 HEIGHT=165></DIV></TD>
<TD><DIV ID="logo-04">
<IMG SRC="includes/templates/customtemplate/images/logo_04.gif" WIDTH=123 HEIGHT=54></DIV></TD>
<TD><DIV ID="logo-05">
<a href="http://sullivanvitamins.com">
<IMG SRC="includes/templates/customtemplate/images/logo_05.gif" WIDTH=96 HEIGHT=43></DIV></TD>
<TD><DIV ID="logo-06">
<a href="https://sullivanvitamins.com/index.php?main_page=products_all">
<IMG SRC="includes/templates/customtemplate/images/logo_06.gif" WIDTH=97 HEIGHT=43></DIV></TD>
<TD><DIV ID="logo-07">
<a href="https://sullivanvitamins.com//index.php?main_page=page_3">
<IMG SRC="includes/templates/customtemplate/images/logo_07.gif" WIDTH=99 HEIGHT=43></DIV></TD>
<TD><DIV ID="logo-08">
<a href="https://sullivanvitamins.com/index.php?main_page=page_4">
<IMG SRC="includes/templates/customtemplate/images/logo_08.gif" WIDTH=98 HEIGHT=43></DIV></TD>
<TD><DIV ID="logo-09">
<a href="https://sullivanvitamins.com/index.php?main_page=contact_us">
<IMG SRC="includes/templates/customtemplate/images/logo_09.gif" WIDTH=99 HEIGHT=43></DIV></TD>
<TD><DIV ID="logo-10">
<a href="https://sullivanvitamins.com/index.php?main_page=index&cPath=12">
<IMG SRC="includes/templates/customtemplate/images/logo_10.gif" WIDTH=97 HEIGHT=43></DIV></TD>
<TD><DIV ID="logo-11">
<IMG SRC="includes/templates/customtemplate/images/logo_11.gif" WIDTH=57 HEIGHT=54></DIV></TD>
<TD><DIV ID="logo-12">
<IMG SRC="includes/templates/customtemplate/images/logo_12.gif" WIDTH=586 HEIGHT=11></DIV></TD>
<!-- End ImageReady Slices -->
</TR>
</TABLE>

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

[gjh42]

Ohh boy, where should I start?

I guess first with the principle of absolute positioning; elements will be positioned with reference to the nearest ancestor container that is relatively positioned, or the html/body if none have a position: relative; property in the stylesheet. Since your positioning numbers start at 0,0, the slices will start at the absolute top left, where the header navbar normally is, and cover it. The table tags you have added may have overridden that allowing the navbar to show.
The correct way to get your absolute positioning to work is to give #logoWrapper { position: relative; } in your stylesheet. Then the slice positions will refer to that box. I don't know if they will all fall into the proper places with each other yet.

There is extra code in your stylesheet which breaks it in several ways. First, the <!-- and --> above and below the block of stylesheet declarations are HTML comment tags which don't work in CSS but mess up the first two declarations.
I don't know what effect the <STYLE TYPE="text/css"> has in your stylesheet, but it is not needed there and can't be good for it.
I don't know why adding the { and } above and below your block of stylesheet declarations helped some, but they are not correct usage.
You want nothing but style declarations like
#logo-01 {
position:absolute;
left:0px;
top:0px;
width:18px;
height:165px;
}
in your stylesheet.

In tpl_header.php, you have essentially done most everything twice with the table tags around the div tags.
You can use either table tags or div tags but don't need both for this purpose. You are setting the height & width of the images in the code, and again in the stylesheet.

Last for now, you still have the whole original logo display below your new code, so it will try to display that on the page as well.

[gws76]

Ohh boy, where should I start?

I guess first with the principle of absolute positioning; elements will be positioned with reference to the nearest ancestor container that is relatively positioned, or the html/body if none have a position: relative; property in the stylesheet. Since your positioning numbers start at 0,0, the slices will start at the absolute top left, where the header navbar normally is, and cover it. The table tags you have added may have overridden that allowing the navbar to show.
The correct way to get your absolute positioning to work is to give #logoWrapper { position: relative; } in your stylesheet. Then the slice positions will refer to that box. I don't know if they will all fall into the proper places with each other yet.

There is extra code in your stylesheet which breaks it in several ways. First, the <!-- and --> above and below the block of stylesheet declarations are HTML comment tags which don't work in CSS but mess up the first two declarations.
I don't know what effect the <STYLE TYPE="text/css"> has in your stylesheet, but it is not needed there and can't be good for it.
I don't know why adding the { and } above and below your block of stylesheet declarations helped some, but they are not correct usage.
You want nothing but style declarations like
#logo-01 {
position:absolute;
left:0px;
top:0px;
width:18px;
height:165px;
}
in your stylesheet.

In tpl_header.php, you have essentially done most everything twice with the table tags around the div tags.
You can use either table tags or div tags but don't need both for this purpose. You are setting the height & width of the images in the code, and again in the stylesheet.

Last for now, you still have the whole original logo display below your new code, so it will try to display that on the page as well.

After implementing those changings the header is together below the mainwrapper but now covering the entire categories sidebox. I added the #logowrapper {position: relative;}I remove the<!-- and --> and <STYLE TYPE="text/css"> html references you talked about. Also I remove the {} above and below in the stylesheet like you suggested. Lastly, I removed the table tags. I didn't understand where to change the last for now suggestion about the whole original header.

This is what my stylesheet looks like now.


#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
text-align: center;
}


#logoWrapper
{position: relative;
}



#logo-01 {
position:absolute;
left:0px;
top:0px;
width:18px;
height:165px;
}

#logo-02 {
position:absolute;
left:18px;
top:0px;
width:766px;
height:111px;
}

#logo-03 {
position:absolute;
left:784px;
top:0px;
width:16px;
height:165px;
}

#logo-04 {
position:absolute;
left:18px;
top:111px;
width:123px;
height:54px;
}

#logo-05 {
position:absolute;
left:141px;
top:111px;
width:96px;
height:43px;
}

#logo-06 {
position:absolute;
left:237px;
top:111px;
width:97px;
height:43px;
}

#logo-07 {
position:absolute;
left:334px;
top:111px;
width:99px;
height:43px;
}

#logo-08 {
position:absolute;
left:433px;
top:111px;
width:98px;
height:43px;
}

#logo-09 {
position:absolute;
left:531px;
top:111px;
width:99px;
height:43px;
}

#logo-10 {
position:absolute;
left:630px;
top:111px;
width:97px;
height:43px;
}

#logo-11 {
position:absolute;
left:727px;
top:111px;
width:57px;
height:54px;
}

#logo-12 {
position:absolute;
left:141px;
top:154px;
width:586px;
height:11px;
}

[gws76]

This is what my tpl_header looks like now.

<!--bof-branding display-->
<div id="logoWrapper">



<DIV ID="logo-01">
<IMG SRC="includes/templates/customtemplate/images/logo_01.gif" WIDTH=18 HEIGHT=165></DIV>

<DIV ID="logo-02">
<a href="http://sullivanvitamins.com">
<IMG SRC="includes/templates/customtemplate/images/logo_02.gif" WIDTH=766 HEIGHT=111></DIV>

<DIV ID="logo-03">
<IMG SRC="includes/templates/customtemplate/images/logo_03.gif" WIDTH=16 HEIGHT=165></DIV>

<DIV ID="logo-04">
<IMG SRC="includes/templates/customtemplate/images/logo_04.gif" WIDTH=123 HEIGHT=54></DIV>

<DIV ID="logo-05">
<a href="http://sullivanvitamins.com">
<IMG SRC="includes/templates/customtemplate/images/logo_05.gif" WIDTH=96 HEIGHT=43></DIV>

<DIV ID="logo-06">
<a href="https://sullivanvitamins.com/index.php?main_page=products_all">
<IMG SRC="includes/templates/customtemplate/images/logo_06.gif" WIDTH=97 HEIGHT=43></DIV>

<DIV ID="logo-07">
<a href="https://sullivanvitamins.com//index.php?main_page=page_3">
<IMG SRC="includes/templates/customtemplate/images/logo_07.gif" WIDTH=99 HEIGHT=43></DIV>

<DIV ID="logo-08">
<a href="https://sullivanvitamins.com/index.php?main_page=page_4">
<IMG SRC="includes/templates/customtemplate/images/logo_08.gif" WIDTH=98 HEIGHT=43></DIV>

<DIV ID="logo-09">
<a href="https://sullivanvitamins.com/index.php?main_page=contact_us">
<IMG SRC="includes/templates/customtemplate/images/logo_09.gif" WIDTH=99 HEIGHT=43></DIV>

<DIV ID="logo-10">
<a href="https://sullivanvitamins.com/index.php?main_page=index&cPath=12">
<IMG SRC="includes/templates/customtemplate/images/logo_10.gif" WIDTH=97 HEIGHT=43></DIV>

<DIV ID="logo-11">
<IMG SRC="includes/templates/customtemplate/images/logo_11.gif" WIDTH=57 HEIGHT=54></DIV>

<DIV ID="logo-12">
<IMG SRC="includes/templates/customtemplate/images/logo_12.gif" WIDTH=586 HEIGHT=11></DIV>


<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

[gjh42]

This is the original code for the logo:

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

Delete that, and you may want to get rid of more of the branding display section since you appear not to be using any of it. If you do, be sure to leave

</div>
<!--eof-branding display-->

at the end of the section.

A better method would be to comment out the code you don't want, in case you later change your mind.

[gws76]

This is the original code for the logo:

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

Delete that, and you may want to get rid of more of the branding display section since you appear not to be using any of it. If you do, be sure to leave

</div>
<!--eof-branding display-->

at the end of the section.

A better method would be to comment out the code you don't want, in case you later change your mind.

I deleted the that section for the orignal logo code which made some of my links on different pages go red from green. Then I deleted the rest of the branding display below and left the </div>... and it made the header move further down. I pasted it back and now the product description and price text is red in internet explorer and black in firefox.

Something I'm leaving out that's not telling the rest of the page to stay down as everything is moved up underneath the header. This is what my tpl_header looks like now.

<!--bof-branding display-->
<div id="logoWrapper">



<DIV ID="logo-01">
<IMG SRC="includes/templates/customtemplate/images/logo_01.gif" WIDTH=18 HEIGHT=165></DIV>

<DIV ID="logo-02">
<a href="http://sullivanvitamins.com">
<IMG SRC="includes/templates/customtemplate/images/logo_02.gif" WIDTH=766 HEIGHT=111></DIV>

<DIV ID="logo-03">
<IMG SRC="includes/templates/customtemplate/images/logo_03.gif" WIDTH=16 HEIGHT=165></DIV>

<DIV ID="logo-04">
<IMG SRC="includes/templates/customtemplate/images/logo_04.gif" WIDTH=123 HEIGHT=54></DIV>

<DIV ID="logo-05">
<a href="http://sullivanvitamins.com">
<IMG SRC="includes/templates/customtemplate/images/logo_05.gif" WIDTH=96 HEIGHT=43></DIV>

<DIV ID="logo-06">
<a href="https://sullivanvitamins.com/index.php?main_page=products_all">
<IMG SRC="includes/templates/customtemplate/images/logo_06.gif" WIDTH=97 HEIGHT=43></DIV>

<DIV ID="logo-07">
<a href="https://sullivanvitamins.com//index.php?main_page=page_3">
<IMG SRC="includes/templates/customtemplate/images/logo_07.gif" WIDTH=99 HEIGHT=43></DIV>

<DIV ID="logo-08">
<a href="https://sullivanvitamins.com/index.php?main_page=page_4">
<IMG SRC="includes/templates/customtemplate/images/logo_08.gif" WIDTH=98 HEIGHT=43></DIV>

<DIV ID="logo-09">
<a href="https://sullivanvitamins.com/index.php?main_page=contact_us">
<IMG SRC="includes/templates/customtemplate/images/logo_09.gif" WIDTH=99 HEIGHT=43></DIV>

<DIV ID="logo-10">
<a href="https://sullivanvitamins.com/index.php?main_page=index&cPath=12">
<IMG SRC="includes/templates/customtemplate/images/logo_10.gif" WIDTH=97 HEIGHT=43></DIV>

<DIV ID="logo-11">
<IMG SRC="includes/templates/customtemplate/images/logo_11.gif" WIDTH=57 HEIGHT=54></DIV>

<DIV ID="logo-12">
<IMG SRC="includes/templates/customtemplate/images/logo_12.gif" WIDTH=586 HEIGHT=11></DIV>




</DIV>
<!--eof-branding display-->

[gjh42]

Ah yes, another feature of absolute positioning: it puts the element outside the flow of the page display, so its size is not considered when placing elements after it. Try giving #logoWrapper a height and width in the stylesheet.

"now the product description and price text is red in internet explorer and black in firefox"
This is extremely messed up, as the header display has no bearing on the product info page display. You might try renaming tpl_header.php to save_tpl_header.php, copying in a fresh version from /template_default/common/, and applying your changes in chunks to that, starting with deleting the original logo display. See when it breaks as you describe above, and that will narrow down the suspects.

[gws76]

Ah yes, another feature of absolute positioning: it puts the element outside the flow of the page display, so its size is not considered when placing elements after it. Try giving #logoWrapper a height and width in the stylesheet.

"now the product description and price text is red in internet explorer and black in firefox"
This is extremely messed up, as the header display has no bearing on the product info page display. You might try renaming tpl_header.php to save_tpl_header.php, copying in a fresh version from /template_default/common/, and applying your changes in chunks to that, starting with deleting the original logo display. See when it breaks as you describe above, and that will narrow down the suspects.

Well I defined the logowrapper to 800px for width and 165px for height and that seemed to define its space so now it's not overlapping. Thanks alot! And I took from the saved original version of the tpl_header and pasted the branding display over the last one and that seems to take care of red font issue. So now the categories hyperlinks and product hyperlinks are green but the price, description and product title when you click on an individual product are black font which is probably good since it contrasts with the green. However, I think I would like the product title to stay green when you click on the product and go to the description. Where would you change that? This is what it looks like now my stylesheet.

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
text-align: center;
}


#logoWrapper
{position: relative;
width: 800px;
height: 165px;
}



#logo-01 {
position:absolute;
left:0px;
top:0px;
width:18px;
height:165px;
}

#logo-02 {
position:absolute;
left:18px;
top:0px;
width:766px;
height:111px;
}

#logo-03 {
position:absolute;
left:784px;
top:0px;
width:16px;
height:165px;
}

#logo-04 {
position:absolute;
left:18px;
top:111px;
width:123px;
height:54px;
}

#logo-05 {
position:absolute;
left:141px;
top:111px;
width:96px;
height:43px;
}

#logo-06 {
position:absolute;
left:237px;
top:111px;
width:97px;
height:43px;
}

#logo-07 {
position:absolute;
left:334px;
top:111px;
width:99px;
height:43px;
}

#logo-08 {
position:absolute;
left:433px;
top:111px;
width:98px;
height:43px;
}

#logo-09 {
position:absolute;
left:531px;
top:111px;
width:99px;
height:43px;
}

#logo-10 {
position:absolute;
left:630px;
top:111px;
width:97px;
height:43px;
}

#logo-11 {
position:absolute;
left:727px;
top:111px;
width:57px;
height:54px;
}

#logo-12 {
position:absolute;
left:141px;
top:154px;
width:586px;
height:11px;
}

[gws76]

Also, I forgot to add how can I center my header in the page?