VPF::Фон из трех частей - Форум программистов

WolfON

Дата 17.8.2007, 14:37 (ссылка)

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

Загрузка ...

Опытный

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

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

Фон состоит из трех изображений, верхнего и нижнего, статических и среднего, которое дублируется по оси - у в зависимости от размеров содержания. (на картинке прикрепленной нарисовано как надо)

Самое содержание должно писаться поверх этих трех картинок и 2 часть растягиваться.
Сейчас получается сделать только так, чтобы содержимое было во второй части :(

Вот то что есть:

Код


#container {
    width: 202px;
}
    
#header {
    height: 71px;
    background: url(header.gif) no-repeat;
}
    
#main {
    background: url(main.gif) repeat-y;
}
    
#footer {
    height: 101px;
    background: url(footer.gif) no-repeat;
}

Код


<div id="container">
        <div id="header"><!-- H --></div>
        <div id="main">Текст<br/>Текст<br/>Текст<br/>Текст<br/>Текст</div>
        <div id="footer"><!-- F --></div>
</div>

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

verstka.gif 3,61 Kb

Uratsakidogi

Дата 17.8.2007, 15:51 (ссылка)

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

Загрузка ...

Шустрый

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

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

Код


<div id="container"><div class="main"><div class="inner">
    текст
</div></div></div>

Код


#container {
    width: 202px;
    background: url(main.gif) repeat-y;
}
#container .main {
    background: url(header.gif) no-repeat;
}
#container .main .inner {
    background: url(footer.gif) no-repeat;
    /* если нужны какие-то padding'и, то задавать их стоит для этого блока */
}

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

ЖЖ | ВерстаюНЕПОЗВОЛЯЙТЕ ЯЩЕРИКАМ, ОТРИЦАТЕЛЬНЫМ ИНОПЛАНЕТЯНИНАМ ОВЛАДЕВАТЬ ВАС, НЕ СТАНОВИТЕСЬ ИХ МАРИОНЕТКАМИ!

WolfON

Дата 17.8.2007, 16:20 (ссылка)

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

Загрузка ...

Опытный

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

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

В таком случае получается, что на вверху рисуется картинка 3 (которая внизу должна быть), а дальше размножается 2 =/

Добавлено через 2 минуты и 52 секунды
Забыл

Код


background-position:bottom;

WebDisaster

Дата 17.8.2007, 16:25 (ссылка)

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

Загрузка ...

Опытный

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

Репутация: 17
Всего: 19

Думаю, Вам должно подойти вот это

Uratsakidogi

Дата 17.8.2007, 23:39 (ссылка)

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

Загрузка ...

Шустрый

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

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

WolfON, ага, скопировал твой код и не обратил внимания. smile

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

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