Тень под аватарами.

[Трубчатый Кот]

Делаем тень под аватарками как у меня



Не работает в IE.



1. Сохранить эту картинку себе в библиотеку изображений

http://static.diary.ru/userdir/9/3/...20/17429427.png



2. Добавить код





.singleComment .postContent { padding-left:140px; }

.singleComment .postInner { margin-left:-150px; padding-left:150px; }

.singleComment .commentAuthor { float:left; width:130px; overflow:visible; margin-left:-140px !important; margin-left:-65px; max-width: 130px; }

.commentAuthor .avatar { margin:0px 0 10px; width:auto; max-width: 140px; }





.avatar, .avatarNew{ float:left; background: url('/userdir/9/3/1/2/93120/17429427.png') no-repeat bottom right !important; background: no-repeat bottom right; margin: 10px 0 0px 10px !important; margin: 10px 0 0px 5px;}





.avatar img,.avatarNew img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; filter:alpha(opacity=100) !important;-moz-opacity:.75 !important;opacity:.75 !important;}





.avatar img:hover,.avatarNew img:hover { display: block; position: relative; background-color: #fffff0; border: 1px solid #898989; margin: -6px 6px 6px -6px; padding: 4px; filter:alpha(opacity=100);-moz-opacity:1.0 !important;opacity:1.0 !important; }





/userdir/9/3/1/2/93120/17429427.png поменять на адрес картинки из своей библиотеки.

@темы: основные блоки

Comments

[.сестра хаос.]

не раздрожает бледность ав и можно ил её убрать?

[Трубчатый Кот]

.сестра хаос. убрать выделенное жирным )





.avatar img,.avatarNew img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; filter:alpha(opacity=100) !important;-moz-opacity:.75 !important;opacity:.75 !important;}





.avatar img:hover,.avatarNew img:hover { display: block; position: relative; background-color: #fffff0; border: 1px solid #898989; margin: -6px 6px 6px -6px; padding: 4px; filter:alpha(opacity=100);-moz-opacity:1.0 !important;opacity:1.0 !important; }

[.сестра хаос.]

Рёцке, выделение жирным... мм... может я неправильно выразилась.. тень,к оторая на авах, а при наведении мыши она пропадает

[Трубчатый Кот]

.сестра хаос. Выделение жирным делает эффект "подсвечивания" аватарок. По умолчанию аватарка на 25% прозрачная. При наведении мышью восстанавливается 100% непрозрачность аватарки. Если этот эффект надо убрать, то надо убрать соответствующие строчки.

т.е. вот так:



.singleComment .postContent { padding-left:140px; }

.singleComment .postInner { margin-left:-150px; padding-left:150px; }

.singleComment .commentAuthor { float:left; width:130px; overflow:visible; margin-left:-140px !important; margin-left:-65px; max-width: 130px; }

.commentAuthor .avatar { margin:0px 0 10px; width:auto; max-width: 140px; }





.avatar, .avatarNew{ float:left; background: url('/userdir/9/3/1/2/93120/17429427.png') no-repeat bottom right !important; background: no-repeat bottom right; margin: 10px 0 0px 10px !important; margin: 10px 0 0px 5px;}





.avatar img,.avatarNew img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px;}





.avatar img:hover,.avatarNew img:hover { display: block; position: relative; background-color: #fffff0; border: 1px solid #898989; margin: -6px 6px 6px -6px; padding: 4px; }

[.сестра хаос.]

Рёцке, спасибо большое за толковое объяснение)

[Sapphire Nymph]

вставила код каторый без "подсвечивания" аватар и теперь текст из блока записи вылазит.

не подскажите как поченить?

[.сестра хаос.]

посмотрела.

ничего не вылазит вроде)

[Sapphire Nymph]

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

[Mr. Smith]

а как убрать белую рамку вокруг аватара при использовании этого трюка?

[konviki]

Mr. Smith исправьте, в

padding: 4 на 0px;

[Mr. Smith]

