Зверь-чародей
1. Как заменить надписи "Музыка", "Настроение", "Тэги" на картинки? Как изменить текст надписи "Музыка"?
2. Как заменить ссылки "Комментировать" или "Мой дневник" на картинки?Как изменить текст ссылок в меню?
Вообщем то текст поменять нельзя. Но можно его скрыть и поставить на его место картинку.
Громадным минусом такого метода является затруднение навигации при отключенных картинках.
Я расскажу идею - с остальным разбирайтесь сами ) Вопросы вида А как сделать то же самое для "Все дневники"? я игнорирую.
Рассматриваю на примере замены ссылки "Мой дневник" и подмены надписи "Музыка" на картинку.
Берем картинку. Например такую
Это картинка с новым текстом ссылки "Мой дневник" )
Код I:
li#myDiaryLink {background: url('/userdir/9/3/1/2/93120/19270514.gif') 0px 3px no-repeat;}
li#myDiaryLink a{ opacity:0.0;filter:alpha(opacity=1) !important;-moz-opacity:0.0;letter-spacing: 3.1px;zoom:1;position:relative;}
Первая строка кода ставит фон на элемент меню. Меняя выделенные значения добиваемся точного позиционирования картинки.
Вторая строка прячет оригинальный текст ссылки, но саму ссылку не убирает. Поэтому она остается рабочей )
С помощью подбора значения letter-spacing надо добиться того, чтобы ширина картинки и ссылки совпадала. position:relative; и zoom:1; нужен для IE - остальные браузеры справляются и без таких подпорок.
Код II (by Tex)
#myFavLink A {width:40px; height:25px; line-height: 3000px; overflow:hidden; background: #eee url('/userdir/0/0/0/0/0000/000000.gif') 5px 4px no-repeat;}
Этот проще )
С надписью "Музыка" гораздо проще, т.к. не надо сохранять функцианальность ссылок.
Просто берем картинку
и код для нее:
.atMusic em { font-size: 0 px; background: url('/userdir/4/7/4/8/474825/19198062.gif') no-repeat 0; padding-left: 70px !important; }
.atMusic em SPAN { position: absolute; left:-1000px;}
где 70px это ширина картинки.
Как вариант можно нарисовать меню и назначить фоном для целого блока, а потом разнести невидимые ссылки в нужные места
З.Ы. Как всегда картинки берем только из своей БИ и вставляем по аналогии.
2. Как заменить ссылки "Комментировать" или "Мой дневник" на картинки?Как изменить текст ссылок в меню?
Вообщем то текст поменять нельзя. Но можно его скрыть и поставить на его место картинку.
Громадным минусом такого метода является затруднение навигации при отключенных картинках.
Я расскажу идею - с остальным разбирайтесь сами ) Вопросы вида А как сделать то же самое для "Все дневники"? я игнорирую.
Рассматриваю на примере замены ссылки "Мой дневник" и подмены надписи "Музыка" на картинку.
Берем картинку. Например такую
Это картинка с новым текстом ссылки "Мой дневник" )
Код I:
li#myDiaryLink {background: url('/userdir/9/3/1/2/93120/19270514.gif') 0px 3px no-repeat;}
li#myDiaryLink a{ opacity:0.0;filter:alpha(opacity=1) !important;-moz-opacity:0.0;letter-spacing: 3.1px;zoom:1;position:relative;}
Первая строка кода ставит фон на элемент меню. Меняя выделенные значения добиваемся точного позиционирования картинки.
Вторая строка прячет оригинальный текст ссылки, но саму ссылку не убирает. Поэтому она остается рабочей )
С помощью подбора значения letter-spacing надо добиться того, чтобы ширина картинки и ссылки совпадала. position:relative; и zoom:1; нужен для IE - остальные браузеры справляются и без таких подпорок.
Код II (by Tex)
#myFavLink A {width:40px; height:25px; line-height: 3000px; overflow:hidden; background: #eee url('/userdir/0/0/0/0/0000/000000.gif') 5px 4px no-repeat;}
Этот проще )
С надписью "Музыка" гораздо проще, т.к. не надо сохранять функцианальность ссылок.
Просто берем картинку
и код для нее:
.atMusic em { font-size: 0 px; background: url('/userdir/4/7/4/8/474825/19198062.gif') no-repeat 0; padding-left: 70px !important; }
.atMusic em SPAN { position: absolute; left:-1000px;}
где 70px это ширина картинки.
Как вариант можно нарисовать меню и назначить фоном для целого блока, а потом разнести невидимые ссылки в нужные места
З.Ы. Как всегда картинки берем только из своей БИ и вставляем по аналогии.
-
-
11.05.2007 в 13:52-
-
11.05.2007 в 14:00кто вам сказал вставлять тэг IMG в код? посмотрите на пример и сделайте так же.
-
-
11.05.2007 в 14:02ПАСИБА)
-
-
11.05.2007 в 14:58а не легче ли текст ссылок в меню можно поменять этим кодом:
#myDiaryLink A{content:'Home sweet home';}
?
-
-
11.05.2007 в 15:02-
-
11.05.2007 в 15:21~LaDik~ делайте так, как в примере, и всё будет. уберите лишний слэш
-
-
11.05.2007 в 15:25мм, понятно.
ну в любом случае спасибо за полезную информацию
-
-
11.05.2007 в 18:43спасибо!
-
-
11.05.2007 в 19:19-
-
11.05.2007 в 19:30-
-
11.05.2007 в 21:24Не сбивай народ
-
-
11.05.2007 в 22:36вопрос: ведь с "настроением" можно проделать аналогичный фокус? тогда подскажите, пожалуйста, его id: .atMood em, что ли?
-
-
11.05.2007 в 23:03Добавлю )
Хотя с прозрачностью прикольнее ))
-
-
12.05.2007 в 00:33-
-
12.05.2007 в 14:48-
-
12.05.2007 в 18:46-
-
20.05.2007 в 08:19не знаю как прописывается слово "комментировать". почему-то когда пишу #comments ничего не меняется
-
-
20.05.2007 в 12:36(кажется)
-
-
20.05.2007 в 13:17почему-то у меня не работает
-
-
20.05.2007 в 13:36-
-
20.05.2007 в 14:21весь код такой:
#myStatLink{display:none}
#rssLink{display:none}
#upInChart{display:none}
.left #wrapper {width: 1000px; margin: 0 0 0 -500px !important; padding: 0 !important; position: relative; left: 50%;}
.left #side {width: 210px !important; margin: 0 !important;}
.left #page-c {width: 760px !important; padding: 0 !important;}
body.left {padding-left: 10px !important;}
#myFavLink {background: url('/userdir/1/0/0/8/100872/19551374.jpg') no-repeat; padding:0 0 0 35px !important; height:32px;}
#diarySpiritLink {display:none}
#postsArea { overflow: auto; overflow: -moz-scrollbars-vertical; overflow-x: none; overflow-y: auto; height: 840px; }
#page-t .bordered{background: url('/userdir/1/0/0/8/100872/19950127.png') repeat bottom right !
-
-
24.05.2007 в 14:30-
-
24.05.2007 в 14:46как я могу вам помочь если у вас и дневник закрыт и код, который вы вставляете, вы тоже не удосужились показать.
-
-
24.05.2007 в 14:592).atMusic em { font-size: 0 px; background: url('/userdir/4/7/4/8/474825/19198062.gif') no-repeat 0; padding-left: 70px !important; }
.atMusic em SPAN { position: absolute; left:-1000px;} - но код картинки самой другой.. тот что у меня в БИ...
и нИ чи во не получается...(
-
-
24.05.2007 в 15:13тихий ужас.
куча синтаксических ошибок в остальном коде, много дублированных элементов.
разумеется не работает! и не будет пока не всё не исправите.
-
-
24.05.2007 в 15:31можете помочь? - подскажите что не так...
и почему остальные коды с музыкой не получаются..(
.right #page-t { margin-right:210px; }
.right #side { width:200px; margin-left:-200px; }
a:hover,a:active{color:white !important}
body.left{padding-left:10px !important;}
.left #wrapper{width:706px;margin: 0 0 0 -353px !important;padding:0 !important;position:relative;left:50%;//left:49.5%;}
.left #side{width:160px !important;margin:0 !important;}
.left #page-c{width:540px !important;padding:0 !important;}
.right #wrapper{width:706px;margin: 0 0 0 -353px !important;padding:0 !important;position:relative;left:50%;}
#diarySpiritLink {display:none}
body{ background-attachment:fixed; }
#postsArea { overflow: auto; overflow: -moz-scrollbars-vertical; overflow-x: none; overflow-y: auto; height: 840px; }
#page-t .bordered{background: repeat bottom right ! #myStatLink{display:none}
#rssLink{display:none}
#upInChart{display:none}
-
-
24.05.2007 в 15:36я укажу на самую грубую ошибку:
#page-t .bordered{background: repeat bottom right ! #myStatLink{display:none}
здесь нет закрывающей скобки. весь код после этой строки не работает.
надо
#page-t .bordered{background: url('кудакартинкуподевали?') repeat bottom right !important;}
#myStatLink{display:none;}
-
-
25.05.2007 в 18:20.comments {background: url('/userdir/3/6/2/7/362780/20171147.jpg') 15px -3px no-repeat; padding-left: 35px !important; width: 100px !important; }
.comments a { filter: alpha(opacity=1); -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; letter-spacing: 6.5px; zoom:1; position: relative; }
а если писать так, то ссылки с количеством кооментариев видны, но IE не понимает такой код:
.comments {background: url('/userdir/3/6/2/7/362780/20171147.jpg') 15px -3px no-repeat; padding-left: 35px !important; width: 100px !important; }
.comments a:first-child { filter: alpha(opacity=1); -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; letter-spacing: 6.5px; zoom:1; position: relative; }
что можно сделать?
-
-
25.05.2007 в 18:41IE это пакость.
-
-
24.07.2007 в 19:24дайте мне код чтобы вместо "музыка" была эта картинка...