VPF::Пример верстки div - Форум программистов

ilya_cska

Дата 20.3.2009, 15:10 (ссылка)

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

Загрузка ...

Бывалый

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

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

День добрый.
Нужна кросс-браузерная верстка "резинового" дива с круглой рамкой, с картинками.
Есть у кого-нибудь пример?
Нужно вот такое ( только на всю страницу)

Это сообщение отредактировал(а) ilya_cska - 20.3.2009, 15:11

WebMast

Дата 21.3.2009, 17:31 (ссылка)

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

Загрузка ...

Front-end developer

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

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

Есть вариант. В данном случае можно сделать четыре дива внутри одного. И расположить их по краям. И добавить рамку диву.. Нужен код?

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

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

ilya_cska

Дата 22.3.2009, 02:24 (ссылка)

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

Загрузка ...

Бывалый

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

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

Цитата(WebMast @ 21.3.2009, 17:31)

Если это будет адекватно отображаться при разных масштабах и в разных браузерах, то можно код не помешает smile

webster

Дата 22.3.2009, 10:05 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


.rounded_corner_block, .rounded_corner_block div {
width: 100%;
}
.rounded_corner_block {
background: transparent url(bottom_left_corner.png) no-repeat;
background-position: 0% 100%;
}
.rounded_corner_block div {
background: transparent url(bottom_right_corner.png) no-repeat;
background-position: 100% 100%;
}
.rounded_corner_block div div {
background: transparent url(top_left_corner.png) no-repeat;
background-position: 0% 0%;
}
.rounded_corner_block div div div {
background: transparent url(top_right_corner.png) no-repeat;
background-position: 100% 0%;
width: auto;
padding: 10px 20px;
}

Код


<div class="rounded_corner_block">
<div>
<div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</div>
</div>

Это сообщение отредактировал(а) webster - 22.3.2009, 10:06

ilya_cska

Дата 22.3.2009, 10:50 (ссылка)

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

Загрузка ...

Бывалый

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

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

спасибо

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