X-Cart forums - centering company

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - centering company_logo.gif (https://forum.x-cart.com/showthread.php?t=58485)

centering company_logo.gif

Hi

on this page
http://ntphealthproducts.com.au/cart/

I have tried for hours to get the logo image to centre with the light green bars above and below

the image is 782px wide
the css file "/fashion_mosaic_green/css/altskin.css"
has the code
{
display: block;
width: 782px;
height: 113px;
background: transparent url(../images/fashion_mosaic/company_logo.gif) no-repeat center top;
}

but I can't seem to get it to centre

can anyone help me !?!?!

Re: centering company_logo.gif

Looking over your HTML, class .logo is responsible for behavior of that container.

<div class="logo">
<a href="http://ntphealthproducts.com.au/cart/home.php">
<img src="/cart/skin/common_files/images/xlogo.gif" alt=""/>

Try in Firebug to delete class="logo" and X-Cart logo will be visible. But thanks to css "display: none" for (.logo img) it won't appear in Frontend.

So, class .logo is creating you trouble because you modified it wrong.

Re: centering company_logo.gif

Here is class .logo from the original skin

Code:

#header .line1 .logo {

  position: absolute;

  left: 20px;

  top: 31px;

  height: 50px;

  width: 228px;

  margin: 0;

  padding: 0;

}

Code:

#header .line1 .logo a:link,

#header .line1 .logo a:visited,

#header .line1 .logo a:hover,

#header .line1 .logo a:active

{

  display: block;

  width: 228px;

  height: 50px;

  background: transparent url(../images/fashion_mosaic/company_logo.gif) no-repeat left top;

}

Code:

#header .line1 .logo img {

  display: none;

}

(this one hides the xcart.gif)

Looking over your css, you did a lot of changes not ok. Try undo all your changes, you can replace with the original CSS file.

1) Upload the image file you modified in (../images/fashion_mosaic/company_logo.gif).

2) Change left: 20px; top: 31px; height: 50px; width: 228px; to the fist class in this post.

3) Change height and width to the class with anchors, the second class in this post.

Before editing the css file, steps 2 - 3 are OK to be done in Firebug (Firefox) or Dragonfly (Opera).

Re: centering company_logo.gif

A tip for you in case you don't use Firebug or DragonFly.

1) Look always inside HTML source code to find what class is responsible for that tag. It can be an inline css, a class defined in <head> or in an external css file.

2) If is not inline or in <head>, just look in the <head></head> to see what css files are loaded.

3) Then open the css file(s) with a text editor like Notepad, Wordpad, and use Find tool to find the class name in all places.

Re: centering company_logo.gif

#header .line1 .logo {
position: absolute;
left: 20px;
top: 31px;
height: 50px;
width: 228px;
margin: 0;
padding: 0;

I changed
left: 20px;
ot
0px

and it worked ;-)

maybe not the correct way .. but it worked

Re: centering company_logo.gif

You got a couple of pixes at the right.