konviki

ха, столько вариантов перепробовал, а до этой настройки не додумался)))

спасибо большое! получилось

[konviki]

Mr. Smith =)

[FriZa]

Вобщем, сделать тень под аватарами у меня вышло на ура, только блок с комментом выехал в обе стороны.

Слева ещё смогла его подбить, а справа так и торчит.

Как можно его подправить?

[FriZa]

Уже разобралась.

Надо было прописать границы справа.

[Трубчатый Кот]

FriZa кстати для того, чтобы работало в IE, добавьте



FILTER: progidXImageTransform.Microsoft.Shadow(color='gray', Direction=150, Strength=4);



к .avatar img,.avatarNew img

[FriZa]

Рёцке

У меня и без того в ИЕ оно нормально отображается, я бы сказала, даже лучше, чем в ФФ



Или у вас оно не нормально? Можете глянуть?

[Трубчатый Кот]

FriZa если у вас седьмой IE - в нем будет всё хорошо

в IE6 теней нет )

[FriZa]

Рёцке

У меня именно 7-ой



Прописала. Надеюсь теперь оно будет правильно отображаться =)



Спасибо за помощь.)

[Fandi]

Рамка появилась тени нет =( и так и эдак попробовала.

в чем проблема?

http://pay.diary.ru/~Fandi

[Fandi]

Рамка появилась тени нет =( и так и эдак попробовала.

в чем проблема?

http://pay.diary.ru/~Fandi

[Трубчатый Кот]

Fandi вдумчиво перечитать первый пункт и последнюю строку инструкции

[Fandi]

поправила...эффект тот же.

Код:



.singleComment .postContent { padding-left:140px; }

.singleComment .postInner { margin-left:-150px; padding-left:150px; }

.singleComment .commentAuthor { float:left; width:130px; overflow:visible; margin-left:-140px !important; margin-left:-65px; max-width: 130px; }

.commentAuthor .avatar { margin:0px 0 10px; width:auto; max-width: 140px; }

.avatar, .avatarNew{ float:left; background: url('/userdir/8/2/3/4/82341/18103934.png') no-repeat bottom right !important; background: no-repeat bottom right; margin: 10px 0 0px 10px !important; margin: 10px 0 0px 5px;}

.avatar img,.avatarNew img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; filter:alpha(opacity=100) !important;-moz-opacity:.75 !important;opacity:.75 !important;}

.avatar img:hover,.avatarNew img:hover { display: block; position: relative; background-color: #fffff0; border: 1px solid #898989; margin: -6px 6px 6px -6px; padding: 4px; filter:alpha(opacity=100);-moz-opacity:1.0 !important;opacity:1.0 !important; }

[Трубчатый Кот]

Fandi всё работает.



Если у вас - нет, то перечитываем вторую строчку и пытаемся делать как тут http://pay.diary.ru/~diaryCSS/?comm...postid=26469571

[Melodiana]

В ФФ всё прекрасно получается, а в IE - вот такая фигня. У .сестра хаос., кстати, так же. Что делать?

[Трубчатый Кот]

Melodiana регулировать отступы специально для IE. Конкретно сказать не могу - сильно от остального кода зависит.

[.сестра хаос.]

Melodiana, ие- ужасть

в нём не сижу

так что хрен с ним)

[Melodiana]

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



.commentAuthor .avatar, .commentAuthor .avatarNew{ width:auto !important;}



то всё перестаёт съежать)

[Fandi]

В ИЕ все отображается хорошо а в FF почему то тень уезжает куда-то влево и подписи под аватарами частично пишутся иногда сразу после аватара =(

[Fandi]

Со всем разобралась только почему-то на больших аватарах тень не доезжает до места назначения справа(только полоска внизу) и подпись под аватаром в FF поставить на место только с помощью .sign в ИЕ она из-за этого уезжает еще правее =(

[Himai]

можно сделать тоже самое с главным авом, тем что находится в меню?



если вопрос был - извиняюсь.