Add a margin or position offset to the siteheading selector in your CSS. Something like this (for a margin):

.siteheading{margin-left: 30px;}

You could also wrap both of the SiteTitle and the SiteLogo in a div, set the div to display: table and the css for each control to display:table-cell.

In layout.master

<div id="wraplogotitle">
   <portal:SiteLogo id="SiteLogo" runat="server"></portal:SiteLogo>
   <portal:SiteTitle id="SiteTitle1"runat="server" />
</div>

In Style.css (or stylelayout.css)

#wraplogotitle{
   position:relative;
   display: table;
   width:100%;
   height: 60px;
}

.sitelogo {
   float: left;
   display: table-cell;
}

h1.siteheading {
   display: table-cell;
 }

This will allow your Site Title to move in relation to the size of the logo selected.

Hope This Helps,
Joe D.

Can you post a link to the site you are working on?

It looks like the "paste from word" feature of the forum removed your id="..." from your tags. What is the ID of your DIV which wraps your logo and title controls?

-Joe D.

FYI,

I setup a store on my personal blog site and created a "Buy Joe a Cup of Joe" product. I DO NOT expect Bryan or Joe A. to donate anything. I created the product for two reasons:

1. To see how quickly I could set up a store in mojoPortal (about 30 minutes).
2. I liked Joe A.'s suggestion to have a Buy Me Beer link in my signature.

Thanks guys! Go mojo!

-Joe D.

In the style.css, I see two siteheading selectors (.siteheading and h1.siteheading). I would merge those into one h1.siteheading selector. You want to use the h1.siteheading because it will allow you to change the padding and margin for that instance of the h1 tag.

I have included the necessary CSS below. Knowing which skin you are using is always a big help. :-)

#wrapheader {
position:relative;
height:84px;
background:url('headerbg-orange.gif') repeat-x 0 0;
display:table;
width:100%;
}

#wrapheader a {
 display: table-cell;
 vertical-align: middle;
}

.sitelogo {
float:left;
margin:0;
padding: 5px;
position:relative;
display:table-cell;
vertical-align:middle;
}

h1.siteheading {
margin:0;
padding:0;
font-weight:bolder;
font-size: 2.4em;
font-family: 'Trebuchet MS', Arial, Sans-serif;
letter-spacing:-2px;
width: 100%;
vertical-align:middle;
display: table-cell;
position:relative;
}

You may notice that the logo and title don't look vertically centered. This is because the background of the wrapheader has that orange line which visually divides the page from the header. If you add another div around your controls and set its height to probably about 74px, the logo and title will be visually vertically centered. I have set up my mojoPortal demo site with the styleshout-stylevantage skin and I have made the changes to the skin for the logo and title. If you view the site with FireFox and use the FireBug plugin to view the CSS, you will see how to make this work. http://mojodemo.i7media.net

HTH,
Joe D.

Here are the change I made. Notice the additional div surrounding the logo and the title. I also removed "#wrapheader a" from the css because it is replaced by "#wraplogotitle a".

<div id="wrapheader">
  <div id="wraplogotitle">
    <portal:SiteLogo runat="server" />
    <portal:SiteTitle runat="server" />
  </div>
</div>

#wrapheader {
position:relative;
height:84px;
background:url('headerbg-orange.gif') repeat-x 0 0;
display:table;
width:100%;
}

#wraplogotitle{
 display: table;
 height: 74px;
}

#wraplogotitle a {
 display: table-cell;
 vertical-align: middle;
}

.sitelogo {
float:left;
margin:0;
padding: 5px;
position:relative;
display:table-cell;
vertical-align:middle;
}

h1.siteheading {
margin:0;
padding:0;
font-weight:bolder;
font-size: 2.4em;
font-family: 'Trebuchet MS', Arial, Sans-serif;
letter-spacing:-2px;
width: 100%;
vertical-align:middle;
display: table-cell;
position:relative;
}

Thank you for the coffee, it is much appreciated.