Page 1 of 2 12 LastLast
Results 1 to 10 of 17
  1. #1
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    83
    Plugin Contributions
    0

    red flag Can't center my header_bg.jpg??????

    Hi, I am new to Zen Cart, and have little to no expericence with php.

    What I want to do is center the header image (header_bg.jpg), and according to what I read in
    Top 10 Questions asked by new Zen Cart™ Users


    I should make that change in my stylesheet.css file. But I couldn't find this:
    #logoWrapper {
    width:760px;
    height:110px;
    background-image:url(../images/your_header_image.???);
    background-repeat:no-repeat;

    So I added it at the bottom, which got my image to diplay once
    I changed the css file name to match my image file name, only it
    is left aligned and I want it to be centered. I tried putting html code
    align="center" in there but that didn't work. Any suggestions?

    One other question, if my site doesn't fill the width of my screen
    can I use an auto width command or 100% for width???

    Thanks,
    John

  2. #2
    Join Date
    Oct 2006
    Posts
    43
    Plugin Contributions
    0

    Default Re: Can't center my header_bg.jpg??????

    #logoWrapper {
    width:760px;
    height:110px;
    background-image:url(../images/your_header_image.???);
    background-repeat:no-repeat;
    background-position: center;
    }
    Got it?

    Also yes you can use 100% to define the width of ur site. it control by ID
    #mainWrapper

  3. #3
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,039
    Plugin Contributions
    31

    Default Re: Can't center my header_bg.jpg??????

    Do you have a URL for your site?

  4. #4
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    83
    Plugin Contributions
    0

    Default Re: Can't center my header_bg.jpg??????

    my url is www.discountprintingservice.com/store

    I tried this from the reply by JohnsonY

    #logoWrapper {
    text-align:center;
    width:760px;
    height:124px;
    background-image:url(../images/header_bg.jpg);
    background-repeat:no-repeat;
    }

    and it didn't work. I really like zen cart, but it seem very complicated to make your own template, especially trouble shooting something that isn't right.

  5. #5
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,039
    Plugin Contributions
    31

    Default Re: Can't center my header_bg.jpg??????

    #logoWrapper {
    width:760px;
    height:124px;
    background-image:url(../images/header_bg.jpg);
    background-repeat:no-repeat;
    background-position: center; delete this declarration
    text-align: center; add this declaration
    }

  6. #6
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,039
    Plugin Contributions
    31

    Default Re: Can't center my header_bg.jpg??????

    find #logo in your stylesheet and make it
    float: left

  7. #7
    Join Date
    Oct 2006
    Posts
    43
    Plugin Contributions
    0

    Default Re: Can't center my header_bg.jpg??????

    To GoldBuckle please read and type carefully
    the element is background-position not background-align or text-align

    that is what I see on your site:
    #logoWrapper {
    width:1100px;
    height:124px;
    background-image:url(../images/header_bg.jpg);
    background-align: center;
    background-repeat:no-repeat;
    }

    it should work cause I already tested before I post out

    To clydejones
    isn't it text-align: center only work for the content that define the class or id. Not include in the element? I mean text-align: will only control the text and image that in the table that define as "#logowrapper" but not work for the background image position in #logowrapper. If I make a mistake please correct it .

  8. #8
    Join Date
    Oct 2006
    Posts
    43
    Plugin Contributions
    0

    Default Re: Can't center my header_bg.jpg??????

    Also do you mind I make some suggestion about your header image?please note that even your site set to 100% width, there still have a problem with your header. As your header the width is 1100px but if ppl visit your site with 1024x768 or 800x600 resoultion then your header image will be still remind 1100px so your site will look like not 100%width. For this problem I suggest you set the site width as 1100px as well.

  9. #9
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,039
    Plugin Contributions
    31

    Default Re: Can't center my header_bg.jpg??????

    To clydejones
    isn't it text-align: center only work for the content that define the class or id. Not include in the element? I mean text-align: will only control the text and image that in the table that define as "#logowrapper" but not work for the background image position in #logowrapper. If I make a mistake please correct it .
    That is correct that is why in a PM to GoldBuckle I indicated a change to background-position.

  10. #10
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    83
    Plugin Contributions
    0

    Default Re: Can't center my header_bg.jpg??????

    Okay I tried your suggestion, here is the code I used:

    logoWrapper {
    width: 1100px;
    height: 124px;
    background-image: url(../images/header_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    }

    It is still set to the left. I am dumbfounded as to why. To make the header look better, last night I merged my logo & the background image together with a photo editor, but I would still like to figure out why it won't center. Right now, viewing the site with my 17" monitor, there is about 3/4" extra space on the right side. It is now 1100px wide, but even when it was on 760px wide I tried the backgroun-position: center line and it was still to the left.

    As far as the advise on setting the site to 1100px instead of 100%, won't that make the site a set width no matter what monitor size is used to view? I want the site to take up 100% of the monitors width no matter what monitor size it is viewed with. That is why I use 100% for site width. Please correct me if I am misunderstanding this issue.

    Thanks,
    John

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. Stumped trying to center the logo
    By Chrome Orange in forum Templates, Stylesheets, Page Layout
    Replies: 22
    Last Post: 19 May 2009, 04:08 PM
  2. Center Boxes...
    By Alex Clarke in forum General Questions
    Replies: 3
    Last Post: 17 Oct 2006, 10:29 AM
  3. Resize and center a Purpleshade template
    By mikajlo in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 15 Oct 2006, 08:07 PM
  4. Why won't my header logo center?
    By wowzah in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 26 Jul 2006, 07:47 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •