1

我在为网站设置菜单时遇到问题。整个网站以margin: auto为中心。由于某种原因，菜单不集中，因为它是一个包含链接、按钮的 div。每个按钮链接都有一个背景图像。这是因为按钮的图像宽度为 315 像素，并且包含覆盖图像。例如，当用户按住此图像时，图像向左移动 105px 并显示鼠标悬停选项。（查看代码）

这是 .html ：（不要介意按钮的 id 名称，不想改变 :D 是的，我是瑞典人）

    <body>
    <!--Banner-->
    <img src="/header/picture.png" />
    <img src="/header/banner.png" />

    <!--Pre-loads the images for menu-->
    <img src="/header/start.png" style="display: none;" />
    <img src="/header/bestall.png" style="display: none;" />
    <img src="/header/priser.png" style="display: none;" />
    <img src="/header/omoss.png" style="display: none;" />
    <img src="/header/support.png" style="display: none;" />
    <img src="/header/filarkiv.png" style="display: none;" />

    <!--Menu-->
    <div id="menu">
    <a href="index.php" id="startknapp"></a>
    <a href="index.php" id="priserknapp"></a>
    <a href="index.php" id="bestallknapp"></a>
    <a href="index.php" id="omossknapp"></a>
    <a href="index.php" id="supportknapp"></a>
    <a href="index.php" id="filarkivknapp"></a>
    <img src="/header/box.png" id="box" />
    </div>

    <div id="content">
    <p>Hi!</p>
    <p>This is one paragraph</p>
    <p>And this is another.</p>
    </div>
    </body>

这就是我在 CSS 中为菜单设置按钮的方式：

    /*Startknappen*/
    #startknapp
    {
        position: absolute;
        left: 0px;
        width: 105px;
        height: 35px;
        text-decoration: none;
        background-image:url(start.png);
    }

    #startknapp:hover 
    {
        background-position: -105px 0; 
    }

    #startknapp:active 
    {
        text-decoration: none;
    }

    /*Priserknappen*/
    #priserknapp
    {
        position: absolute;
        left: 105px;
        width: 105px;
        height: 35px;
        text-decoration: none;
        background-image:url(priser.png);
    }

    #priserknapp:hover 
    {
        background-position: -105px 0;
    }

    #priserknapp:active 
    {
        text-decoration: none;
    }

    ... and so on for the other buttons...

这是一些.css：

    #html, body 
    {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 800px;
        height: 800px;
        margin: auto;
    }

    #menu
    {
        height: 35px;
        width: 800px;
    }

    #content
    {
        position: absolute;
        width: 800px;
        background-color: ;
    }

现在的问题是，如上所述，菜单不会集中。但是，当我做 position: absolute; 对于#menu，它确实集中。唯一的问题是内容与菜单重叠，我不希望这样。我希望内容在菜单底部之后开始 0px。以下是它的外观图片：

不会集中：http: //imageshack.us/photo/my-images/15/leftra.png

位置：绝对：http: //imageshack.us/photo/my-images/443/centerh.png

希望有人可以帮助我解决这个问题。提前致谢 ：）

4

2 回答 2

2

还没有关闭，我不知道您是否还没有关闭正文标签，或者只是将其从复制粘贴中删除。

此外，如果您将菜单项设置为绝对位置，则#menu 的样式应包括“位置：相对”，这样它们将相对于菜单容器而不是页面主体定位。

另外，我不确定这段代码会做什么：

#html, body 
    {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 800px;
        height: 800px;
        margin: auto;
    }

您试图将其以宽度居中定位，但随后说它应该延伸到每个角落，其中部分显示“顶部：0；右侧：0 等”

有这样的包装器会更好：

HTML：

<div id="wrapper">
    All content in here
</div>

CSS：

#wrapper { margin: 0 auto; width: 800px; }

编辑：也刚刚注意到，很高兴看到其他人使用 Ubuntu；）

Edit2：如果您使用浮动而不是“位置：绝对”定位导航项目会更好，有关更多信息，请参见此处

有关您可能还需要的定位的更多信息，请参见此处

于 2012-07-12T15:23:59.517 回答
1

正如 Sean Dunwoody 所说，您需要添加 position: relative to div.menu。使用 position: absolute 时，项目定位到要赋予位置属性的最后一个项目。由于除了菜单项之外您没有定位任何 div，它们正在通过 div 的层次结构向上移动并相对于 body 标签定位自己。通过添加 position: relative to div.menu，你告诉 div.menu 它需要在哪里（即，相对于其他所有内容），然后按钮知道它们需要在哪里（绝对定位于它们的父 div，div 。菜单）

于 2012-07-12T17:01:56.830 回答