Позиционирование фона png-24

[iRina]

Столкнулась с моментом, где фоном тянущегося по высоте блока в правом нижнем углу должен быть прозрачный png-24. Поверх этого фона будет контент.

Проблема, как Вы догдались, из-за IE6.

Признаюсь честно, не могу придумать, как реализовать такое.

Ну если бы блок не тянулся, то тут решение очевидно:

Блок-контейнер. Внутри него блок-пустышка сверху, который прижимает блок с png фоном к низу.

Сверху абсолютным позиционированием кладем блок с контентом, по ширине и высоте индентичный контейнеру.

Но.. в моем случае то, блок с контентом тянется.. следовательно данное решение не подходит, поскольку только при помощи JS можно высоту блока-контейнера сделать зависимой от высоты абсолютно спозиционированного блока с контентом, и то не факт что получится.

Не знаю.. может кому в голову что придет по этому поводу. Я не вижу решения, кроме как JS или уже на крайний случай обработать каритнку и положить ее гифкой.

[Emm]

http://www.tigir.com/alpha_png.htm - если речь о прозрачности в ie6.

[Vitesse]

я так понимаю, что этот способ как раз и используется, но проблема возникает в том, что png нужно вставить в правый нижний угол.

(Если файл был бы gif, то проблема решалась бы только одним свойством для контейнера: background:bottom right;)

в этом случае попробуйте блок с png спозиционировать абсолютно в контейнере, а блок с контентом с помощью z-index поместить сверху него (блока с png).

т.е. чтото типа

<style>
.container {
 position:relative;
}
.png {
 width:100px; //нужные размеры для png
 height:100px;
 background:url(file.png);
 //background:none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file.png',sizingMethod='crop');
 right:0px;
 bottom:0px;
 z-index:1;
}
.content {
 z-index:2;
 position:relative;
}
</style>

[iRina]

http://www.tigir.com/alpha_png.htm - если речь о прозрачности в ie6.

Емм, ты не понял, как включать прозрачность и т.п я знаю. А вот как быть с позиционирование фона в IE6, ведь там отфильтрованный png не позиционируется, т.к. у фильтра попросту не предусмотренно позиций. Вот случай, что я описываю выше.. там даже неполучится, насколько я понимаю, искуственно сделать эффект, чтоб фон визуально был в правом нижнем углу.

в этом случае попробуйте блок с png спозиционировать абсолютно в контейнере, а блок с контентом с помощью z-index поместить сверху него (блока с png).

-- и как контейнер растянется на такую же высоту как и блок с контентом? До такого способа я додумалась, но в том то и дело что если тянется все это дело, то способ такой сюда не идет.

[homm]

поскольку только при помощи JS можно высоту блока-контейнера сделать зависимой от высоты абсолютно спозиционированного блока с контентом

Это не так. Вернее не совсем так. Посмотрите здесь: promart74.ru

Там фон ? полупрозрачный див абсолютный, а контент зарелеватен поверх него в общем контейнере, который под все это дело тянется. ?не совсем так? потому что в CSS для любимого экссплорера все равно используется JS для фикса глюка с высотой. Я так понял он связан с тем, экспорере не может применить relative к ячейке. Возможно, если сделать таблицу не больше ячейки, JS трюк не понадобится.

[ProGGGer]

Вроде бы тут была тема про png

http://forum.htmlbook.ru/index.php?showtopic=6287

[iRina]

а контент зарелеватен поверх него в общем контейнере, который под все это дело тянется. .

В третий раз объясняю уже что не контент должен под "это дело" тянуться, а это дело под контент, в том то и вся проблема.

Вроде бы тут была тема про png

http://forum.htmlbook.ru/index.php?showtopic=6287

Спасибо, но Вы также не поняли, с чем трудности у меня. К тому же есть универсальные решения и покороче.. самописные..

[Mordraug]

