Нижний DIV с наложенным изображением - это вообще возможно? - PullRequest
0 голосов
/ 31 октября 2011

Я пытаюсь создать следующее:

http://www.pillerdesigns.com/ftn/design6.jpg

Проблема в опросе в правом нижнем углу. Я бы предпочел, чтобы он располагался внизу окна, но не перекрывал (или не перекрывал) окно последних блогов (правая боковая панель) независимо от того, как долго обновляется последняя боковая панель блогов. Но, если не сказать ничего другого, он может прийти только после боковой панели.

Больше всего меня беспокоит изображение собачьей будки, наложенное на опрос, при этом кнопки опроса по-прежнему нажимаются. Кроме того, это на WordPress, поэтому правая боковая панель имеет ширину всего 150 пикселей, и собачья будка должна каким-то образом расширяться за пределы содержащейся в ней боковой панели.

Возможно ли это?

Вот основная структура HTML:

<div id="container">

    <div id="content">
        page content
    </div>

    <div id="primary">
        left sidebar
    </div>

    <div id="secondary">
        right sidebar
    </div>

    <div id="third">
        poll
    </div>

    <div id="footer">
        footer
    </div>

</div>

а вот и ксс:

#container {
    float: left;
    width: 100%;
}
#content {
    margin: 0 170px;
}
#primary, #secondary {
    float: left;
    width: 150px;
}
#primary {
    margin: 0 0 0 -100%;
}
#secondary {
    margin: 0 0 0 -150px;
}

#third {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 150px;
    z-index: -1;
}

#footer {
    clear: left;
    width: 100%;
}

Спасибо!

1 Ответ

2 голосов
/ 31 октября 2011

Вот несколько вариантов

У этого есть собачья будка в нижней части боковой панели:

http://jsfiddle.net/PfnVd/

Примеры ниже имеют собачью будкувнизу сайта.(Над вашим нижним колонтитулом, скорее всего.)

http://jsfiddle.net/PfnVd/1

этот следующий просто имеет меньше содержимого боковой панели, чем предыдущая ссылка http://jsfiddle.net/PfnVd/2 - это показать, как боковая панель неперейдите к разделу "Конура".

http://jsfiddle.net/PfnVd/3/ - по центру изображения.

http://jsfiddle.net/PfnVd/4/ - с длинной областью содержимого.

http://jsfiddle.net/PfnVd/5/ - текст ..

И во всех них вы можете добавлять текст поверх изображения, как обычно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...