0

3 列の Web サイトを作成しようとしていますが、適切なナビゲーションを正しく表示できないようです。常に他の 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

Chris78は、あなたがルールセットの締めくくり}を見逃していることは正しいです#topnav。#rightnavまた、 div を div の前に移動する必要があり#bodyます。

レイアウトにグリッド ソリューションを使用することを検討してください。これはほんの一例です

于 2013-07-12T22:08:15.963 に答える
0

body id浮かない で分けているのは b/c です。div3 つの列を設定しwidths、floatingそれらを隣り合わせに設定する必要があります。

また、ヘッダー タグを閉じる必要があります。

</h1>

あなたのCSSで、閉じ中括弧}を忘れました#topnav

これらの問題はすべて、一目見ただけで見つかりました。もっと長引く可能性があります。

全体的にコードがごちゃごちゃしており、HTML と CSS をもう少し勉強することを検討する必要があります。

于 2013-07-12T21:53:45.063 に答える
0

すべての値#の前に記号を付けますbackgroud-color:。width3 つの列すべてに固有値を指定します。float: leftと、あなたが望むと仮定し#bodyて、、、。また、 で閉じます。#rightnav#leftnav#body#rightnav#topnav}

于 2013-07-12T22:06:35.497 に答える