VPF::Показать только центр слоя, если не влазит в экран

Smorodin

Дата 22.5.2012, 14:23 (ссылка)

(нет голосов)

Загрузка ...

Добрейший

Профиль
Группа: Участник
Сообщений: 285
Регистрация: 10.4.2006
Где: Пермь

Репутация: нет
Всего: 1

Добрый день!
Есть макет примерно следующий: (см. приложение)

ширина зеленого слоя - от 1400 и больше. Ширина синего - всегда 1200. Ширина красного - 100.

Задача: Синий всегда в центре, но при этом если красный не входит - то скролла быть не должно. то есть красный можно отбросить. при этом расстояние между краями синего блока по бокам всегда одинаково, то есть синий всегда точно по центру. Если большое разрешение - то красный слой "прилипает" к синему, как обозначено в схеме.

Устал уже головой биться, подскажите, пожалуйста...

Присоединённый файл ( Кол-во скачиваний: 9 )

Без_имени20120522171905.png 5,72 Kb

--------------------

Сделать можно все, только вопрос - когда?

Guedda

Дата 22.5.2012, 14:41 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78

Подобную задачу средствами css вряд ли возможно сделать (если бы не красный блок, то думаю, что можно). А так - только JS, имхо.

--------------------

Ll 2

ksnk

Дата 22.5.2012, 15:32 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

В зеленом блоке какое содержимое?

Можно сделать так, что синий всегда будет по центру, фиксированной ширины, красный к нему прилегает. А вот зеленый будет прижиматься к левому краю экрана и растягиваться на всю ширину экрана.
Пойдет?

Добавлено через 9 минут и 44 секунды

Код


<!doctype html>
<html>
<style>
#_1400 {
position: relative;
  height:200px;
overflow:hidden;
  border: 1px solid green ;
}
#_1200 {
  width:600px;

position: absolute;
top: 0%;
left: 50%;
margin: 0 0 0 -330px;
padding: 20px 30px;

  height:200px;
  border: 1px solid blue ;
}
#_red {
position: absolute;
width:100px;
top: 0%;
left: 50%;
margin: 0 0 0 330px;
padding: 20px 30px;
  border: 1px solid red ;
}


</style>

<body>

<div id='_1400'>
green green green green green green green 
<div id='_1200'>
blue blue blue blue
</div>
<div id='_red'> red red red red </div>

</div>


</body>
</html>

Добавлено через 11 минут и 4 секунды
Размер и сдвиги центральных частей вычисляются по несложной, но не очень тривиальной формуле smile

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Smorodin

Дата 22.5.2012, 16:32 (ссылка)

(нет голосов)

Загрузка ...

Добрейший

Профиль
Группа: Участник
Сообщений: 285
Регистрация: 10.4.2006
Где: Пермь

Репутация: нет
Всего: 1

Спасибо большое!!! В зеленом - просто фоновая заливка.

--------------------

Сделать можно все, только вопрос - когда?

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »