Категория: CSS для MyPage

Играем со статусом на сайте.

Итак, вы хотите немного исправить недоделки администрации и разместить ваш статус не в визитке.
На данный момент у нас есть 2 варианта размещения.


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

#status {position: fixed; top:50%; bottom:50%; left:-115px; width:250px; height: 20px; background-color: #fff;}
#status {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
#status em.radius6 {opacity:0;filter:alpha(opacity=0); margin-top: -20px}
#status:hover em.radius6 {opacity:1;filter:alpha(opacity=100); z-index: 20; margin-top: -20px; background-color: #fff;}
#status em.radius6 {-moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#status .status_arr {background: url('http://imgin.ru/images/users/doranych/dfae8d128027269bab1efe3128eb83ae.png') no-repeat; background-position: center; margin:0 !important; z-index: 0 !important; border: none !important; width: 250px; height: 20px;}
#status:hover .status_arr {background: none !important;} 

Этот код размещает закрепляет ваш статус непосредственно посередине страницы по левому краю, скрывает его за подписью «Статус» и отображает при наведении. 

Второй способ
В отличие от первого случая, этот код требует адаптации при использовании без рецепта «Визитка». 

#status {position: absolute; top:740px; left:1731px; width:250px; height: 20px; background-color: #fff;}
#status em.radius6 {opacity:0;filter:alpha(opacity=0); margin-top: -20px}#status:hover em.radius6 {opacity:1;filter:alpha(opacity=100); z-index: 20; margin-top: -20px; background-color: #fff;}
#status em.radius6 {-moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#status .status_arr {background: url('http://imgin.ru/images/users/doranych/dfae8d128027269bab1efe3128eb83ae.png') no-repeat; background-position: center; margin:0 !important; z-index: 0 !important; border: none !important; width: 250px; height: 20px;}
#status:hover .status_arr {background: none !important;}

Отличается от предыдущего лишь местом расположения элемента. Статус будет находится справа вверху под выпадающей панелью mypage.
в том случае, если вы не используете рецепты «Визитка» необходимо изменить следующие значения
top:740px и left:1731px на top:-260px и left:731px в первой строке кода т.е. у элемента #status.
Обсудить у себя 9
Комментарии (23)
молодец хорошие уроки.
Хотя бывает важной информации не достаёт!..
Чего не хватает?
Дополнительных пояснений т.к. у пользователей может не совпадать информация!
А так же открытых обьяснений куда нужно чего и перед чем встовлять!
... 
Все есть пруфлинк
О не заметил(сори)! Решено, всё норм!
Привет)
Интересная штукенция. Только вот второй вариант не срабатывает.
Пробовал и top left изменить — ни фига)
А если я хочу просто такое выпадающее меню сделать? Я не хочу перемещать статус с своего места(как дали разработчики МайПейдж)!
Тогда как мне быть?! 
Где именно ты хочешь его расположить? какой именно элемент будет вызывать меню?
Ну например с лево в блоге(у тебя с верху такое используется, а я хочу только слево)! Ну скажем отдельный пост для этого напишу(а так я же сказал что не 1-ин фрейм(статус и.т.п.)не хочу переносить)!
Ну вот если напишешь код отдельно, то можно будет и выпадающее делать
Не понял! Поясни ка...
ну вот смотри, если ты сдлеаешь код меню в списках то вполне можно будет добавить динамику
А ну вот такой ответ понял(он более разьесняет предыдущее предложение)!
Ясно! 

Жаль нет скринов, чтобы посмотреть. Приходится всё применять.

у меня статус сверху выпадает)

О, даже сразу и не увидеал) Интересно-интересно)

а ты можешь всю визитку загнать в всплывающее окно?

привет, Каин. я что-то игрался в css со статусом, и он у меня начал пропадать при наведении на него курсора. что делать?

задать такие же свойства css для псевдокласса :hover

а как подписан тот класс, который отвечает за дизайн статуса?
искал #status, но не могу найти.

сам прописал в css
#status {color:#505050;}
#status:hover {color:#505050;}

ничего не поменялось

#status {background-color:#505050;}
#status:hover {background-color:#505050;}

меняется цвет за формой со статусом

.widget a:hover {color: white !important;} вот причина ваших проблем. уберите. это в строке 94 доп.кода

спаибо

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

Войти через социальные сети:

Каин
Каин
Был на сайте никогда
Родился: 9 Июля
admin@unohog.ru
Читателей: 187 Опыт: 0 Карма: 1
Я в клубах
I am Sherlocked Пользователь клуба
Уно Хогвартс Администратор клуба
CSS | Design Пользователь клуба
Web-Grower Модератор клуба
Sherlove Пользователь клуба
Проект "Together" Пользователь клуба
Новичкам MyPage.Ru Модератор клуба
Поддержка кнопки Пользователь клуба
Служба помощи MyPage.Ru Пользователь клуба
Много ARTа не бывает Модератор клуба
Ἔρως - Ἀφροδίτη Пользователь клуба
все 35 Мои друзья