Textpattern - на русском языке

форум общения русскоязычных пользователей CMS Текстпаттерн

Вы не зашли.

#1 18-12-2007 00:23:42

Cimeries
есть
Зарегистрирован: 27-10-2005
Сообщений: 58
Вебсайт

DIV+BACKROUND (несколько файлов\картинок, проблема с CSS)

Имеется некий <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 даёт отображение того, который написан позже.
Помогите пожалуйста разобраться с проблемой. Ибо совсем уж не знаю, что делать sad

Для наглядности изобразил на картинке то, что хотелось бы получить.

http://www.cimeries.com/temp/css.jpg

Заранее спасибо за помощь!

Отредактированно Cimeries (18-12-2007 00:45:51)


http://cimeries.com - My HomePage\Blog
http://www.abandoned-legacy.net - Заброшенное Наследие (Industrial Photos)
http://www.metalfront.org - Metal/Gothic/Industrial Web-Zine

Неактивен

 

#2 18-12-2007 00:38:44

Cimeries
есть
Зарегистрирован: 27-10-2005
Сообщений: 58
Вебсайт

Re: DIV+BACKROUND (несколько файлов\картинок, проблема с CSS)

Слишком я поспешил с созданием темы. В общем удалось решить эту проблему. Думаю, что некоторым будет интересно, потому сам же и поделюсь решением.

Код страницы 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)


http://cimeries.com - My HomePage\Blog
http://www.abandoned-legacy.net - Заброшенное Наследие (Industrial Photos)
http://www.metalfront.org - Metal/Gothic/Industrial Web-Zine

Неактивен

 

#3 18-12-2007 12:20:24

warmrobot
наш
Откуда: Москва
Зарегистрирован: 25-08-2006
Сообщений: 219
Вебсайт

Re: DIV+BACKROUND (несколько файлов\картинок, проблема с CSS)

Cimeries написал:

Банальное прописывание одному div'у двух атрибутов background даёт отображение того, который написан позже.
!

Эх, а счастье было так возможно!  :-)

Неактивен

 

#4 18-12-2007 12:29:51

glebotr
ять
Зарегистрирован: 25-06-2005
Сообщений: 1974
Вебсайт

Re: DIV+BACKROUND (несколько файлов\картинок, проблема с CSS)

<div style="background-image:cener_background.png">
<img src="top_edge.png">
content
<img src="bottom_edge.png">
</div>

При фиксированной ширине  div  smile


Пх’нглуи мглв’нафх Ленин Красная площадь вгах’нагл фхтагн
(В своем доме на Красной площади мертвый Ленин спит, ожидая своего часа (ктулх.))

Неактивен

 

#5 18-12-2007 12:52:29

warmrobot
наш
Откуда: Москва
Зарегистрирован: 25-08-2006
Сообщений: 219
Вебсайт

Re: DIV+BACKROUND (несколько файлов\картинок, проблема с CSS)

Если серьёзно, то автор топика пришёл к правильному решению. Не надо его сбивать.
Лучше сделать нельзя. Разве что дивы переназвать.
Я лишь ещё немного уменьшу код:

#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)

Неактивен

 

#6 18-12-2007 18:29:22

Cimeries
есть
Зарегистрирован: 27-10-2005
Сообщений: 58
Вебсайт

Re: DIV+BACKROUND (несколько файлов\картинок, проблема с CSS)

<img src="top_edge.png">
content
<img src="bottom_edge.png">

Наверное я не понял всего хода мыслей ) Немного сомнения у меня вызывает такой способ.
Если просто прописывать <img src> - картинки будут до текста и после текста. А нужно, чтобы картинки были под текстом. Как фон.
То есть получается, что надо ещё отдельно прописывать, чтобы текст шёл поверх картинок итд?
Не, чего-то я не уловил тут наверное )

Разве что дивы переназвать.

В принципе да, эт было бы вполне логичным smile Просто я пока возился с той страничкой - не особо заморачивался над названиями. Потом исправлю чуть что )

/* don't forget to add workaround to IE6 */

А вот это да, актуальная проблема, которую тоже стоило бы потом учесть. Но неважно в общем, на это я отдельный топик создавал smile


http://cimeries.com - My HomePage\Blog
http://www.abandoned-legacy.net - Заброшенное Наследие (Industrial Photos)
http://www.metalfront.org - Metal/Gothic/Industrial Web-Zine

Неактивен

 

#7 31-12-2007 13:38:53

marazmus
наш
Откуда: Россия, Октябрьский
Зарегистрирован: 23-01-2006
Сообщений: 217
Вебсайт

Re: DIV+BACKROUND (несколько файлов\картинок, проблема с CSS)

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

Неактивен

 

#8 16-01-2008 16:54:25

Val
аз
Зарегистрирован: 16-01-2008
Сообщений: 1

Re: DIV+BACKROUND (несколько файлов\картинок, проблема с CSS)

Приспичило мне переверстать сайт с табличной версткой в "див"-ную. И не делаю этого пока этого по одной причине: бекграунд содержит очень большое количество картинок и верстка получается "по ширине страницы". Т.е.

картинка верх слева - картинка центр - картинка верх справа
картинка центр слева - картинка центр - картинка центр справа
картинка низ слева - картинка центр - картинка низ справа
И это все предавляет из себя всего лишь бекграунд. Но есть еще блоки, с закругленными углами (с картинками). Я как представлю, сколько это надо будет дивов, чтобы такое описать - руки опускаются.
Вот и возник вопрос: нет ли каких-либо приемов, чтобы в один див поместить всю такую конструкцию:
картинка верх слева - картинка центр - картинка верх справа
?

Неактивен

 

#9 16-01-2008 19:58:49

the_ghost
ять
Откуда: Минск
Зарегистрирован: 01-05-2007
Сообщений: 1957
Вебсайт

Re: DIV+BACKROUND (несколько файлов\картинок, проблема с CSS)

добавляете в див два дива. Получаете такую структуру:
див
- див 1 float:left
- див 2 float:right

Размеры\фон этих дивов устаналиваете как требуется


.      Создание шаблонов для Textpatern http://textpattern.ru/forum/viewtopic.php?id=1665 (<txp:make_template quality="best" />)
КОНСУЛЬТАЦИИ по Textpattern - ICQ#8458496, nemiga@gmail.com <txp:if_question><txp:pay /></txp:if_question>
       Список всех тегов - http://textbook.textpattern.net/wiki/in … _Reference

Неактивен

 

Board footer

RSS   Rambler's Top100
Powered by PunBB
Textpattern.ru