реализация полупрозрачной полосы на две-колонки

[murik_aka_4up]

Здравствуйте!

нужно корректно сверстать полупрозрачную полосу, все хорошо можно было бы решить z-индексом, проблема в том что правая половина находится под этой полосой, левая с текстом над ней. решил разбить полосу на две части и попробовать используя {background: rgba( 184, 58, 237, 0.7);} справиться с этой задачей. но при разных размерах экрана полосы "плывут" относительно друг друга. абсолютное позиционирование превращает текст в левой части в кашу.

Подскажите как справиться с этой задачей не разбивая эту полосу на две части?

[SelenIT]

Вставить полосу внутрь левой половины (насколько я понял дизайн, она всё равно должна привязываться к конкретным абзацам текста в ней) и спозиционировать абсолютно? Тогда она заведомо накроет и текст, и всё, что ниже левой половины...

[managerr]

Вставить полосу внутрь левой половины (насколько я понял дизайн, она всё равно должна привязываться к конкретным абзацам текста в ней) и спозиционировать абсолютно? Тогда она заведомо накроет и текст, и всё, что ниже левой половины...

не вариант. Текст по дизайну поверх полоски - цвет текста не меняется над полоской или без нее. При этом сама полоска поверх фото справа. Тут поинтереснее все

[sigma77]

managerr,

А можно ссылку на страницу? Колонки резиновые? И куда что плывет? )

[SelenIT]

цвет текста не меняется над полоской или без нее

Ну так задать тексту position:relative и z-index еще выше, делов-то...

[sigma77]

managerr,

http://jsfiddle.net/jsckV/

[murik_aka_4up]

А что если левой частью полосы сделать просто наезд на правую колонку с фотографией? тому диву что в левой колонке задать ширину всей страницы, паддингом удержать слева текст... можно так реализовать?

managerr,

http://jsfiddle.net/jsckV/

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

ps: на сей раз получилось с z-индексом!

и сразу же появился новый вопрос) поскольку расположение полосы фиксировано, то при масштабировании нужный нам текст выползает за её пределы... нельзя ли как нибудь привязать эту полосу к заданому тексту?

Edited September 21, 2011 by murik_aka_4up

[SelenIT]

Как-нибудь так — не вариант?

[murik_aka_4up]

Как-нибудь так — не вариант?

Спасибо!!! Ваша реализация идеально подошла и вписалась в мой код!!!

Edited September 21, 2011 by murik_aka_4up

[murik_aka_4up]

подскажите ещё пожалуйста один момент... который возник при проверке в ИЕ.

эта полоса там упорно не хочет быть полупрозрачной.

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

и

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";

не помогает

[Bonzash]

filter: alpha(opacity=75);

мб так?

[murik_aka_4up]

filter: alpha(opacity=75);

мб так?

нет(

[Vlad]

1. В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

2. Из-за настроек безопасности браузера фильтры могут не выполняться на локальной странице.

[Justnewone]

Уверен, что в данном случае надо будет сделать 1пх картинку "полупрозрачный розовый" и зарепитить ее, для ИЕ6, например, с помощью DD_belatedPNG.

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

[SelenIT]

1пх картинку "полупрозрачный розовый" и зарепитить ее, для ИЕ6, например, с помощью DD_belatedPNG

??? Верно ли я понимаю, что в ископаемом ослике скрипту придется замостить всю плашку сотнями тысяч однопиксельных VML-квадратиков?

В принципе, IE5.5-8 понимает rgba (точнее, argb) через фильтр градиента (вроде как еще через какие-то фильтры, полного списка я не нашел).

А в чем проблема с картинкой в левой колонке?

[murik_aka_4up]

Уверен, что в данном случае надо будет сделать 1пх картинку "полупрозрачный розовый" и зарепитить ее, для ИЕ6, например, с помощью DD_belatedPNG.

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

да дело в том что в ИЕ6 вообще нет полосы этой и куча багов. поэтому я делаю уже под ИЕ8...

[Justnewone]

1пх картинку "полупрозрачный розовый" и зарепитить ее, для ИЕ6, например, с помощью DD_belatedPNG

??? Верно ли я понимаю, что в ископаемом ослике скрипту придется замостить всю плашку сотнями тысяч однопиксельных VML-квадратиков?

Ну или для осла просто плашку большую сделать, хотя, про 1000 квадратиков мне понравилось, сами виноваты что ослину используют, мож это эффективнее чем "смените браузер"

А в чем проблема с картинкой в левой колонке?

Ну как же, все что внутри блока с опасити - тоже полупрозрачно, вернуть в инхерит относительно боди, например, уже не выйдет, картинка слева будет в ажурных розово-черных муарах.

[SelenIT]

да дело в том что в ИЕ6 вообще нет полосы этой и куча багов

Мой пример не учитывал IE7-, они не понимают псевдоэлемента :before. Если IE7- нужны, придется заменить :before на пустой спан в начале (либо добавить его скриптом/одноразовым экспрешном).

Ну как же, все что внутри блока с опасити - тоже полупрозрачно

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

[Justnewone]

Ну как же, все что внутри блока с опасити - тоже полупрозрачно

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

Я не вглядывался особо именно в Ваш код, просто увидел терки про опасити. Так, намекнул ТС на особенности.