0

我正在尝试制作一个 3 列网站，但我似乎无法正确显示正确的导航。它始终显示在其他 div 下方。有人可以告诉我为什么会发生这种情况以及如何解决吗？

这是CSS：

body {
    background-image:url('images/background.png');
    background: no-repeat center center fix;
    background-size: cover;
    background-attachment: fixed;
}

p {
    margin: 0px;
    color: #231f20;
    font-size: 16px;
    font-family: "Garamond Premier Pro", serif;
    text-align: left;
}

h1 {
    margin: 0px;
    color: #231f20;
    display: inline-block;
    text-align: center;
    font-size: 24px;
    font-family: "Myriad Pro", sans serif;
}

#container {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    height: 750px;
}

#header {
    width: 960px;
    height: 100px;
}

#marquee {
    width: 960px;
    height: 30px;
    font-size: 24px;
    background-color: #bc34ba;
    font-family: "Garamond Premier Pro", serif;
}

#topnav {
    border-bottom: 1px #000 solid;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    width: 960px;
    height: 20px;
    background-color: fed450;

#leftnav {
    margin: 0px;
    font-family: "Century Gothic", sans serif;
    float: left;
    width: 160px;
    background-color: f58025;
    text-align: left;
    height: 580px;
}

#body {
    margin: 0px;
    border-right: 1px dashed #694717;
    width: 640px;
    height: 580px;
    margin: auto;
    padding: 10px 0px 0px 10px;
    background-color: d80074;
}

#rightnav {
    margin: 0px;
    font-family: "Century Gothic", sans serif;
    float: right;
    width: 160px;
    background-color: c1d82f;
    text-align: right;
    height: 580px;
}

#footer {
    width: 960px;
    height: 20px;
    text-align: center;
    clear: both;
}

这是HTML：

<div id="container">
    <div id="header"></div>
    <div id="marquee"></div>
    <div id="topnav"></div>
    <div id="leftnav"></div>

    <div id="body">
        <h1>Title<h1>
        <br>
        <p>This is where the content is.</p>
    </div>

    <div id="rightnav"></div>
    <div id="footer"></div>
</div>
4

3 回答 3

0

It is b/c you are separating them with the body id which does not float. You need to set three div columns and set the widths while floating them next to each other.

You also need to close your header tag:

</h1>

In your css you forgot the closing curly bracket } for #topnav

I found all these issues with just a quick glance. There could be more lingering.

Overall your code is a mess and you should consider studying HTML and CSS a bit more.

于 2013-07-12T21:53:45.063 回答
0

Chris78是正确的，您错过}了#topnav规则集的结束。您还应该将 div 移动到#rightnavdiv 之前#body。

您可能需要考虑为您的布局使用网格解决方案。这里只是一个例子

于 2013-07-12T22:08:15.963 回答
0

在你所有的价值观#前面放一个符号。backgroud-color:给width所有三列正确。float: left和#body，#rightnav假设你想要#leftnav, #body, #rightnav. 此外，关闭#topnav.}

于 2013-07-12T22:06:35.497 回答