1

幅が100％の画像を含むdivがあり、その下に他のすべてのコンテンツ（コンテンツdivに含まれるすべてのもの）を配置したいと思います。これが私の現在のコードです：

98.214.131.200/index.php

<!DOCTYPE html>
<html>
<head>
    <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="quote">
<p>"random quote"</p>
</ul>
<div id="bg"><img src="bg.jpg" width="100%" alt=""</img></div>
<div id="content">
<p>content</p>
</div>
</body>
</html>

98.214.131.200/style.css

body {
    background-color: #000000;
    color: #C1C1C1;
    font-family: Arial,Verdana,Helvetica,sans-serif;
    margin: 0;
}
#bg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    }
#content {
    position:relative;
    color: #FFF;
    }
#nav {
    z-index:1;
    position:relative;
    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; }
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #c00;
    border-right: 1px solid #ccc; }
#nav li a:hover {
    color: #c00;
    background-color: #fff; }
#nav ab {
    float: right; }
#nav ab a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #c00;
    border-right: 1px solid #ccc; }
#nav ab a:hover {
    color: #c00;
    background-color: #fff; }
#quote{
    z-index:1;
    position:relative;
}
#quote p {
    color: #000;
    width: 350px;
}

http：// 98.214.131.200にアクセスして、現在のコードを確認できます。

4

4 に答える 4

0

背景画像を配置するには、次のcssプロパティを使用します

background-image：url（'yourimage.jpg'）;

于 2012-09-18T15:25:31.127 に答える
0

#nav要素と#quote要素をdivorheaderタグに埋め込んで、絶対に配置する必要があります。次に、画像コンテナを相対的に配置できます。これにより、後続のコンテンツがプッシュダウンされます。

HTML：

<div id="header">
    <ul id="nav"></ul>
    <ul id="quote></ul>
</div>

CSS：

div#header{
    position: absolute;
}
#bg{
    position: relative;
}
于 2012-09-18T15:22:02.167 に答える
0

から<p>取り出し、<ul>（と一緒に#content <p>）の中に配置し#bgます。次に、ポジショニング宣言を再検討してください...

絶対配置された要素は、相対配置の親コンテナに依存します。したがって、ながらで#bgある必要があります。引用とコンテンツの両方の親として使用することにより、焦点を当てようとしている1つの要素に関連するすべてのものを保持します。position:relative#quote position:absolute#bg

フィドルを作成しました（画像にIPアドレスを使用）。 http://jsfiddle.net/bqXc6/

ここに要点があります：

#bg { position:relative; width:100%; }
#quote {
    position:absolute;
    color: #000;
    top: 20px;
    width: 350px;
    margin-left:20px;
}
#content { color:#FFF; margin-left:20px; }

注：フィドルでは、親に隠されたオーバーフローを使用して「float：left」ナビゲーション要素のコードをクリーンアップし（高さ/幅を押して開くだけ）、背景色が表示されるようにしました。</ p>

于 2012-09-18T16:04:21.797 に答える
-1

display：block cssプロパティを使用して、独自の行に表示することができます。そのプロパティをcssスタイルシートの#bgに追加するだけです。

于 2012-09-18T15:20:24.403 に答える