VPF::Закругления углов на CSS & HTML, на абсолютной поз

alexburzak

Дата 1.10.2007, 13:43 (ссылка)

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

Загрузка ...

Опытный

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

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

Попытка закруглить уголки квадрата с помощью тега B.
Пример CSS кода:

Код


/* Start radius */
.r1, .r2, .r3
{
    display:block;
    height:1px;
    overflow:hidden;
    font-size:1px;
}
.r3
{
    margin:0 3px;
}
.r2
{
    margin:0 2px;
}
.r1
{
    margin:0 1px;
}
#rounded-box-3 .inner-box, #rounded-box-3  b 
{
    background-color: #CCCCCC;
}
.inner-box 
{
    padding:1em;
}
#rounded-box-3, .inner-box, .r1, .r2, .r3
{
    position:absolute;
    right:199px;
    top:100px;
}
/* End radius */

Пример HTML кода:

Код


        <div id="rounded-box-3">
            <b class="r3"></b>
            <b class="r2"></b>
            <b class="r1"></b>
            <div class="inner-box">
                R=3px
            </div>
            <b class="r1"></b>
            <b class="r2"></b>
            <b class="r3"></b>
        </div>

Проблема:
Когда я хочу всю эту конструкцию поставить на определенном месте у себя на сайте используя position:absolute;
Все закругления исчезают.
Плиз, подскажите где у меня ошибка?

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

HomePage :: Продвижение сайтов, сопровождение сайта малым и средним бизнесам в интернете

SelenIT

Дата 1.10.2007, 14:04 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

alexburzak, а зачем для .inner-box, .r1, .r2, .r3 указывать absolute? От чего и куда будут отсчитываться их координаты? Ставьте absolute лишь контейнеру, а остальное подстроится под него автоматически...

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

alexburzak

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

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

Загрузка ...

Опытный

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

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

Спасибо за намек, так и сделал:

Код


.inner-box 
{
                padding:1em;
    height:200px;
}
#rounded-box-3
{
    position:absolute;
    right:300px;
    top:100px;
    width:200px;

}

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

HomePage :: Продвижение сайтов, сопровождение сайта малым и средним бизнесам в интернете

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