1

希望在多种分辨率下正确定位 DIV 获得一些帮助。

如果您访问我的测试站点http://test.vtisvc.com，我基本上需要的是红色“菜单”链接正确地适合白条。它们处于适当的高度（只需设置一个边距顶部：131px；DIV 中的属性）但是，我不知道如何制作它，以便它们在不同分辨率的显示器上正确水平定位。现在，只有一个 margin-left: 设置了一个值，使它在我的显示器上显示正确 - 任何人都可以帮助我吗？

我收集到我需要做的是以某种方式将#banner-text div 嵌套到它的绝对位置，或者在另一个相对的 div 内设置边距，但我无法完全弄清楚如何做到这一点......我可能即使使用了太多的DIV，我只是不确定......我只是通过猜测拼凑了这么多。真的很感谢有人向我展示了光！

这是我的CSS...

#banner-wrap
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}

#banner-container
{
  height: 204px;
  background: url('http://test.vtisvc.com/wp-content/uploads/2013/08/header_hoodbar8.png');
  background-repeat: no-repeat;
  background-position: center; 
}

#banner-logo
{
  width: 940px;
  margin-left: auto;
  margin-right: auto;
  z-index: 60;
}

#banner-icon
{
  width: 940px;
  margin: 0 auto;
  position: relative;
  z-index: 70;
}

#banner-text
{
  position: fixed;
  width: 940px;
  top: 0;
  left: 0;
  margin-top: 131px;
  margin-left: 330px;
  z-index: 80;
}

这是我在 header.php 中的 HTML

<body>
<div id="banner-wrap">
<div id="banner-container">
<div id="banner-logo">
<div id="banner-icon">
<center><img src="http://test.vtisvc.com/wp-content/uploads/2013/08/header_logo3.png" style="float:center"></center></div>
</div></div></div>
<div id="banner-text">
<a href="http://test.vtisvc.com"><font face="georgia" color=#8a0304">HOME</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">LISTINGS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">AGENTS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">SEARCH MLS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">RENTALS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">HISTORY</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">CONTACT</font></a></div>
4

1 回答 1

0

将 id 为“banner-text”的 div 移动到横幅图标 div 中，并更改 style.css 中的 css，如下所示：

HTML

<div id="banner-icon">
    <center>
        <img src="http://test.vtisvc.com/wp-content/uploads/2013/08/header_logo3.png" style="float:center">
        <div id="banner-text">
<a href="http://test.vtisvc.com"><font face="georgia" color="#8a0304&quot;">HOME</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">LISTINGS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">AGENTS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">SEARCH MLS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">RENTALS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">HISTORY</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://test.southernventures.com/contact"><font face="georgia" color="#8a0304">CONTACT</font></a>

        </div>
    </center>
</div>

CSS

#banner-text {
    position: relative;
    width: 940px;
    top: 0;
    left: 0;
    margin-top: -44px;
    margin-left: -346px;
    z-index: 80;
}
于 2013-08-29T02:25:30.113 回答