Пробелма наложения background - HTML и CSS

NidHelp · 19.09.2011, 17:51

Не могу придумать, как решить следующую проблему.

Рис.1) Background сайта складывается из двух изображений, img_1 и img_2. Первое выравнивается по top в <body>, второе по bottom в таблице основного контента с текcтом.

Рис.2) Проблем никаких, если текста много. Разрыв между изображениями компенсируется цветовой заливкой в <body> (рис.2).

Рис.3) НО (!) получается, если текста мало, то img_2 перекрывает собой img_1.

Рис.4) Что нужно? Если текста мало, img_2 не отрывается от img_1, но и не отображаться на экране, так как img_1 в высоту и без того "вылезает" за границы экрана. При дальнейшем же увеличении текстового блока, всё должно вести себя так, как на Рис.2.

Есть ли какие-либо решения средствами CSS?

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

Wicort · 19.09.2011, 18:07

а где картинки (рис.1, рис.2, рис.3, рис.4)?

NidHelp · 19.09.2011, 21:15

Цитата:

Сообщение от Wicort

а где картинки (рис.1, рис.2, рис.3, рис.4)?

На картинке выше. Забыл подписать. Исправил.

lex_nv · 20.09.2011, 06:30

а если минимальную высоту страницы задать?

Wicort · 20.09.2011, 08:41

Не вижу в первом посте ни одной картинки... Они там есть? Если да, то вероятно, проблема с моей стороны.

Naive · 20.09.2011, 15:13

2 Wicort, Картинки есть.
Я бы сделал тупым хаком: добавил в таблицу ячейку с невидимым пикселем высотой с необходимый отступ.
Что-то вроде кривого min-height)

Wicort · 20.09.2011, 15:34

Цитата:

2 Wicort, Картинки есть.

В таком случае прошу прощения за свой пост.
Видимо, на работе закрыт проксей сервер, на который выложены картинки.

kettanaito · 20.09.2011, 20:05

Прочитай статьи об Ответственном дизайне (Responsive Design). Смысл ответственного дизайна в изменении положения некоторых элементов в зависимости от каких-либо условий. Например, если нам нужно при ширине страницы менее 900 пикселей скрыть некий блок, мы делаем следующее:

Код:

@media (max-width: 900px) {
div#block {display:none;}
}

При этом он будет отображаться с шириной больше 900. Такой пример отлично подойдет с позиционированием заднего фона.

NidHelp · 24.09.2011, 21:25

Цитата:

Сообщение от kettanaito

Прочитай статьи об Ответственном дизайне (Responsive Design). Смысл ответственного дизайна в изменении положения некоторых элементов в зависимости от каких-либо условий.

Огромное спасибо! Это именно то, что надо.

Жаль, что на такую информацию сложно выйти, вбивая в гуглах.. ээм.. (что именно?) тут сотни вариантов, чем можно забить поисковую строку, если не знать "Responsive Design"

19.09.2011, 17:51	#1
NidHelp Регистрация: 19.09.2011 Сообщений: 7	Пробелма наложения background Не могу придумать, как решить следующую проблему. Рис.1) Background сайта складывается из двух изображений, img_1 и img_2. Первое выравнивается по top в <body>, второе по bottom в таблице основного контента с текcтом. Рис.2) Проблем никаких, если текста много. Разрыв между изображениями компенсируется цветовой заливкой в <body> (рис.2). Рис.3) НО (!) получается, если текста мало, то img_2 перекрывает собой img_1. Рис.4) Что нужно? Если текста мало, img_2 не отрывается от img_1, но и не отображаться на экране, так как img_1 в высоту и без того "вылезает" за границы экрана. При дальнейшем же увеличении текстового блока, всё должно вести себя так, как на Рис.2. Есть ли какие-либо решения средствами CSS? Заранее спасибо. Последний раз редактировалось NidHelp; 19.09.2011 в 21:14.

19.09.2011, 18:07	#2
Wicort Форумчанин Регистрация: 04.08.2009 Сообщений: 684	а где картинки (рис.1, рис.2, рис.3, рис.4)? Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =) Мой ник зарегистрирован, а твой?

20.09.2011, 08:41	#5
Wicort Форумчанин Регистрация: 04.08.2009 Сообщений: 684	Не вижу в первом посте ни одной картинки... Они там есть? Если да, то вероятно, проблема с моей стороны. Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =) Мой ник зарегистрирован, а твой?

20.09.2011, 15:13	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	2 Wicort, Картинки есть. Я бы сделал тупым хаком: добавил в таблицу ячейку с невидимым пикселем высотой с необходимый отступ. Что-то вроде кривого min-height) Alar, верни репу!

20.09.2011, 20:05	#8
kettanaito Веб-дизайнер Форумчанин Регистрация: 11.08.2011 Сообщений: 305	Прочитай статьи об Ответственном дизайне (Responsive Design). Смысл ответственного дизайна в изменении положения некоторых элементов в зависимости от каких-либо условий. Например, если нам нужно при ширине страницы менее 900 пикселей скрыть некий блок, мы делаем следующее: Код: `@media (max-width: 900px) { div#block {display:none;} }` При этом он будет отображаться с шириной больше 900. Такой пример отлично подойдет с позиционированием заднего фона.

20.09.2011, 06:30	#4
lex_nv Регистрация: 19.09.2011 Сообщений: 4	а если минимальную высоту страницы задать?

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Пробелма с xml/xslt преобразованием	Кнехт	Общие вопросы .NET	1	12.10.2010 13:06
Наложения объектов в C++	fmx999	Общие вопросы C/C++	3	01.04.2010 17:39
''Слои'' наложения изображений.	Alex Cones	Мультимедиа в Delphi	3	11.04.2009 17:03
Наложения изображения друг на друга	rudakop	HTML и CSS	1	16.09.2008 03:03