Наложение, без позиционирования.

divbyzero · March 13, 2008

Всем привет.

Столкнулся с такой ситуацией. В общем у меня есть два элемента.

Покажу на рисунке, так нагляднее.

из него нужно получить вот такое:

Но вроде бы все просто, вот только есть - но. позиционирование использовать нельзя. Почему? просто этот контент не статический и будет со скролом двигаться, и при позиционировании(relative) в IE6 остается на месте. Возможно предложите как сделать чтобы при прокрутке перемещался элемент.

Вот в общем я эксперементировать и вот что получил:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>TEST</title>
 <style>
.el1{
 width: 50px;
 height: 13px;
 background: #f00;
 display: block;
}
.el2{
 width: 65px;
 height: 13px;
 display: block;
 background: transparent url(images/rate.png) no-repeat;
}
.all{
 background: #222;
 width: 65px;
 height: 13px;
}
 </style>
</head>

<body>
 <div class="all">
 <span class="el1">
 <span class="el2"></span>
 </span>
 </div>
</body>

</html>

И еще самый важный момент, у меня на сайте - динамически меняется ширина элемента el1. А в IE6 ширина равна ширине el2, в других браузерах (IE7, FF) все нормально (ширина el1 независит от el2).

Возможно проковыряясь 2 дня, я поспешно сделал выводы, помогите разобраться с проблемой.

Scrum · March 13, 2008

float - не ?

divbyzero · March 13, 2008

float - не ?

Если можно поточнее, куда и к чему?

Scrum · March 13, 2008

ну тогда наводящий вопрос, как разместить блок шириной 65px в блоке шириной в 50px ?

предполагаю что должно было быть так, да же без float.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
.red {
 width: 50px;
 height: 13px;
 background: #f00;
}
.green{
 width: 65px;
 height: 13px;
 background: green;
 font-size: 0;
}
 /*]]>*/
 </style>
</head>

<body>
 <div class="green">
 <div class="red"></div>
 </div>
</body>

</html>

divbyzero · March 13, 2008

Хорошо спасибо за толчок в нужное русло, тогда спросить вот что хочу.

У меня такая ситуация, что нада положить фон картинкой с прозрачностью. (png)

Вот что получается в FF, IE7

А вот что получается в IE6:

Вот код: (все как и в Вашем примере, только вставил картинку)

...
 <div class="green">
 <div class="red"><img src="images/rate.png" alt=""/></div>
 </div>
...

Загружаю в IE6 png при помощи специального стиля

.red img{
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.red{
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/rate.png', sizingMethod='crop');
 background: #f00 left top;
}

Получается, что red тянется вместе с картинкой

guvatara · March 14, 2008

а если вместо картинки использовать див с баграундом картинкой.

...
<style type="text/css">
 /*<![CDATA[*/
.red {
 width: 50%;
 height: 13px;
 background: #f00;
}
.green{
 width: 65px;
 height: 13px;
 background: green;
 font-size: 0;
}
 /*]]>*/
 </style>
...
<div class="green">
 <div class="red">50%</div>
 </div>

divbyzero · March 18, 2008

В таком случаем сама картинка фона будет обрезана.

Собственно это строка и делает бекграундом в ие6

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/rate.png', sizingMethod='crop');

а эта, убирает с виду вложенное изображение в теге img (делает его полностью прозрачным)

.red img{

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

}

guvatara · March 18, 2008

Мне всегда казалось что два файла gif весят меньше одного png.

Просто делаются два файла для фона, один красный, другой зеленый с этими квадратиками.

homm · March 18, 2008

Но вроде бы все просто, вот только есть - но. позиционирование использовать нельзя. Почему? просто этот контент не статический и будет со скролом двигаться, и при позиционировании(relative) в IE6 остается на месте.

Что за бред?

homm · March 18, 2008

Мне всегда казалось что два файла gif весят меньше одного png.

-1

У png много форматов палитры, при правильном использовании он лучше gif.

homm · March 18, 2008

У меня такая ситуация, что нада положить фон картинкой с прозрачностью. (png)

Наводящий вопрос: знаешь ли ты чем отличаются картинки с прозрачностью от картинок с полупрозрачностью?

homm · March 18, 2008

Автор, ты уж прости, я во все посты не вникал, но то, что тебе нужно делается так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr">
<head>
 <title>TEST</title>
 <style>
.red {
 width: 50px;
 height: 10px;
 background: red;}
.green {
 position: absolute;
 width: 30px;
 height: 10px;
 background: green;}
 </style>
</head>
<body>
 <div class="green"></div>
 <div class="red"></div>
</body>
</html>

При этом для прозрачных png никаких ImageTransformAlphaLoader не нужно.

guvatara · March 18, 2008

Мне всегда казалось что два файла gif весят меньше одного png.
-1
У png много форматов палитры, при правильном использовании он лучше gif.

В данной ситуации мой вариант куда продуктивнее, чем плодить кучу кода для решения вопроса в IE 6.

homm · March 18, 2008

чем плодить кучу кода для решения вопроса в IE 6.

Зачем плодить кучу кода для решения вопроса в IE 6?

Мое замечание никак не относится к данному топику, просто Вам минус, если Вы не разбираетесь в вопросе и Вам всегда казалось что два файла gif весят меньше одного png.

divbyzero · March 18, 2008

Но вроде бы все просто, вот только есть - но. позиционирование использовать нельзя. Почему? просто этот контент не статический и будет со скролом двигаться, и при позиционировании(relative) в IE6 остается на месте.
Что за бред?

<div style="width: 155px; height: 150px; background: #ddd; overflow: scroll;">
<br/>
<br/>
...
<br/>
<br/>

<div class="green">
 <div class="red">50%</div>
 </div>
<br/>
<br/>
...
<br/>
<br/>
</div>

В таком случае контент "скроллируется", а бекгроунд остается на месте в IE6

homm · March 18, 2008

В таком случае контент "скроллируется", а бекгроунд остается на месте в IE6

Не увидел ни ?позиционирования? ни различия отображеня Оперой 9.5 и ИЕ6.

ZoNT · March 20, 2008

Хорошо спасибо за толчок в нужное русло, тогда спросить вот что хочу.
У меня такая ситуация, что нада положить фон картинкой с прозрачностью. (png)
Вот что получается в FF, IE7
http://ipicture.ru/uploads/080314/Yfd2ok1Bfs.gif
А вот что получается в IE6:
http://ipicture.ru/uploads/080314/R7S8yWd5e1.gif

а не проще ли сделать одсновной див с зел?ным НЕПРОЗРАЧНЫМ бэкграундом и В Н?М второй с красным НЕПРОЗРАЧНЫМ бэком. Так вот второй будет изменять свою ширину от 0 до 100% - итог: преславутый прогрессбар.

Sign In

Наложение, без позиционирования.

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information