Про вертикальное растягивание и слои

processo · June 20, 2011

Доброго всем дня!

Есть вопрос.

Слева на картинке макет сайта, где контента мало, slider - 1px рисунок, которые не растянут, и нижний блок - footer (просто картинка).Подскажите, как сделать так, чтобы при добавлении контента, большого объёма, блок content заходил на блок footer а затем slider просто растягивался на оставшийся контент. Надеюсь объяснил достаточно полно. Кода, как такового, не надо(но можно), нужен словесный алгоритм, что указать в свойствах блока, и какое позиционирование использовать, absolute или relative. Заранее благодарен за ответы.

psywalker · June 20, 2011

Погоди, а покажи два скриншота, как есть щас и как должно быть

processo · June 20, 2011

Вот так без контента.

Так с контентом. Чёрная полоса - слайдер. Львенок должен двигаться вместе с контентом в низ.

Понимаю, что горожу огород,просто нижнюю часть обрезал в 1 картинку, и думал что покатит Поэтому задам вопрос по другому. Как лучше обрезать footer чтобы львенок был в низу, по мере увеличения контента. Он ведь получится сбоку. Заранее благодарю.

Edited June 20, 2011 by processo

psywalker · June 20, 2011

Ну и в чём проблема? Делаешь общий контейнер, прижимаешь львёнка к низу, слева, и всё

processo · June 20, 2011

Эээээ, этим: background-position?

klierik · June 20, 2011

Эээээ, этим: background-position?

лучше львенка положить в отдельный div и позиционировать

processo · June 20, 2011

klierik, подскажи пожалуйста как его отпозиционировать в отдельном div`e, просто я ума не приложу. Контент делать родительским, или как?

klierik · June 20, 2011

Давай посмотрим и подумаем...

И так имеем:

Красная рамка - это div с контентом.

Синяя рамка - это документ (<html>)

Черная рамка - это div фиксированной высоты и ширины, который будет содержать львенка через CSS-правило background: url(img/lion.png);

Как я понимаю то контентная часть имеет фиксированный размер?!

А львенок должен иметь отступ сверху равный высота_контента + отступ_сверху + отступ_снизу.

В итоге имеем:

div.lion {
position: absolute;
left: 50%;
top: 600px; /* значение корректируй сам */
width: 200px;
height: 200px;
margin: -150px 0 0 -500px; /* 300px - это обратный отступ от центра страницы к началу контента */

background: url(img/lion.png);
}

так же не забываем про отступ внизу страницы

body {
padding: 0 0 50px;
}

Но, если контентная область резиновая, то нужно плясать от неё. Т.е. в неё кладем львенка и позиционируем относительно нижнего левого угла области.

psywalker · June 20, 2011

Эээээ, этим: background-position?
лучше львенка положить в отдельный div и позиционировать

+1 Безусловно!

processo · June 20, 2011

klierik, psywalker большое Вам спасибо за ответы, завтра попробую, а то спать очень охото, если что можно к Вам будет обратится за советом?

klierik · June 20, 2011

ну попробуй

psywalker · June 20, 2011

klierik, psywalker большое Вам спасибо за ответы, завтра попробую, а то спать очень охото, если что можно к Вам будет обратится за советом?

Sign In

Про вертикальное растягивание и слои

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information