DIV

[.ruslan]

Уважаемые, подскажите как сделать в DIV где нет позиционирования две картинки по верхним углам?

метод:
right:0;
top:0
НЕ РАБОТАЕТ БЕЗ УКАЗАНИЯ ПОЗИЦИОНИРОВАНИЯ

[Live]

если можно - подробнее вопрос опишите, а-то ничего не понятно

[Ps]

А нахрена тебе блок позиционировать, ты картинки блоком сделай...наверное...=)))

[.ruslan]

есть див со свойствами:

div#rig{
margin-top:50px;
margin-left:25px;
margin-right:260px;
background:url(img/bgcen.gif);
background-repeat:repeat-x;
padding:10px;
}

и нужно в верхний угол данного дива поставить картинку

[bacteriophage]

Я знаю только один способ: сделать вложенный div (или любой другой блок - p, h1[2,3,4..], span, ul...), а в нем бэкграунд задать right top. Т.к. в одном блоке две фоновых картинки не сделать.
Только задай в стилях ширину вложенного блока 100% и минимальную высоту в размер картинки.

[Ps]

bacteriophage, а почему вместо "p, h1[2,3,4..], span, ul" не использовать сам img?

[Live]

да, тебе надо сделать вложенный див и ему фоном сделать нужную картинку.

[.ruslan]

хорошо, как тогда разместить див в углу?

[DareDevil]

Если некритично наличие лишней картинки в коде — попробуй задать для div#rig position: relative не указывая координат, а внутри него уже абсолютно спозиционируй картинку.
Если критично — внутри div#rig создавай еще один div, для которого задавай фоном свою картинку: background: url(blah-blah.gif) top right no-repeat;
Или дожидайся поддержки CSS3 — там можно будет задавть несколько фонов одному блоку.

[null]

в HTML

<div id="rig" class="rounded">
 * *
 * *
 * *
 * *
 * *<div class="content">
 * * * *...
 * *</div>
</div>

и в CSS

div.rounded{
 * *position: relative;
 * *margin: 0px 0px 0px 0px;
 * *background: url(img/bgcen.gif) repeat-x;
 * *padding: 0px 0px 0px 0px;
}
div.corner {
 * *position: absolute;
 * *width: 10px;
 * *height: 10px;
}
div.topleft {
 * *background-image: url(img/ctl.gif);
}
div.topright{
 * *right: 0px; 
 * *background-image: url(img/ctr.gif);
}
div.bottomleft {
 * *bottom: 0px;
 * *background-image: url(img/cbl.gif);
}
div.bottomright {
 * *bottom: 0px;
 * *right: 0px;
 * *background-image: url(img/cbr.gif);
}
div.content {
 * *margin: 0px 10px 0px 10px;
 * *padding: 10px 0px 10px 0px;
}

а если можно сделать контейнер плавающим, то в HTML

<div id="rig" class="rounded">
 * *
 * *
 * *<div class="content">
 * * * *...
 * *</div>
 * *
 * *
</div>

в CSS

div.rounded{
 * *float: left;
 * *clear: both;
 * *margin: 0px 0px 0px 0px;
 * *background: url(img/bgcen.gif) repeat-x;
 * *padding: 0px 0px 0px 0px;
 * *border: 1px solid Red;
}
div.corner {
 * *width: 10px;
 * *height: 10px;
 * *border: 1px solid Green;
}
div.topleft {
 * *float: left;
 * *background-image: url(../images/ctl.png);
}
div.topright{
 * *float: right;
 * *background-image: url(../images/ctr.png);
}
div.bottomleft {
 * *float: left;
 * *background-image: url(../images/cbl.png);
}
div.bottomright {
 * *float: right;
 * *background-image: url(../images/cbr.png);
}
div.content {
 * *border: 1px solid Blue;
 * *margin: 0px 10px 0px 10px;
 * *padding: 10px 0px 10px 0px;
}

я бы сделал так (имея ввиду, что следующие в потоке элементы мой контейнер догонят )

ps: абсолютно позиционировать внутри контейнера можно лишь тогда, когда сам контейнер позиционирован. padding контейнера придется обнулить и задать отступы правилом для div'а content (иначе углы не выроняются по краю контейнера). margin контейнера тоже - эскплорер считает, что margin-отступы - это часть объекта (задайте их окружающими объектами или задайте отступы углов от границ ненулевыми и равными вашим margin-отступам, а в селекторе, который эксплорер не понимает, укажите что нужно делать прочим вменяемым браузерам).

pps: в мозиллах еще moz-правила есть . а еще лучше такие вещи делать генерируемым контентом. но эксплорер не поймет...