shop banner is being repeated

Hi,

I have just configured my shop, but the top banner is being repeated. Could you advice how to fix this issue. I want that the banner should be centered, just like the rest of the shop has expanded to the screen size.

See the shop at http://www.trendyessentials.com/ and advice. Thanks.

Thanks,
Vinai

Try changing to this - background-repeat: repeat-x; in your stylesheet where you have the logo image. Don't know if it will work, but it's worth a try. I'm still learning this css stuff myself.

repeat-x does just that (it repeats the image horizontialy.

TABLE.header {

  background-image: url(../images/header_bg.jpg);

  Change this background-repeat: repeat-x; to this background-repeat: no-repeat;

  background-color: #ffffff;

  border-right: 1px solid #9a9a9a;

  border-left: 1px solid #9a9a9a;

  border-bottom: 1px solid #9a9a9a;

}

PS. also add this to the code above: text-align: center;

See if that fixes the problem.

if you replaced the zen header_bg.jpg with your image 'banner' you may not be able to center it, try replacing the logo.gif instead - it took me a long time to figure that one out...:D

Thanks to all of you. I managed to fix the issue with your tips. The no-repeat did the trick.

However I noticed that the source code of the home page now displays the names of two CSS files next to each other. See at http://www.trendyessentials.com/

Now I don't know if I did something or was it the default, but can't figure out how I got two different stylesheets to appear in the home page. Any help is appreciated.

Thanks,
Vinai

Check your includes -> templates -> classic -> css folder.

I suspect you have both of these stylesheets included.

delete the one you don't use from your server.

if you have access to cPanel on your server you can delete it there or delete through your FTP program.

Did you have someone create a custom template for you or did you add a mod to the script? When I use FireFox with the Developer tool and take out all the info in the fullscreen css the width of the content goes back to what is in the regular stylesheet. With the fullscreen css still there you get the shop taking up the fullscreen. lol Hope that makes sense.

I didn't investigate what else the full screen stylesheet might be configuring.

From my studying css in the last week or so I found out that you can have multiple stylesheets. I'm using the newest version of Zen Cart and it has three styleshheets - one for the regular formatting, one for buttons (haven't investigated this yet) and also one to control how the page would print out on a printer.

clydejones:

repeat-x does just that (it repeats the image horizontialy.

TABLE.header {

background-image: url(../images/header_bg.jpg);

Change this background-repeat: repeat-x; to this background-repeat: no-repeat;

background-color: #ffffff;

border-right: 1px solid #9a9a9a;

border-left: 1px solid #9a9a9a;

border-bottom: 1px solid #9a9a9a;

}

> 
> PS. also add this to the code above: text-align: center;
> 
> See if that fixes the problem.

I tried this fix on a fresh install, and it removed the duplicate image, but the center column is still stretched way too wide for the screen.  It looks fine with Mac firefox, but not with safari.  Any ideas?  <http://www.takspeed.com/zstore/index.php?main_page=>

takspeed:

I tried this fix on a fresh install, and it removed the duplicate image, but the center column is still stretched way too wide for the screen. It looks fine with Mac firefox, but not with safari. Any ideas? http://www.takspeed.com/zstore/index.php?main_page=

I checked the URL you provided and it looks like a fresh install of zencart with the demo setup. Looks fine in Firefox and IE on a PC

clydejones:

I checked the URL you provided and it looks like a fresh install of zencart with the demo setup. Looks fine in Firefox and IE on a PC

hmmm... it looks fine with IE and firefox on my mac, but both Safari and Opera have the extra wide center column that makes the page unreadable. any clues what to look for in the .css files?

takspeed:

hmmm... it looks fine with IE and firefox on my mac, but both Safari and Opera have the extra wide center column that makes the page unreadable. any clues what to look for in the .css files?

got a fix now! switched from the classic template to the default and everything is fine now. looking forward to swtiching over from my current oscommerce store :thumbsup:

OK. re-checked and I see what you mean.

A couple of questions:
Do you want your site setup like this forum (that is background showing on both sides of the page or do you want to leave it like it is now?)

NOTE: The stylesheet does not contain all the IDs and Classes that show up on the templates. You may have to do a view source to find the IDs and Classes and then add them to the stylesheet.

I'd make both your right and left columns a bit wider (You can do this in admin -> configuration -> layout settings -> column width.

then add this to your style sheet

#indexDefault {margin: 0 10px;}

Try these first and see how it looks.