форум общения русскоязычных пользователей CMS Текстпаттерн
Вы не зашли.
Страниц: 1
Имеется некий <div id="info"> в котором располагается непосредственно информационная часть сайта (имею в виду тексты статей итд).
За фон к этому div'у должно отвечать три файла. info1.jpg - верхняя часть рисунка (должна отображаться 1 раз без повторов - top no-repeat), info3.jpg - нижняя часть рисунка (также должна отображаться 1 раз без повторов - top no-repeat), info2.jpg - промежуточная часть рисунка, которая должна заполнять множество раз пространство между рисунками верхним и нижним (при условии, что будет превышена минимальная высота, равная сумме высот верхнего и нижнего рисунка, repeat-y).
Не получается реализовать идею на практике. Для двух файлов (info1.jpg и info2.jpg) - всё получается. Куда прикрутить третий файл - не знаю.
Вот моя реализация для двух файлов:
Код страницы default:
<div id="main"> <div id="info"> </div> </div>
Код CSS файла:
div#main { background: url(info2.jpg) repeat-y; margin: auto; width: 800px; } div#info { min-height: 797px; background: url(info1.jpg) no-repeat top; margin: auto; width: 740px; padding: 0px 30px; }
Куда и как здесь можно вписать информацию о третьем файле - ума не приложу. Банальное прописывание одному div'у двух атрибутов background даёт отображение того, который написан позже.
Помогите пожалуйста разобраться с проблемой. Ибо совсем уж не знаю, что делать
Для наглядности изобразил на картинке то, что хотелось бы получить.
Заранее спасибо за помощь!
Отредактированно Cimeries (18-12-2007 00:45:51)
Неактивен
Слишком я поспешил с созданием темы. В общем удалось решить эту проблему. Думаю, что некоторым будет интересно, потому сам же и поделюсь решением.
Код страницы default:
<div id="main2"> <div id="main"> <div id="info"> </div> </div> </div>
Код CSS файла:
div#main2 { background: url(info2.jpg) repeat-y; margin: auto; width: 800px; } div#main { background: url(info3.jpg) no-repeat bottom; margin: auto; width: 800px; } div#info { min-height: 797px; background: url(info1.jpg) no-repeat top; margin: auto; width: 740px; padding: 0px 30px; }
Не знаю, насколько этот способ оптимален. Какое-то слишком уж большое нагромождение div'ов получается.
Если кто-нибудь предложит решение получше - буду рад услышать.
Отредактированно Cimeries (18-12-2007 00:46:02)
Неактивен
Cimeries написал:
Банальное прописывание одному div'у двух атрибутов background даёт отображение того, который написан позже.
!
Эх, а счастье было так возможно! :-)
Неактивен
<div style="background-image:cener_background.png">
<img src="top_edge.png">
content
<img src="bottom_edge.png">
</div>
При фиксированной ширине div
Неактивен
Если серьёзно, то автор топика пришёл к правильному решению. Не надо его сбивать.
Лучше сделать нельзя. Разве что дивы переназвать.
Я лишь ещё немного уменьшу код:
#main2 {
background: url(info2.jpg) repeat-y 0 0;
margin: 0 auto;
width: 800px;
}
#main {
background: url(info3.jpg) no-repeat 0 100%;
}
#info {
min-height: 797px; /* don't forget to add workaround to IE6 */
background: url(info1.jpg) no-repeat 0 0;
padding: 0 30px;
}
Отредактированно warmrobot (18-12-2007 12:54:54)
Неактивен
<img src="top_edge.png">
content
<img src="bottom_edge.png">
Наверное я не понял всего хода мыслей ) Немного сомнения у меня вызывает такой способ.
Если просто прописывать <img src> - картинки будут до текста и после текста. А нужно, чтобы картинки были под текстом. Как фон.
То есть получается, что надо ещё отдельно прописывать, чтобы текст шёл поверх картинок итд?
Не, чего-то я не уловил тут наверное )
Разве что дивы переназвать.
В принципе да, эт было бы вполне логичным Просто я пока возился с той страничкой - не особо заморачивался над названиями. Потом исправлю чуть что )
/* don't forget to add workaround to IE6 */
А вот это да, актуальная проблема, которую тоже стоило бы потом учесть. Но неважно в общем, на это я отдельный топик создавал
Неактивен
Сразу напрашивается три вложенных div для вашей задачи. Потому что множественные бекграунды для одного элемента не поддерживаются пока (единственный, кто умеет это делать - Safari, насколько я помню).
Неактивен
Приспичило мне переверстать сайт с табличной версткой в "див"-ную. И не делаю этого пока этого по одной причине: бекграунд содержит очень большое количество картинок и верстка получается "по ширине страницы". Т.е.
картинка верх слева - картинка центр - картинка верх справа
картинка центр слева - картинка центр - картинка центр справа
картинка низ слева - картинка центр - картинка низ справа
И это все предавляет из себя всего лишь бекграунд. Но есть еще блоки, с закругленными углами (с картинками). Я как представлю, сколько это надо будет дивов, чтобы такое описать - руки опускаются.
Вот и возник вопрос: нет ли каких-либо приемов, чтобы в один див поместить всю такую конструкцию:
картинка верх слева - картинка центр - картинка верх справа
?
Неактивен
добавляете в див два дива. Получаете такую структуру:
див
- див 1 float:left
- див 2 float:right
Размеры\фон этих дивов устаналиваете как требуется
Неактивен
Страниц: 1