Top Page Problem

[Guest]

Hi Guys,

I changed the top of my store, it is good, but when I restore down the page (reduce de size of the page in the screen)or change the setting of the video to 800x600.I have a problem with my top, because the background of the search (right of the top page) is covering part of the top.

All the page reduce correctly, but just the top dont do that.

How can I solve this problem?

Thanks

My Version is 3.0.8

www.niquemusic.com/niquestore

[roban]

How did you add the header image. It doesn't seem to be an image when I right click on it there's no information. Can you post your layout.css file?

[Guest]

How did you add the header image. It doesn't seem to be an image when I right click on it there's no information. Can you post your layout.css file?

This is my layaout.ccs

I saved a topHeader.gif inside of the background folder.

body {

margin: 5px;

}

#pageSurround {

width: 83%;

margin: 0px auto;

padding:1px;

}

#subSurround {

padding-left: 5px;

}

#topHeader {

text-align: center;

height: 100px;

background-image: url(../styleImages/backgrounds/topHeader.gif);

background-position: left;

background-repeat: no-repeat;

}

#sessionBox {

text-align: center;

background-image: url(../styleImages/backgrounds/sessionBg.gif);

background-position: right;

width: 236px;

height: 96px;

float: right;

background-repeat: no-repeat;

}

.topCats {

text-align: center;

background-image: url(../styleImages/backgrounds/catBg.gif);

height: 42px;

color: #ffffff;

margin-bottom:10px;

background-repeat: no-repeat;

}

.topCatsBgRight {

background-image: url(../styleImages/backgrounds/catBgRight.gif);

background-repeat: no-repeat;

background-position: right;

height: 42px;

}

.topCatsBgLeft {

float: left;

background-image: url(../styleImages/backgrounds/catBgLeft.gif);

background-repeat: no-repeat;

background-position: left;

height: 42px;

}

.siteDocs {

text-align: center;

background-image: url(../styleImages/backgrounds/siteDocsBg.gif);

height: 30px;

color: #ffffff;

background-repeat: no-repeat;

}

.siteDocsBgRight {

background-image: url(../styleImages/backgrounds/siteDocsBgRight.gif);

background-repeat: no-repeat;

background-position: right;

height: 30px;

}

.siteDocsBgLeft {

float: left;

background-image: url(../styleImages/backgrounds/siteDocsBgLeft.gif);

background-repeat: no-repeat;

background-position: left;

height: 30px;

}

.boxTitleLeft, .boxTitleRight {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 70%;

color: #000000;

background-image: url(../styleImages/backgrounds/boxTitleBg.gif);

width: 175px;

height: 13px;

padding-top: 2px;

padding-left: 5px;

background-repeat: no-repeat;

font-weight: bold;

}

.boxFootLeft, .boxFootRight {

background-image: url(../styleImages/backgrounds/boxFootBg.gif);

width: 175px;

height: 12px;

padding-left: 5px;

background-repeat: no-repeat;

margin-bottom: 10px;

}

.boxContentLeft, .boxContentRight {

border-left: 1px solid #CCCCCC;

border-right: 1px solid #CCCCCC;

background-color: #FFFFFF;

padding-left: 5px;

padding-top: 9px;

padding-bottom: 5px;

width: 168px;

}

.boxContent {

border-top: 3px solid #CFE3F5;

border-right: 1px solid #cccccc;

border-bottom: 1px solid #cccccc;

border-left: 1px solid #cccccc;

padding: 3px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 75%;

color: #333333;

margin-bottom: 5px;

}

/* CHECKOUT PAGES

.colLeftCheckout {

position: relative;

left: 0px;

width: 160px;

padding-left: 9px;

padding-right: 10px;

float: left;

}

*/

/* END CHECK OUT PAGES */

.docBtnLeft {

background-image: url(../styleImages/backgrounds/docBtnLeft.gif);

width: 4px;

}

.docBtnRight {

background-image: url(../styleImages/backgrounds/docBtnRight.gif);

width: 4px;

}

.docBtnMid {

background-color: #DDDDDD;

padding: 0px 3px 0px 3px;

}

.pagination {

text-align: right;

padding-top: 5px;

padding-bottom: 5px;

}

#subCats {

background-color: #EBEDFE;

text-align: center;

border: 1px solid #C9CEFC;

margin: 0px;

float: left;

width: 99.5%;

}

.subCat {

text-align: center;

padding: 8px;

float: left;

width: 110px;

}

.regSep{

padding: 10px 0px 10px 0px;

margin: 10px 0px 10px 0px;

border-top: 1px solid #cccccc;

border-bottom: 1px solid #cccccc;

}

.topCatsTabLeft {

background-image: url(../styleImages/backgrounds/catTabLeft.gif);

background-repeat: no-repeat;

width: 7px;

}

.topCatsTabMid {

background-image: url(../styleImages/backgrounds/catTabMid.gif);

background-repeat: repeat-x;

}

.topCatsTabRight {

background-image: url(../styleImages/backgrounds/catTabRight.gif);

width: 7px;

background-position: left;

background-repeat: no-repeat;

}

[markscarts]

This is because your logo background image is so wide. When you reduce the resolution and the search box moves over accordingly, it will cover part of the image. The imagee is only a bacground, so elements can float over it.

The best way to rectify this is to change your search and logout. Either put it in a side box, or in a band beneath the header.

[Guest]

This is because your logo background image is so wide. When you reduce the resolution and the search box moves over accordingly, it will cover part of the image. The imagee is only a bacground, so elements can float over it.

The best way to rectify this is to change your search and logout. Either put it in a side box, or in a band beneath the header.

I got it, but why the box search cover the top if the box search is a bakground image too?

Both image are in the background folder.

I am a designer, but I dont understand very well PHP.

I need help.

I uploaded the image to background, because I followed the tutorial in CubeCart website.

Thanks

[markscarts]

This has nothing to do with php and everything to do with css and html.

There is nothing wrong with the way you added your image. The image is wide, and the search box division is going to float over it - that is normal CubeCart behavior. The background on topHeader is a pretty high-level layout division, and the division containing the search form (which as you said has a background image, too) is placed withing the topHeader division, and floats inside it on a lower level in css (cascading style sheets) and that is why it floats over it. If you do not understand css and html, here is what you should do:

1. Make your logo area much smaller and to the left of the topHeader background, like stock CubeCart does, or

2. Move search & session info into a side box, or

3. Move search & session info into a navigation bar

[Guest]

This has nothing to do with php and everything to do with css and html.

There is nothing wrong with the way you added your image. The image is wide, and the search box division is going to float over it - that is normal CubeCart behavior. The background on topHeader is a pretty high-level layout division, and the division containing the search form (which as you said has a background image, too) is placed withing the topHeader division, and floats inside it on a lower level in css (cascading style sheets) and that is why it floats over it. If you do not understand css and html, here is what you should do:

1. Make your logo area much smaller and to the left of the topHeader background, like stock CubeCart does, or

2. Move search & session info into a side box, or

3. Move search & session info into a navigation bar

Hi,

Thank you for your atention for my problem.

I would like to keep the top, because I liked this size.

If I Move search & session info into a side box, can I keep the top and search in the same size on the top the page?

How can I do that?

Thanks