Размещение div ниже другого

У меня есть div, который содержит изображение шириной 100%, я хочу поместить под него весь мой другой контент (все, что будет в 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 ответа

Решение

Возьмите <p> вне <ul>и поместите его (вместе с #content<p>) Внутри #bg, Затем вернитесь к своим позиционным заявлениям...

Абсолютно позиционированные элементы зависят от родительского контейнера с относительным позиционированием. Таким образом, #bg должно быть position:relative в то время как #quoteposition: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", используя переполнение, скрытое на их родительском элементе (просто чтобы открыть высоту / ширину), чтобы его цвет фона был виден.

Источник

Чтобы поместить фоновое изображение, используйте следующее свойство CSS

Фоновое изображение: URL ('yourimage.jpg');

Источник

Вы должны встроить свои элементы #nav и #quote в div или же header пометить и позиционировать его абсолютно. Затем вы можете позиционировать свой контейнер изображений относительно, что будет толкать последующий контент.

HTML:

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

CSS:

div#header{
    position: absolute;
}
#bg{
    position: relative;
}
Источник

Вы можете использовать свойство display: block css, чтобы оно отображалось в отдельной строке. Просто добавьте это свойство к #bg в вашей таблице стилей CSS.

Источник
Другие вопросы по тегам