Center the Header Logo on V1.3.7

Hi,
I'm trying to centralise the header logo in Zencart v1.3.7, I've tried following instructions from previous posts but nothing seems to work.
At the moment my line in my template stylesheet reads as follows
#logo {float: left; position: absolute; top: 15px; left: 15px;}
I've tried changing it to #logo {text-align: center; margin: 0 auto;} but it still aligns to the left.
Any help would be great,
Thanks

Have you tried:

#logo {margin-left: auto; margin-right: auto; }

It worked some of the areas I was editing.

Hi GrandmaJ,
Thanks for your reply, I've just tried it and I'm afraid it's still stuck on the left hand side! I'm wondering now if there is some code somewhere else that is instructing it to be positioned to the left. :bored:
Cheers,
Mike

Hmm.. . can you post the url?

Hi,
My url is www.lathespares.co.uk I've even tried to alter the code to try and make the logo appear on the right instead of the left and it still appears on the left!
Cheers,
Mike

Try making the following changes to your stylesheet.css

#headerBackground {text-align:center;width: 100%; height: 83px; background: url(../images/bg_header.jpg) repeat-x #88a0c2;}

#logo {margin:0;}

make the changes highlighted in red

Hi Clyde,

That's brilliant, it worked first time! :yes: I've also added to the {margin:0;} this bit of extra code to centralise it in the up and down axis {margin: 1% 0;} I don't know if this is the correct way or not to centralise it up and down but if it's not please let me know.

Thanks again,

Mike

Glad to help.

Hello

can anyone help me please.......I am trying to put my banner in but not sure where it goes the path that is and I got this error when doing it.......

Warning: Cannot modify header information - headers already sent by (output started at /home/doggil/public_html/cart/includes/languages/english/classic/header.php:41) in /home/doggil/public_html/cart/includes/init_includes/init_templates.php on line 78

when this happened it made everything really really big......does anyone know how to fix this....

God bless
ClassAct :oops:

I had that same problem, and finally realized that I had accidentally created a space after the final php on that page. Delete those spaces, and refresh your browser. Worked for me.

clydejones:

Try making the following changes to your stylesheet.css

#headerBackground {text-align:center;width: 100%; height: 83px; background: url(../images/bg_header.jpg) repeat-x #88a0c2;}

#logo {margin:0;}

make the changes highlighted in red

help...I can't find this piece of code. Is this the same thing as the logo-wrapper? Please oh please can I have a detailed map on how to get there...(newbie here :lookaroun)...

I have been trying to get this darn logo centered to the middle of the page and everything I have come across in the forums (and elsewhere when I google) does not seem to make any difference to the darn thing...It has planted itself firmly to the left.

It's personal now...lol

#headerBackground is a custom id that existed only on that template. The stock template has #headerWrapper, #logoWrapper and #logo, among others; we need to see your site live to know for sure what your template has to style.

Gotcha...

Not live yet at this point so unless I stumble upon it in the meantime (which is how I end up finding most answers anyway) I will put it on the back burner and keep on plugging along...

Thanks for the reply!:smile:

You need to install Firefox and its Web Developer and Firebug extensions. They are some of the main tools we use to answer such questions, and you can use them for yourself.

Thanks!

Hello,
I tried to center my main top image (French_and_Provence_tablecloths_Provence_Decoration.jpg) after looking for on internet and reading this post but can't find
this part:
#logo {
text-align:center;
}

Where can I find this? Should I insert it somewhere? But how to do it right?

Thanks for any help.
p r o v e n c e d e c o r a t i o n . c o m

If there is not already a #logo { rule in your stylesheet, you can add one and put whatever properties you want in it.
It would logically go just after the #logoWrapper { rule if there is one of those.

Gjh42 you saved me one more time!
THX.

Still no way to have a logo that could suit to 100% of the screens instead of being with a fixed width?

If you have the logo as an <img> in #logo, you can style it to stretch to 100% of page width... though that will usually look rather strange. The best solution if you want a logo/header to fill a fluid width page is to use the "sliding doors" method - google for it. You can use #headerWrapper, #logoWrapper and #logo as containers for this.

Ok I finally got my logo to move to the center (well almost)

Here is what I did:

/includes/templates/simply_kerrin/css/ directory.

Look for this code:#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

remove #logo: so that it now reads:
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

Then add this code after the above code:

#logo {
text-align: center;
}

#logoWrapper {
margin: 0 auto;
}

And it moves....! Yea
BUT...it is not completely centered in the middle. It is a little off to the left and could be better.

Is there something else I could add to move it just a little more to the right?