Приклеить img в sidebar внизу сайта

[gasyoun]

В WordPress нужно приклеить снизу в боковой панели картинку CSS-ом. Не внизу окна браузера (как, например, http://www.cssstickyfooter.com/ или http://twitter.github.io/bootstrap/examples/sticky-footer.html или http://timothy-long.com/examples/responsive-sticky-footer/), а внизу самой страницы. Страница длинная, с прокруткой, и пока не докручу, картинку сбоку внизу не увижу.

Спасибо, извините за примитивность поставленной задачи. Не верстал аж с 2002 г., подзабыл премудрости абсолютного позиционирования.

[red4pony]

Так пусть футер просто идет в потоке. Если контента больше области просмотра, футер всегда будет автоматически прижиматься к низу. Вы бы показали макет или ссылку дали. Тогда можно было точно сказать что делать в Вашем случае.

[gasyoun]

Так пусть футер просто идет в потоке. Если контента больше области просмотра, футер всегда будет автоматически прижиматься к низу.

Футер и так идет в потоке, но в футере будет другая картинка, с ней проблем нет, она будет прижата к низу, тут элементарно.

Вы бы показали макет или ссылку дали.

http://is.gd/ovXHGN - сайт.

Пациент - картинка парня в сайдбаре. Стрекоза остается, где есть, а парень должен уехать вниз (но фактически будет надо картинкой, встроенной в footer)

<div style="position: absolute bottom;">
<img src="http://img195.imageshack.us/img195/2160/pilot27.gif" alt="Пилот"/></div>

Заранее спасибо.

[red4pony]

Футер как я понял это параграф внизу с координатами мастерской. Для начала нужно создать <footer> или <div class="footer">, поместить туда параграф и изображение. Изображению добавить float:right; Футеру overflow:hidden; Параграфу ширину и отступ слева. Ну и дальше смотреть как все будет становиться.

[gasyoun]

Не, не, нельзя картинку (мальчика) всунуть в футер. Координаты мастерской иначе растянутся.

Мальчика нужно имеенно исходя из sidebar, в футер он своим ростом будет раздвигать то,

что ему не положено. Если бы можно было в футер небольшую картинку - таки да.

Но картинка парня высокая, и соответсвенно, только в боковую панель. Не могу его от

стрекозы отлепить, ну и черезе 20 br-ов совсем не кошерно, да ведь не надежно.

[red4pony]

Засуньте футер под основной контент с помощью отрицательного отступа. Параграф также отодвинете с помощью отступа. Чтобы было кошерно нужно всю верстку переделать и будет Вам Ган-Эден

[Olga_1989]

попробуйте так:

.offset3 {

position:relative;

}

div.pilot {

position:absolute;

right:0;

bottom:0;

}

Edited May 28, 2013 by Olga_1989

[gasyoun]

попробуйте так:

Если я правильно понял

<div style="position:relative;">
<div style="position: absolute; right:0; bottom:0;">
<img src="http://img195.imageshack.us/img195/2160/pilot27.gif" alt="Пилот"/>
</div></div>

Чувак ушел вверх, а не вниз Видно на сайте.

[red4pony]

Чувак ушел вверх, а не вниз

Переместите чувака в container (и container {position: relative}). Ну и потом с помощью абсолютного позиционирования подвигаете его.

[gasyoun]

Переместите чувака в container (и container {position: relative}). Ну и потом с помощью абсолютного позиционирования подвигаете его.

Ваша мысль мне, увы, не понятна. Вот весь код

http://pastebin.com/nqnMZ7z1

Чувак уже так внутри id="container", то есть внутри 2 дивов. 3-й добавить? Не совсем Вас понял. Теперь ноги чувака расположены там, где его голова была раньше. Видимо к этому я его принудил, прописав код Ольги. Что дальше?

Edited May 28, 2013 by gasyoun

[red4pony]

Код я видел через Firebug. Положение координат абсолютно позиционированного элемента отсчитывается от ближайшего предка которому задано позиционирование отличное от static. Так вот, Вы хотите чтобы паренек располагался внизу страницы. У Вас есть обертка (#container) которая задает ширину всего содержимого сайта. Получается Вам нужно разместить парня в нижнем правом углу. Для этого необходимо изображение переместить в #container, чтобы последний стал его родителем(один уровень вложенности). Теперь задаем position:relative для #container (этим самым задаем начало отсчета для всех позиционированных дочерних элементов), затем для изображения мальчика задаем

position: absolute;
bottom: 0;
right: 0;

Этим мы расположим изображение в нижнем правом углу #container'а что нам и требовалось. Профит!

P.S. Возможно Вам нужно будет изменить значения bottom и right чтобы выровнять изображение как Вам нужно

[Olga_1989]

попробуйте так:

Если я правильно понял

<div style="position:relative;">
<div style="position: absolute; right:0; bottom:0;">
<img src="http://img195.imageshack.us/img195/2160/pilot27.gif" alt="Пилот"/>
</div></div>

Чувак ушел вверх, а не вниз Видно на сайте.

Не совсем верно поняли:

<div class=" span13 offset3" role="main" style="position:relative">

<!-- здесь есть еще другой див: leftcontainer, aside.span4, а затем идет ваш див с картинкой -->

<div>
<div style="position: absolute; right:0; bottom:0;">
<img src="http://img195.imageshack.us/img195/2160/pilot27.gif" alt="Пилот"/>
</div>
</div>
</div>

Т.е. относительное позиционирование нужно назначить не первому родителю дива с картинкой, его не трогаем, а тому, у которого класс offset3

Edited May 29, 2013 by Olga_1989

[gasyoun]

offset3 пока не осилил, поэтому грубо br-ами сдвинул вниз. Офсет это 2й див внутри 1-го, так?