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

You should embed your #nav and #quote elements into a div or header tag and position it absolutely. Then you can position you image container relatively, which will push down subsequent content.

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应该是position:relativewhile #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 回答
0

要放置背景图像，请使用以下 css 属性

背景图像：url（'yourimage.jpg'）；

于 2012-09-18T15:25:31.127 回答
-1

您可以使用 display: block css 属性使其显示在自己的行上。只需将该属性添加到 CSS 样式表中的 #bg 即可。

于 2012-09-18T15:20:24.403 回答