如何使网站的页眉部分与徽标一样低？
我刚刚改变了一些样式并破坏了我的网站:)并且不知道如何将其恢复。
我放置了一个新图像作为徽标。之前是大字体文本。现在 div 结束于其他文本的底部，而不是徽标的底部。
看看它是如何被破坏的： 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 标签，对吗？我应该如何增强我的风格呢？
谢谢， 亚历克斯
I just changed some styling and broke my site :) and have not much clue how to set it back.
I put a new image as the logo. Before it was large-font text. And now the div ends at the bottom of other text and not at the bottom of the logo.
See how it is broken here: http://www.problemio.com - see on very top - i need to make the div extend to the bottom of the image on the left.
Here is my 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
}
and here is the HTML I use:
<div class="banner">
<!-- title and login/sign up go here -->
<a href="http://www.problemio.com">
<div class="site_title">
</div>
</a>
And I am trying to make the image appear in the site title div. I think I should use the img tag, right? How should I augment my styles though?
Thanks,
Alex
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您没有在
banner或site_titlediv 上设置高度，因此它们只会与其中的元素一样高，在 < 的情况下code>banner div 似乎是文本链接。在 CSS 代码中，您在
.banner和.site_title类中设置背景 URL。这是多余的，如果您只给其中一个 div 留出边距，可能会导致事情看起来很奇怪。为什么不去掉site_titlediv 并使其成为图像呢？这也应该可以解决你的身高问题。You're not setting a height on your
bannerorsite_titledivs, so they are only going to be as high as the elements inside them, which in the case of thebannerdiv appears to be text links.In your CSS code, you're setting the background-url inside both the
.bannerand.site_titleclasses. This is redundant and can lead to things looking weird if you give only one of the divs a margin. Why not get rid of thesite_titlediv and just make it an image? This should fix your height issues as well.