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

Sufius

Дата 7.4.2008, 22:16 (ссылка)

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

Загрузка ...

Опытный

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

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

Нужно...
Фон-градиент сверху, фон-градиент снизу... высота неизвестна...

никак не могу придумать, как реализовать градиенты сверху и снизу, дабы можно было разместить в центр #content и в нем уже проводить все добавления...

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

Помогите плиз с Ajax http://forum.vingrad.ru/forum/topic-208747.html

bars80080

Дата 8.4.2008, 09:04 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

градинт можно сделать ввиде рисунка толщиной 1пкс, высотой ровно на градиент.
растягиваем два слоя по странице. первому делаем фон в верхней части, второму внизу:

Код

body { background: #ffffff; }
#up { background: url(up_gradient.png); background-repeat: repeat-x; }
#down { background: url(down_gradient.png); background-repeat: repeat-x; background-position: bottom; }

а внутри уже слой с контентом

Sufius

Дата 8.4.2008, 12:14 (ссылка)

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

Загрузка ...

Опытный

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

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

Хм...

Код


body { background: #ffffff; margin:0;}
#up { background: url(images/up_fon.png); height:200px; background-repeat: repeat-x; }
#down { background: url(images/down_fon.png); height:360px; background-repeat: repeat-x; background-position: bottom; }
#cont{ width:800px; background: silver;}

Всё хорошо, пока

Код


<html>
<head>

<title>Home</title>
<style type="text/css" media="all">
    @import "styles.css";
</style>

<body>
<div id='up'></div>
<div id='cont'><p>text</p><p>text</p><p>text</p><p>text</p></div>
<div id='down'></div>
</body>
</html>

Но мне надо, чтобы cont был поверх всех слоёв...
Аки на картинке выше...

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

Помогите плиз с Ajax http://forum.vingrad.ru/forum/topic-208747.html

bars80080

Дата 8.4.2008, 12:51 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

для этого достаточно поменять слои местами, cont пустить последним, и мало того задать ему абсолютно позиционированное положение, чтобы лёг поверх, а не был между или после

второй вариант, это то что я говорил в первом посте, слои все три каждый внутри другого, cont самый внутренний

Код


<div id='up'><div id='down'>
<div id='cont'><p>text</p><p>text</p><p>text</p><p>text</p></div>
</div></div>

Sufius

Дата 10.4.2008, 10:12 (ссылка)

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

Загрузка ...

Опытный

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

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

Хм, только #down не прижимается к нижней границе, если весоты #cont не хватает для полного растягивания по вертикали...

Это сообщение отредактировал(а) Sufius - 10.4.2008, 11:29

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

Помогите плиз с Ajax http://forum.vingrad.ru/forum/topic-208747.html

Sufius

Дата 10.4.2008, 14:22 (ссылка)

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

Загрузка ...

Опытный

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

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

при #cont

Код


position: absolute;

оба градиента исчезают...
при relative всё в норме, но пеявляется отступ в ~10 пикселей сверху...

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

Помогите плиз с Ajax http://forum.vingrad.ru/forum/topic-208747.html

bars80080

Дата 10.4.2008, 14:33 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

отступ может быть следствием отсутствия в стилях (в самом начале):

Код

* { margin: 0px; padding: 0px; }

вообще попытка сделать резиновую разметку, часто упирается в стену: либо всё тянется, но тогда подвал задать невозможно, он постоянно всплывает к нижней кромке контента, либо располагаем как надо (по верхнему и нижнему краю экрана), но при этом, при переполнении контентом центральной части, подвал не спускается вниз

короче, опытное дело. если что-то не получается, выкладывайте полностью страницу, и сообщайте, что не устраивает

Sufius

Дата 10.4.2008, 15:16 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>

<title>Home</title>
<style type="text/css" media="all">
    @import "styles.css";
</style>
<body><center>
<div id='up'><div id='down'><div id='cont'>

<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>

</div></div></div>
</body></center>
</html>

Код


html, body{
margin: 0px;
}

#up {
background-image: url(images/up_fon.png);
background-repeat: repeat-x;
background-position: top;
}
#down {
background-image: url(images/down_fon.png);
background-repeat: repeat-x;
background-position: bottom;
}
#cont{
width:830px;
height: 700px;
}

В IE растягивает...
В FF подвал остается на уровне "конца" одного полного экрана...
Что с этим делать? :(

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

Помогите плиз с Ajax http://forum.vingrad.ru/forum/topic-208747.html

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