Help with a logo

[Crip]

you could just de-crease the percentage "%"

Code Select Expand


#logo a {
    background: url("../images/img/logo.png") no-repeat scroll 0 0 transparent !important;
    cursor: pointer;
    display: block;
    height: 103px !important;
    left: 30%;      <<<<=<============================>>
    position: absolute;
    top: 30px;
    width: 970px !important;
}


Code Select Expand


#logo a {
    background: url("../images/img/logo.png") no-repeat scroll 0 0 transparent !important;
    cursor: pointer;
    display: block;
    height: 103px !important;
    left: 25%;      <<<<=<============================>>
    position: absolute;
    top: 30px;
    width: 970px !important;
}


Code Select Expand


#logo a {
    background: url("../images/img/logo.png") no-repeat scroll 0 0 transparent !important;
    cursor: pointer;
    display: block;
    height: 103px !important;
    left: 20%;      <<<<=<============================>>
    position: absolute;
    top: 30px;
    width: 970px !important;
}


[Crip]

My  Res. 1920 x 1080 it is centered. ?

[willemjan]

Try resising the window . You'll see that it moves.

Oh and btw your solution won't work. Example:

The total width is 1000px and the logo is 400px, then 30% would be correct:

|30%(=300px)|400px(=logo img)|rest(=300px)|

But if the browserwindow is larger, say 1200px:

|30%(=360px)|400px(=logo img)|rest(=440px)|

You see that it isnt centered any more

[filipe]

Hello this is what I have with this..http://smf.radaresdeportugal.com/index.php?action=forum
/* BANNER / LOGOS */

Code Select Expand


#logo a {
    background: url("../images/img/logo.png") no-repeat scroll 0 0 transparent !important;
    cursor: pointer;
    display: block;
    height: 103px !important;
    left: 12%;     
    position: absolute;
    top: 30px;
    width: 970px !important;
}


[Crip]

left: 40%; usually puts it Half..>?

[willemjan]

Ok, I just tested this at my own forum. This works!

But!! Make shure the width and height in this piece of coding are the same as the image itself!!

Code Select Expand


#logo a {
display: block;
width: 970px!important;
height: 103px!important;
margin: 0 auto;
cursor: pointer;
background: url(../images/img/logo.png) no-repeat!important;
}


[willemjan]

I have been scouting your site, and your logo is 670x100 px so the coding would be:

Code Select Expand


#logo a {
display: block;
width: 670px!important;
height: 100px!important;
margin: 0 auto;
cursor: pointer;
background: url(../images/img/logo.png) no-repeat!important;
}


Now to get the top margin right (you have 30px) and to add all your other coding, then this would be the final coding of the logo:

Code Select Expand


#logo a {
display: block;
width: 670px!important;
height: 100px!important;
margin: 30px auto 0px;
cursor: pointer;
background: url(../images/img/logo.png) no-repeat scroll 0 0 transparent !important;
}


[willemjan]

I noticed that you have been playing with my code on your site. I've seen it working on your site. Why did you change it back?

[Crip]

You can ?? , remove all or most CSS code for the logo/banner and use::: style="align: center;"> in the index.Temp ..

[willemjan]

If you want, I can do it for you. But that would require me to have admin acces to your site.