Where do you paste image ready sliced header code?

[gjh42]

The reason the title changes to black is because it is not a link on the product info page. Since that gives a message to the user, it may be better not to edit it.

This is something you can find for yourself by using the Firefox Web Developer tools, which you need to become familiar with.

There are several stylesheet methods for centering an element, including margin: auto; and text-align: center;.

[gws76]

The reason the title changes to black is because it is not a link on the product info page. Since that gives a message to the user, it may be better not to edit it.

This is something you can find for yourself by using the Firefox Web Developer tools, which you need to become familiar with.

There are several stylesheet methods for centering an element, including margin: auto; and text-align: center;.

I tried both methods you listed but they didn't work. I inserted them in the #logo section as you can see below that's what the stylesheet looks like now. Is that the right spot? The header is still aligned to the left.

Also, I wanted to make the font in the tab change colors when you stick your mouse over them. Right now they are yellow and would like them to change to red when the mouse goes over them.


#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;
}

[gjh42]

The logo is inside #logoWrapper with no slop, so no aligning in #logo will do anything. You need to give #logoWrapper {margin: auto;}.

By "text" do you mean the text on your tab images? That is not real text, just a picture of text, and can't be affected by stylesheet hover rules. If the tab images were background images called in the stylesheet, you could substitute an image with red text on hover.

A couple of points - it would be much easier to help if I could see your actual site. Can you post a link, or is it on a local pc now?
When you post code examples, it works better to put code tags around them so they don't take up acres of space, and also keep the color coding to make it easier to read. Use these [ php ] and [ /php ] (lose the spaces).

[Berserker]

The header I designed in photoshop I used the slice tool in image ready to allow for hyperlink capabilities. Now I want to upload via ftp to my server to replace the current header. Where do I paste this code for the image ready slices? Also I have six different headers with the same set up (the tab is colored different depending on what page you are on. How do I set up so the header will change depending on the page you are on?

Hello,

Why don't you use php include to add your Image Ready header? It's what i did for mine and it works.

Regards

[gws76]

The logo is inside #logoWrapper with no slop, so no aligning in #logo will do anything. You need to give #logoWrapper {margin: auto;}.

By "text" do you mean the text on your tab images? That is not real text, just a picture of text, and can't be affected by stylesheet hover rules. If the tab images were background images called in the stylesheet, you could substitute an image with red text on hover.

A couple of points - it would be much easier to help if I could see your actual site. Can you post a link, or is it on a local pc now?
When you post code examples, it works better to put code tags around them so they don't take up acres of space, and also keep the color coding to make it easier to read. Use these [ php ] and [ /php ] (lose the spaces).

Hello,

Why don't you use php include to add your Image Ready header? It's what i did for mine and it works.

Regards

Glen,

Well I put in the code in #logowrapper and still no go. I tried both margin: auto; and text-align: center; This is what it looks like below. For the tabs, slices logo_2-logo_10 are the tabs. How do I make the tab images background images in the stylesheets and substitute the image with red text on hoover. The site is www.sullivanvitamins.com

Berserker,

Sorry I don't understand can you explain more. Header looks fine but I wanted it to be centered and to have the hoover effect for the text on the tabs.

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

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

#logoWrapper
{text-align: center;
} 

[gjh42]

You have this declaration which appears after your new #logoWrapper declaration and overrides the margin: auto; in it:

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

Eliminate

#logoWrapper,

from the second one.

Make the first one

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

and scrap the separate
#logoWrapper
{text-align: center;
}

[gjh42]

For the hover... this is going to get into a lot of work, and will require four different background images for each button when you include inactive page, inactive page hover, active page, and active page hover.

There will be a better and much simpler way of doing the whole thing, but it will involve scrapping most all of the header work you have done so far.

[Berserker]

Berserker,

Sorry I don't understand can you explain more. Header looks fine but I wanted it to be centered and to have the hoover effect for the text on the tabs.

Hi there,

If you look at my site www.animestrike.co.uk, the header is also made up of image ready slices. However, instead of having all the codes entered in the tpl_header like in yours, mine simply calls the html to replace the logo.

For example, when you made your header in image ready, you also made an html (i.e. home.html). I simply put this on my tpl_header using php_include to replace the logo.

Regards