как такое сделать на div?

**Aykroyd** · 09.12.2007, 12:20

Originally posted by Xylitolq@Dec 9 2007, 07:58
как сделать такого плана вложенные закругленные блоки?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Любым из двух способов, представленных выше в этой теме.

**Xylitolq** · 09.12.2007, 16:51

оба блока резиновые, тянутся по высоте и ширине
белый блок независимо тянется внутри серого

**Aykroyd** · 09.12.2007, 17:10

Ну и пусть тянется... кто ему мешает...

**Рёга** · 09.12.2007, 18:03

Originally posted by Xylitolq@Dec 9 2007, 02:58
[b]как сделать такого плана вложенные закругленные блоки?
[Только зарегистрированные пользователи могут видеть ссылки. ]

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head> 
<title>Великая мудрость закона гладких углов</title>
<style type="text/css" media="all"><!--
.main {position: relative; width: 200px; height: 300px; background-color: Lime;}
.text {position: relative; width: 180; height: 240px; background-color: blue; margin: 10px;}
.topleft {position: absolute; top: 0; left: 0; width: 25px; height: 25px; background-color: red;}
.topright {position: absolute; top: 0; right: 0; width: 25px; height: 25px; background-color: red;}
.bottomleft {position: absolute; bottom: 0; left: 0; width: 25px; height: 25px; background-color: red;}
.bottomright {position: absolute; bottom: 0; right: 0; width: 25px; height: 25px; background-color: red;}
h3 {margin: 0 0 0 1.5em;}
--></style>
</head>

<html>
****<body>
 *<div class="main">
 *****<h3>Block #1</h3>
 * *****<div class="text">
 * * *
 * * *
 * * *
 * * *
 * *****</div>
 * *
 * *
 * *
 * *
 *</div>
****</body>
</html>

Поменяете div-ы 1, 2, 3 и 4 на изображения и будет вам счастье

А делается это за счёт того, что в блоке котором требуется сделать абсолютное позиционирование элементов задаёте значение position: relative; и тогда элементы которые требуется спозиционировать будут позиционироваться в указанном блоке а не теле документа.

**Xylitolq** · 09.12.2007, 18:44

бэкгранудном картинки пускать?

**Рёга** · 09.12.2007, 21:25

Originally posted by Xylitolq@Dec 9 2007, 14:44
[b]бэкгранудном картинки пускать?

Если вы извращенец, то да =) Шучу, с одной стороны хорошо background использовать потому что символов в коде меньше а css кэшируется, с другой стороны я использую изображения (подстраховываюсь) если сайт будут просматривать через портативные устройства то для них можно другой стиль создать и спрятать изображения:
<div class="topright">#2</div> = <img class="topright" src="topright.gif" alt="" />

Тут вопрос семантики по мне, это папа просветить может, Aykroyd в этом вопросе рулит

**Aykroyd** · 10.12.2007, 05:08

Originally posted by Xylitolq@Dec 9 2007, 19:44
бэкгранудном картинки пускать?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Если вы НЕ извращенец, то да =) :read:

**Рёга** · 10.12.2007, 19:08

Originally posted by Aykroyd@Dec 10 2007, 01:08
[b]Если вы НЕ извращенец, то да =)* :read:

Извращенец Рёга =)

**Aykroyd** · 10.12.2007, 20:09

Ну, совсем без извращений тоже нельзя...)

Тема: как такое сделать на div?

Опции темы

Поиск по теме

Отображение

Похожие темы

Можно ли сделать такое?

Как такое сделать в IE ?

Как сделать такое подчёркивание ссылки

Как бы такое сделать?

Как сделать такое?

Ваши права