This is one way of tackling your problem. If you don’t know what is going on look in the comments I’ve added to the code.
Ad this HTML to your header.php
<div id="header"><!-- This <div> should already be in your HTML code. If not ad it -->
<div class="logo"><!-- You ad your logo in this div as a background image positioned to your likings -->
<h1 class="offscreen"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1> <!-- You don't want to get rid of your <h1>. Search engines consider the h1 tag of high relevance. The class "off-screen" position your <h1> outside the screen area -->
<div id="bubble"><p><?php bloginfo('description'); ?></p></div> <!-- erase this line if you want to turn the bubble off -->
</div>
</div>
</div>
And these lines of code to your style.css
.logo{
background: url(images/logosymbol.gif) no-repeat top left;
}
.offscreen {
font-size: 0;
text-indent: -999em;
}
I would strongly recommend you to look in to this WordPress Codex for further reading regarding your issue.
Hope this help
