Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Закругления углов на CSS & HTML, на абсолютной поз

Автор: alexburzak 1.10.2007, 13:43

Попытка закруглить уголки квадрата с помощью тега 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;
Все закругления исчезают.
Плиз, подскажите где у меня ошибка?

Автор: SelenIT 1.10.2007, 14:04

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

Автор: alexburzak 1.10.2007, 14:12

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

Код


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

}