0

我现在正在开发一个使用图像进行导航的网站；您单击图像的不同组件，它们将充当指向其他页面的链接。我查看了一个教程，该教程解释了如何使用 3 个单独的 div 来获得我想要的效果；一个包含主图片的 div，一个使用相对定位的重叠 div，以及一个使用绝对定位具有链接图像的 div。到目前为止，这种方法对我来说效果很好，并且给了我想要的效果，但是有一个小问题。在我的浏览器中，我总是在页面右侧获得额外的空间。这个问题对我来说有点难以用语言表达，所以我有一张关于堆叠 div 在 Dreamweaver 中的显示方式以及它在我的浏览器中出现的问题的图像。

在此处输入图像描述

在此处输入图像描述

您可以查看第一张图片中的两个车库门并查看问题所在。最右侧的车库门在 Web 浏览器中正确显示，完美地覆盖了左侧的车库门。但是，正如您在 Dreamweaver 中看到的那样，它超出了背景图像，并且额外的空白区域出现在浏览器中。这是下面的代码。

CSS：

<style type="text/css">
            .body
            {
                height:100%;
                margin:0px auto;
                padding:0px;
            }
            .backgroundcontainer
            {
                width:100%;
                height:600px;
                background-image:url(backgroundstripe.png);
                background-repeat:repeat-x;
            }
            .background 
            {
                margin:0px auto;
                padding:0px;
                width:720px;
                height:600px;       
            }
            .textarea
            {
                margin:0px auto;
                padding:0px;
                background-color:#339900;   
            }
        </style>

还有身体：

<body class="body">
        <center>
        <div class="backgroundcontainer">
            <div class="background" style="z-index:0">
                <!--House door link-->
                <div style="position:relative;top:449px;left:270px;z-index:1">
                    <div style="position:absolute">
                        <a href="[Link goes here]">
                            <img src="housedoor.png" height="151px" width="96px">
                        </a>
                    </div>
                </div>
                <!--Garage door link-->
                <div style="position:relative;top:451px;left:503px;z-index:1">
                    <div style="position:absolute">
                        <a href="[Link goes here]">
                            <img src="garagedoor.png" height="149px" width="130px">
                        </a>
                    </div>
                </div>
                <!--Window link-->
                <div style="position:relative;top:449px;left:375px;z-index:1">
                    <div style="position:absolute">
                        <a href="[Link goes here]">
                            <img src="window.png" height="97px" width="96px">
                        </a>
                    </div>
                </div>
                <img src="navigation.png" width="720px" height="600px">
            </div>
        </div>
        </center>
    </body>

任何帮助将不胜感激。

4

1 回答 1

0

您需要查看您的 CSS（内联或非内联）。你还必须清理你的代码......

  • <center>已弃用，但不会导致您的问题；但是，您已将其应用于许多 100% 宽度的元素……因此无论如何它都无法居中。（w3c 参考）
  • <img>默认情况下将测量值传递给px- 添加“px”可能会导致浏览器忽略它们。height = "149" width = "130"是你想要的，如果你要使用这种方法。（w3c 参考）
  • z-index只能用于position应用于它们的元素（即：position:absolute/fixed/static/relative）——首先z-index是什么都不做，从代码和你的意图来看，是不需要的。（w3c 参考）
  • 你得到重叠是因为你没有为任何东西分配宽度。默认情况下，块元素是 100% 宽（到它们的父级）。您的浏览器正在欺骗您的眼睛。这些元素并没有真正按照您真正想要的方式行事。（w3c 参考）

我可以为您提供的最佳解决方案：

  • 将所有 3 个position:absolutediv 放入一个position:relative容器中（拥有多个 div 会产生阶梯效果）。然后给他们每个高度/宽度，和z-index（如果仍然需要）。你应该开始看到事情很快就融合在一起了。

高温高压

于 2012-05-15T00:13:36.487 回答