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