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

**Zigzag** · 28.02.2007, 12:36

вот что-то похожее, урок от Дэна Седерхольма.

XHTML:

Код:

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

<html>
<head>
<title></title>
<style>
@import url("style.css"); 
</style>
</head>
<body>
<div class="container">
****<p class="desc">This box is:</p>
****<p class="link">[Только зарегистрированные пользователи могут видеть ссылки. ]</p>****
</div>
</body>
</html>

CSS:

Код:

.container {
****float: left;
****color: #666;
****background: url(images/rounded-right.gif) no-repeat top right;
}
.desc {
****margin: 0;
****padding: 9px 9px 0 9px;
****background: url(images/rounded-left.gif) no-repeat top left;
}
.link {
****margin: 0;
****padding: 0 0 0 9px;
****background: url(images/rounded-left.gif) no-repeat bottom left;****
}
.link em {
****display: block;
****padding: 0 9px 9px 0;
****font-style: normal;
****background: url(images/rounded-right.gif) no-repeat bottom right;****
}
.container a {
****font-size: 130%;
****color: #E70;
}

IMAGES:
[attachment=5564:attachment]
[attachment=5565:attachment]

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

удачи...

**Aykroyd** · 28.02.2007, 15:51

Originally posted by Zigzag@Feb 28 2007, 12:36
я обычно чтобы сделать скругленные углы при резиновости блока по всем осям, в этот блок вкладываю маленькие изображения уголков которые абсолютным позиционированием расставляю по углам, не забыв при этом указать для самого блока position: relative;
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Имхо, наиболее предпочтительный способ.

Позволяет обойтись без большого фонового изображения.

**FarshEgg** · 04.03.2007, 22:53

Originally posted by Aykroyd@Feb 28 2007, 11:51
Имхо, наиболее предпочтительный способ.*
Позволяет обойтись без большого фонового изображения.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Что то я не понял ..
А разве при увеличении / уменьшении блока , те абсолютные дивы с уголками будут двигаться вместе с ним ? Или я туплю ?

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

Опции темы

Поиск по теме

Отображение

Комбинированный просмотр

Похожие темы

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

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

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

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

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

Ваши права