Invisible Man сокращай отступы для первых пяти на 7 пиксел с обоих сторон
navindex
navuserlist
navextra1
navrules
navsearch
Отредактировано Deff (Вт, 14 Дек 2010 13:09:00)
Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Корзина » Оформления меню навигации главных кнопок форума
Invisible Man сокращай отступы для первых пяти на 7 пиксел с обоих сторон
navindex
navuserlist
navextra1
navrules
navsearch
Отредактировано Deff (Вт, 14 Дек 2010 13:09:00)
не рабочая http://onserial-letay-16.ru/uploads/000 … 5012-2.gif
Вот так работает наш сервер (картинка есть и ссылка не битая..)
Для
navuserlist
navextra1
еще на 5 уменьшить(для navextra1 можно чуть больше
для navrules на 2 увелич с обеих
Отредактировано Deff (Вт, 14 Дек 2010 13:20:39)
Deff
Не меняца не че
Invisible Man для > http://serialtop.topbb.ru/ Зачит ошибки :
1. я ж грил a:hover не трогай про padding
2. делай рисунки надписей сейчас влотную к левому боку,(может даж стоит их делать на прозрачке - поставил белый фон в меню
/* Свои иконки в навигации сss(ом) плюс доп иконки*/ /* ============================================== */ #pun-navlinks .container{ background-color: #fff !important; height: 25px !important; padding: 5px 0 16px 0 !important; } #pun-navlinks li { background-color: transparent !important; } #pun-navlinks li a span { font-size:0px!important; visibility:hidden!important; } #pun-navlinks li a { border-style: none !important; padding-top: autopx!important; padding-bottom: 30px !important; margin: 0 -34px; text-decoration: none; } #navindex a { background: url(5010-100.png) no-repeat left center !important; padding-right:120px !important; } #navuserlist a { background: url(5011-100.png) no-repeat left center !important; padding-right:129px !important; } #navrules a { background: url(5013-100.png) no-repeat left center !important; padding-right:130px !important; } #navrules a:hover { background: url(5013-200.png) no-repeat left center !important; } #navsearch a { background: url(5014-100.png) no-repeat left center !important; padding-right:130px !important; } #navprofile a{ background: url(5015-100.png) no-repeat left center !important; padding-right:100px !important; } #navpm a{ background: url(5016-100.png) no-repeat left center !important; padding-right:130px !important; } #navadmin a{ background: url(5017-100.png) no-repeat left center !important; padding-right:130px !important; } #navregister a{ background: url(5018-100.png) no-repeat left center !important; padding-right:140px !important; } #navlogin a{ background: url(5019-100.png) no-repeat left center !important; padding-right:160px !important; } #navlogout a{ background: url(5020-100.png) no-repeat left center !important; padding-right:130px !important; } #navextra1 a{ background: url(5012-100.png) no-repeat left center !important; padding-right:120px !important; } #navextra2 a{ background: url(4435-100.png) no-repeat left center !important; padding-right:130px !important; } #navextra3 a{ background: url(4437-100.png) no-repeat left center !important; padding-right:130px !important; } #navextra4 a{ background: url(4436-100.png) no-repeat left center !important; padding-right:130px !important; } #navsearch a:hover { background: url(5014-200.png) no-repeat left center !important; } #navuserlist a:hover { background: url(5011-200.png) no-repeat left center !important; } #navindex a:hover { background: url(5010-200.png) no-repeat left center !important; } #navprofile a:hover{ background: url(5015-200.png) no-repeat left center !important; } #navpm a:hover{ background: url(5016-200.png) no-repeat left center !important; } #navadmin a:hover{ background: url(5017-200.png) no-repeat left center !important; } #navregister a:hover{ background: url(5018-200.png) no-repeat left center !important; } #navlogin a:hover{ background: url(5019-200.png) no-repeat left center !important; } #navlogout a:hover{ background: url(5020-200.png) no-repeat left center !important; } #navextra1 a:hover{ background: url(5012-200.png) no-repeat left center !important; } #navextra2 a:hover{ background: url(4435-200.png) no-repeat left center !important; } #navextra3 a:hover{ background: url(4437-200.png) no-repeat left center !important; } #navextra4 a:hover{ background: url(4436-200.png) no-repeat left center !important; }
!Внимание -Ссылки поменяй в коде на свои ( у меня ссылки на картинки взяты с виртуалки
Отредактировано Deff (Вт, 14 Дек 2010 16:01:21)
Вот всё-таки, чем был хорош Яваскрипт-вариант, так это то, что не нужно было подгонять изображения под меню, ибо они добавлялись вовнутрь самих ссылок, а не фоном.
rps Cогласен, поэтому самый удобный компромисс отдельная табличка с меню с абсолютным позиционированием и со всякими выпадениями и прочее, плюс скрипт с тремя IF на группу пользователей -включающий(обычно для всех скрытые) дополнительные пункты меню
Deff
Спасибо. Поставил но не то все ровно... (надоел уже я чувствую)
rps
Думаю теперь согласится с вами...вернусь на исходную Бывает что картинки не дозогружаются....
Invisible Man Сделай красивые кнопки для всех позиций -дай ссылки, - попробуем табличкой
(А для предыдущего равнял ток первые пять(остальные не видны гостю -те проще -цифра одна
и опять по предыдущему
1- выровняй шрифт по левому краю в картинках и обрежь (ну пиксел -два до буквы слево - справо не критично можь и пять и 10
2 - может шрифт имеет смысл на прозрачке - внизу фон белый поставил
<noscript> Тут скрипты </noscript>
Отредактировано Deff (Вт, 14 Дек 2010 21:57:06)
Deff
Ха даж теперь скриптом не получается..расстояние остается между ними... да и пока приживается что ли скрипт показывает старые иконки, хотя в css их уже нет... А что за табличка, пример можешь дать? или была такая мысля вообще перенести эти кнопки в бокавую панель...
написал же что нет в css у мня не че, обманывать бы не стал...
Отредактировано Invisible Man (Вт, 14 Дек 2010 21:53:50)
Invisible Man да пофигу какая -хоть в боковую - как удобно так и поставим - главное кнопки прорисованные(до наведения и при) и эскиз как ставить примерно
да и пока приживается что ли скрипт показывает старые иконки, хотя в css их уже нет..
Эт кукисы и Историю чистит нужно - у мну аналогично - даж поперся проверять сss
Почистил -сраз перестало глючить
Отредактировано Deff (Вт, 14 Дек 2010 21:56:41)
лавное кнопки прорисованные(до наведения и при) и эскиз как ставить примерно
Хорошо Deff подумаю над этим...
А те кнопки с надписями не подойдут что ли? или они ужасные.....
Отредактировано Invisible Man (Вт, 14 Дек 2010 21:57:28)
Invisible Man Просто в таблице можно всё украсивить и даже если в столбик в сайдбар засунуть
Да и кнопки могут быть посерьезней, - порыскать в гугле - может что понравится, - не, - если хочешь простые - пожалуйста (но они мало чем отличаются от исходных надписей - там просто шрифт и цвет поменять будет тоже самое
( просто даж текущие иконки симпатичней и в табличке они уже жацо не будут
Можно и с текущими
Отредактировано Deff (Вт, 14 Дек 2010 22:59:23)
и даже если в столбик в сайдбар засунуть
Что то типа этого.
Могут быть и посерьезней - порыскать в гугле - может что понравится,
Ну если честно простые которые я сделал как раз под фон категорий, чтоб уж в дизайн как то вписывались. Не спорю что которые сейчас стоят красивые, но очень уж как новогодняя елка не к селу не к городу...
но они мало чем отличаются от исходных надписей - там просто шрифт и цвет поменять будет тоже самое
Ну там не сделаешь чтоб менялся цвет был белый, при наведение серый...
Добавлено: Чтоб переливались, как на многих сайтах ....как бы строение форума мое чем то напоминает http://www.lostfilm.tv/ вот там у них прикольно сделано меню навигации...
Отредактировано Invisible Man (Вт, 14 Дек 2010 23:06:08)
Ну там не сделаешь чтоб менялся цвет был белый, при наведение серый...
Без проблем - это в ксс прописываецо background-color: к span элемента
http://www.lostfilm.tv/ вот там у них прикольно сделано меню навигации...
background url к тому же span прописываецо при наведении - симпатично - но они ушли от наших проблем путём одинаковости ячеек -(в табличке эти элементы проще делаются
кодом:
<img src='Картинка текущая' onMouseOver="this.src='Картинка при наведении'" onMouseOut="this.src='Картинка текущая'"/>
Deff
Ну если сувать в сайдбар от rps'a то картинки то уже можно подогнать под размер самой большой надписи...
но они ушли от наших проблем путём одинаковости ячеек -(в табличке эти элементы проще делаются
кодом:
Пробывал этот код но только с большими картинками, ужасно работало, на картинки приходилось останавливаться чтоб она поменялась на другую, на лосте работает как то быстро...
И опять же это все будет делаться скриптом? Уже где то слышал высказывание по поводу моего форума что весь в скриптах...долго грузится... так то идей много было, переставить меню навигации, сделать вход и регистрацию в сайдбар таким методом скрин*. но опять же слово скрипт поэтому как то и стремился все делать через css...
Добавлено: дубль 2 прикрепляем изображения
Отредактировано Invisible Man (Ср, 15 Дек 2010 00:02:13)
Пробывал этот код но только с большими картинками, ужасно работало, на картинки приходилось останавливаться чтоб она поменялась на другую, на лосте работает как то быстро...
нинаю вот тут http://hostjs-mybb2011.narod.ru/Kuran_Yuki.htm кнопки "Новости" "Навигация" и "Игровой процесс" поставлены таким кодом ( может сильно объемные картинки были ?
И опять же это все будет делаться скриптом? Уже где то слышал высказывание по поводу моего
Нет, - Все нтml обычный HTML код, кроме коротенького скрипта прямо в меню на включение доп пунктов для юзера и админа, которые по умолчанию будут скрыты...
Про cкрин "входа", лениво переключать мысли на иное, вроде как пока не остыл насчет меню..
Отредактировано Deff (Ср, 15 Дек 2010 08:42:40)
Вы здесь » Единый форум поддержки » Корзина » Оформления меню навигации главных кнопок форума