/* 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 */
Закругления углов на CSS & HTML, на абсолютной позиции.
Пример CSS кода:
Код:
Пример 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>
<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;
Все закругления исчезают.
Плиз, подскажите где у меня ошибка?
А ошибка тут
Цитата: alexburzak
Код:
#rounded-box-3, .inner-box, .r1, .r2, .r3
{
position:absolute;
right:199px;
top:100px;
}
{
position:absolute;
right:199px;
top:100px;
}
Ты выдергиваешь из нормального потока 5 элементов, когда нужно дергать только один:
Код:
#rounded-box-3 {
position:absolute;
}
#rounded-box-3, .inner-box, .r1, .r2, .r3
{
right:199px;
top:100px;
}
position:absolute;
}
#rounded-box-3, .inner-box, .r1, .r2, .r3
{
right:199px;
top:100px;
}
Спасибо все работает.
Пытаюсь лучше понять что такое CSS... ;-)
Цитата: alexburzak
Спасибо все работает.
Поэтому и шлю тебя CSS читать. Если ты его хотя бы прочел и 1/3 понял, то вопроса бы не возникло. Потоки и схемы позиционирование в переводе Парамидина изложены вполне доходчиво.