Slight CSS Mod - Move to the right from left

[spadez]

Hey,

Ive just installed wordpress and a custom style but i am stuck trying to work out the best way to make an alteration. Im trying to put the logo on the right of the page and move the Spadez text where the logo was originally, as shown below:

Top = Before |||| Bottom = After
http://img389.imageshack.us/img389/1426/helpcz4.jpg

HTML:
<div id="header">
<div class="logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></div>
</div>

CSS:
#header .logo
{
background: url(images/logo.jpg) no-repeat;
vertical-align: middle;
padding-left: 70px;
padding-top: 20px;
font-size: 40px;
height: 90px;
}

Link: www.spadez.co.uk

Thank you for any help you can give!

James

[jessnoonyes]

Well, give this a shot.

#header .logo
{
background: url(images/logo.jpg) no-repeat;
background-position: center right;
vertical-align: middle;
padding-left: 70px;
padding-top: 20px;
font-size: 40px;
height: 90px;
}

[abduraooft]

Not sure, but try
#header .logo {
background:transparent url(images/logo.jpg) no-repeat right center;
font-size:40px;
height:90px;
/*padding-left:70px;*/
padding-top:20px;
vertical-align:middle;
}

Anyway a logo should be displayed by an <img> tag rather than the background style.

[spadez]

Thank you both for the help. I tried both ways but they both gave me the same problem. The text still had the indent to the left of it where the logo was, it didnt move along and take up the space. Can you tell me how to do it using img tags then? I didnt code this theme so i dont know how it should be done :S

[abduraooft]

I tried both ways but they both gave me the same problem. have you removed that 70px padding?

[abduraooft]

I'd do something like
#header {
height:95px;
line-height:95px;
padding-left:10px;
}

<h1 id="header">
<a style="text-decoration: none;" href="http://www.spadez.co.uk"> <img src="/images/logo.jpg" style="float: right;" alt="Logo"/>Spadez</a>
</h1>
(of course, move the styles to CSS file and change the src value, if required )