如何使网站的标题部分与徽标一样低？

Question

我只是更改了一些样式并破坏了我的网站:) 并且不知道如何将其重新设置。

我把一个新图像作为标志。之前是大字体文本。现在 div 结束于其他文本的底部，而不是 logo 的底部。

在这里查看它是如何损坏的：http://www.problemio.com - 见最上面 - 我需要让 div 扩展到左侧图像的底部。

这是我的 CSS：

.banner 
{
    width:60em;
    margin: 0 auto;
    position: relative;
    padding: 0.3em 0;
    z-index: 1;
}

.banner .site_title 
{
    background: url("http://www.problemio.com/img/ui/problemio.png") no-repeat scroll 0 0 transparent;
    padding:5px 60px;
    font-weight: bold;
    color: #ffce2e;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    font-size:2.5em;
    text-align: left
}

这是我使用的 HTML：

<div class="banner">
<!--  title and login/sign up go here -->
    <a href="http://www.problemio.com">
        <div class="site_title">

        </div>
    </a>

我正在尝试使图像出现在网站标题 div 中。我想我应该使用 img 标签，对吧？我应该如何增加我的风格呢？

谢谢， 亚历克斯

Answer 1

您没有在 banner 或 site_title div 上设置高度，因此它们只会与其中的元素一样高，在 banner div 的情况下似乎是文本链接。

在您的 CSS 代码中，您在 .banner 和 .site_title 类中设置了 background-url。这是多余的，如果您只给其中一个 div 留出余量，可能会导致事情看起来很奇怪。为什么不去掉 site_title div 并把它变成一个图像？这也应该可以解决您的身高问题。