广告横幅的绝对定位,无标题图像重叠

发布于 2024-10-11 15:38:22 字数 687 浏览 8 评论 0原文

我正在开发一个使用较旧的 vBulletin 消息论坛的网站。当前的设置在大多数情况下工作正常,但是,当我在移动设备中打开论坛时,我看到广告横幅 (728x90) 与徽标图像重叠,看起来很糟糕。当查看横幅 CSS 定位时,它会变得更加混乱,因为顶部和右侧部分适合布局其余部分的需求。

我的基本问题是如何重做此操作,以便横幅永远不会与徽标图像重叠,同时仍保留必要的偏移量以适应布局的其余部分?

#container{
    width: 100%;
    height: 100px;
}
#logo{
    width:230px;
    height: 63px;
}
#advertisement{
    height: 90px;
    width: 728px;
    position: absolute;
    right:10px;
    top: 7.5px;
}



<div id="container"> 
   <div id="logo"><a href="index.php"><img src="logo.jpg" border="0" alt="Whatever" /></a></div>
   <div id="advertisement"></div> 
</div> 

** 不是我的 CSS 或 HTML

I'm working on a website that uses an older vBulletin message forum. The current setup works fine for the most part, however, when I open the forum in my mobile device, I see the ad banner (728x90) overlapping the logo image and it just looks bad. It gets even messier when looking at the banner css positioning because the top and right portions fit the needs of the rest of the layout.

My basic question is how can I redo this so that the banner doesn't EVER overlap the logo image while still holding the necessary offsets to fit the rest of the layout?

#container{
    width: 100%;
    height: 100px;
}
#logo{
    width:230px;
    height: 63px;
}
#advertisement{
    height: 90px;
    width: 728px;
    position: absolute;
    right:10px;
    top: 7.5px;
}



<div id="container"> 
   <div id="logo"><a href="index.php"><img src="logo.jpg" border="0" alt="Whatever" /></a></div>
   <div id="advertisement"></div> 
</div> 

** Not my CSS or HTML

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

狼亦尘 2024-10-18 15:38:22

我会给#container 属性“min-width: 958”,并保持宽度为100%。
这样,页面的宽度始终足以容纳徽标和广告。

I would give #container the property "min-width: 958", and keep the width of 100%.
That way, the page will always be wide enough for both the logo and the advertisement.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文