0

98.214.131.200/index.php

<html>
<head>
    <title>Peoria Triathlon Club</title>
    <meta  charset=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
    <li><a href="http://tri-peoria.org">Home</a></li>
    <li><a href="/forum">Forum</a></li>
    <li><a href="/join">Join</a></li>
    <li><a href="/members">Members</a></li>
    <li><a href="/events">Events</a></li>
    <li><a href="/training">Training</a></li>
    <li><a href="https://www.facebook.com/groups/tripeoria/">Facebook</a></li>
    <ab><a href="/about">Peoria Triathlon Club</a></ab>
</ul>
<ul id=main>
<p>Main</p>
</ul>
</body>
</html>

98.214.131.200/style.css

body {
    background:#000 url(bg.jpg) center top no-repeat;
    background-size: cover;
    color: #c1c1c1;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    margin:0;
}

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc;
}

#main{
    display:inline-block;
    float:left;
}

メインのdivにあるものを背景画像の下に表示し、ナビゲーションバーを上部に表示するにはどうすればよいですか？現在のコードはhttp：//98.214.131.200で見ることができます

4

3 に答える 3

1

  1. 「メイン」コンテナをのdiv代わりに変更しますul（それを作成するやむを得ない理由がない限り...メインulの中にいつでも入れることができます）。uldiv

  2. margin-topcssにプロパティを追加#mainして、ナビゲーションバーから適切な量だけバンプダウンします。

したがって、index.phpでは：

<div id="main">
<p>Main</p>
</div>

そしてstyle.cssで：

#main {
    margin-top: 240px; /* Adjust as needed */
}

display: inline-blockメインのCSSからをダンプすることができfloat:left、その後の意図によってはどちらも必要ない場合があります。

background-size: coverまた、体のcssからドロップする必要がある場合もあります。そうしないと、メインのdivをカバーするように画像が大きくなる場合があります。

于 2012-09-18T14:03:12.677 に答える
0

あなたが何を達成しようとしているのか正確にはわかりませんが、背景画像の高さに等しい「パディングトップ」を体に追加することはできます。

body {padding-top：50px; }//bg.jpgの高さが50pxであると仮定

そして、＃mainにそのフロートが本当に必要かどうかを確認してください。

于 2012-09-18T13:22:22.050 に答える
0

これを試して

body {
background-color: #000000;
    background-image: url("bg.jpg");
background-position: center top;
    background-repeat: no-repeat;
color: #C1C1C1;
    font-family: Arial,Verdana,Helvetica,sans-serif;
    margin: 0;
}

#main {
    margin-top: 370px;
}
于 2012-09-18T14:02:56.593 に答える