将文字移动到徽标旁边；摆脱硬性规定答案

【问题标题】：Move text next to logo; get rid of a hard rule将文字移动到徽标旁边；摆脱硬性规定
【发布时间】：2010-10-17 04:43:45
【问题描述】：

这里是网站：www.red-tuxedo.com

我希望“Red Tuxedo”文字位于徽标旁边，而不是下方，并且我想摆脱贯穿徽标的硬性规则。我的 CSS / HTML 技能不符合它。我在更改文本时完全破坏了列布局，并且在代码中找不到硬性规则。尝试调整 gif（在 Photoshop 中剪掉底部），但没有帮助。

我确实写信给创建模板的人；几天后没有回音。希望在我开始添加更多页面之前解决此问题。

谢谢

【问题讨论】：

标签： css

【解决方案1】：

尝试更改 div (id=logo)，使其包含徽标图像和文本，并将 align='absmiddle' 添加到图像中。我建议使用 CSS，但无论如何它看起来都有固定的属性。 “规则”看起来像是来自 body 元素的背景图像。你需要更新文件bg.gif 来修改它，我想。

<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>

【讨论】：

【解决方案2】：

一种方法是在#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>

【讨论】：

【解决方案3】：

要移动文本，我会按照 dmondark 建议的方式将图像放在 logo div 中。至于硬性规则，它是身体背景图像的一部分，bg.gif。 Here's我制作的一个编辑版本，没有它。

【讨论】：