Move text next to logo; get rid of a hard rule.

Question

Here's the site: www.red-tuxedo.com

I want the "Red Tuxedo" text to sit next to the logo, not below, and I want to get rid of that hard rule that runs through the logo. My CSS / HTML skills aren't up to it. I completely destroy the column layout when I change the text and I can't find the hard rule in the code. Tried adjusting the gif (cut off the bottom in Photoshop) and that didn't help.

I did write to the person who created the template; haven't heard back after several days. Would like to get this fixed before I start adding more pages.

thx

Answer 1

Try changing the div (id=logo) so that it includes the logo image and the text and add align='absmiddle' to the image. I'd suggest CSS but it looks like it has fixed attributes on it anyway. The "rule" looks like it is coming from the background image for the body element. You'd need to update the file bg.gif to modify it, I think.

<div id="logo">
    <img id="logo_red_tuxedo" src="logo_red_tuxedo.gif"
         alt="Red Tuxedo Logo" align="absmiddle" height="60" width="60">
    <span class="red">Red</span>Tuxedo
</div>

Answer 2

One way is to move the logo within the #logo div:

<div id="header-logo">    
    <div id="logo"><img height="60" width="60" alt="Red Tuxedo Logo" src="logo_red_tuxedo.gif" id="logo_red_tuxedo"/><span class="red">Red</span>Tuxedo</div>    
    <form action="#" class="search" method="post">
     <p><input type="text" class="textbox" name="search_query"/>
     <input type="submit" value="Search" class="searchbutton" name="search"/></p>
    </form> 
</div>

Answer 3

To move the text, I'd put the image inside the logo div, the way dmondark suggested. As for the hard rule, it's part of the background image for the body, bg.gif. Here's an edited version I made that doesn't have it.