у вас не будет никаких проблем во всех браузерах кроме IE6, поскольку реализация прозрачности PNG в IE6 использует expression (фильтры). После использования фильтра с фоновым изображением нельзя делать практически никаких манипуляций.. оно не сможет быть размножено по осям (х,y) и не может быть позиционировано, а может быть только либо показано как есть (тоесть в реальный размер картинки PNG), либо "растянуто" на всю область в которой находится.. за эти опции отвечают параметры фильтра ("sizingMethod=crop" и "sizingMethod=scale" соответственно).

Поэтому вам придется либо делать фон таким, что при растягивании он бы выглядел как "размноженый" (градиенты по одной оси, но не по двум сразу к примеру прекрасно выглядят), либо делать фон "с запасом".. т.е. заведомо больше блока в котором он распологается и при отображении "как есть" (sizingMethod=crop) он будет показываться соразмерно контенту. А по поводу позиционирования ? в контексте PNG в IE6 нужно делать так, чтобы фон всегда был в положении "left-top".

Вроде понятно все изложил

[iRina]

Mordraug, вот поэтому и ищу способ как симмитировать позиционирование фона при тянущемся блоке. При фиксированном да, можно например сделать как вы предлагаете, либо посредством абсолютного позиционирования.. и прижимания блока к низу блоком-пустышкой. Но.. но как осуществить сию иммитацию при неопределенной высоте???

Вот что я пытаюсь добиться).

П.С. Всем кто пытался помочь спасибо на добром слове).

[homm]

В третий раз объясняю уже что не контент должен под "это дело" тянуться, а это дело под контент, в том то и вся проблема.

Если бы Вы вместо того, что бы третий раз одно и то же поворять, пошли бы и посмотрели верстку, с которой я предлагал Вам ознакомится, без труда пришли бы к такому решению:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
table.plane {
 position: relative;
 background: green;}
table.plane .bg {
 width: 50px;
 height: 10px;
 background: red;
 position: absolute;
 bottom: 0; right: 0;
 z-index: 20;}
table.plane .inner {
 position: relative;
 z-index: 30;
 color: white;}
</style>
</head>
<body>
 <table cellpadding=0 cellspacing=0 class=plane border=0 width=200>
 <tr><td>
 <div class=bg></div>
 <div class=inner>
 text text texttext text texttext text texttext text texttext text texttext text texttext text text
 </div>
 </td></tr>
 </table> 
</body>
</html>

PS на дивах не пробовал, но что-то мне подсказывает, что нифига не выйдет.

[homm]

Хотя, на дивах даже почище получилось. Вот последний вариант включая исправления для ФФ для таблиц:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
table.plane {
 position: relative;
 background: green;}
table.plane .bg {
 width: 50px;
 height: 10px;
 background: red;
 position: absolute;
 bottom: 0; right: 0;
 z-index: 20;}
table.plane .inner {
 position: relative;
 z-index: 30;}

img.fix {vertical-align: bottom;}

div.plane {
 position: relative;}
div.plane .bg {
 font-size: 0px;
 text-align: right;}
div.plane img{
 width: 50px;
 height: 30px;}
div.plane .inner {
 position: relative;
 margin-bottom: -30px;}
</style>
</head>
<body>
 <div style="position: relative;">
 <table cellpadding=0 cellspacing=0 class=plane border=0 width="100%">
 <tr><td>
 <div class=bg></div>
 <div class=inner>
 text text texttext text texttext text texttext text texttext text texttext text texttext text text
 </div>
 </td></tr>
 </table>
 </div>





 <div class=plane>
 <div class=inner>
 text text texttext text texttext text texttext text texttext text texttext text texttext text text
 </div>
 <div class=bg><img src='file://c:/2.bmp' class=fix></div>
 </div>
</body>
</html>

[Vitesse]

-- и как контейнер растянется на такую же высоту как и блок с контентом? До такого способа я додумалась, но в том то и дело что если тянется все это дело, то способ такой сюда не идет.

так если мы не указываем явной высоты, контент помещаем в контейнер - содержимое контента растянет контейнер.

[Vitesse]

единственная проблема в моем варианте, это если высота блока с png будет больше, чем высота блока с контентом.