Drabodan 1 Опубликовано: 30 марта 2012 Рассказать Опубликовано: 30 марта 2012 (изменено) TNT-Torrent.org Здравствуйте Многоуважаемые Вэб Мастера, Посетители и Программисты!!! Извините пожалуйста, что беспокою. Сайт TNT-Torrent.org мне надо меню вынести все картинки через CSS (чтобы размер страницы уменьшить, да и сам хочу) Так вот всё бы хорошо, но уже несколько часов не получается, чтобы было как сейчас: название категории НАПРОТИВ параллельно Картинке в меню. Либо ПОД ней, либо напротив но слишком высоко. ВОт скрин как у меня сейчас (это через HTML это ИДЕАЛ)http://i35.fastpic.r...07013328c37.png вот так и надо!! (вот код этого идеала: <a title="Скачать action торрент" href="/action/"><img src="http://tnt-torrent.org/templates/drabodan/images/kat1.png" align="middle" alt="Скачать торрент игры Экшн" border="0" /></a><a title="Скачать action торрент" href="/action/"><font color="cc6600"><b><span style="padding:0px 10px;">Экшн</span></b><br /><br /></font></a> ) Так вот , а мне надо в CSS вынести. Я сделал для этого файл proba.css и прописал для каждой категории картинки следующее: .kat1 { width: 54px; height: 54px; background-image: url("../js/kat1.gif"); } И наконец в нужном месте шаблона я вставляю вверху <link href="/js/proba.css" rel="stylesheet" type="text/css" media="all" /> и в самом месте меню: <div> <div class="kat16"></div> </div> Где kat16 это картинка в категории (на каждую по цифре), здесь работает но только ПОД и это понятно, не надо смеяться (просто остальные НЕ работают как надо или вообще не работают). Я эксперементировал очень много сегодня. В инете статей начитался. Вобщем не получается у меня чтобы было напротив и на уровне середины. Будъте так Добры помогите пожалуйста разобраться!! Только не путайте, мне не HTML надо ссылку (как у меня сейчас) а чтобы ссылки НЕ было, то есть вынос CSS , вобщем думаю Вы поняли. Надеюсь на Ваше понимание. Заранее Вам Безумно Благодарен!!! Изменено 30 марта 2012 пользователем Pterodaktl Цитата Ссылка на сообщение Поделиться на других сайтах
alex32 942 Опубликовано: 30 марта 2012 Рассказать Опубликовано: 30 марта 2012 <div> <div class="kat16"></div> </div> а куда вы тут текст пишите? видимо, так? <div> <div class="kat16"><a href="ляляля"> Экшт</a></div> </div> НО у вас в стилях прописана ширина 54 рх, и картинка такой же ширины, тексту некуда лезть) Цитата Ссылка на сообщение Поделиться на других сайтах
Drabodan 1 Опубликовано: 30 марта 2012 Рассказать Опубликовано: 30 марта 2012 (изменено) Автор Простите Многоуважаемый, верно я НЕ дописал полностью. (а картинка и у меня ровно сама по себе 54 на 54) <div class="kat1"></div><a title="Скачать action торрент" href="http://tnt-torrent.org/action/"><font color="cc6600"><b><span style="padding:0px 10px;">Аркада</span></b><br /><br /></font></a></div> kat1 это первая картинка (категория Экшен) kat2 вторая..и таких 16 Я вставил как Вы сказали <div> <div class="kat1"><a href="http://tnt-torrent.org/arcade/"> Экшт</a></div> </div> Вот, что вышло http://i33.fastpic.r...0752b03ecfb.png о чём я и говорю, как бы не эксперементировал, ничего не получается. Я писал в Proba.css (здесь все стили .kat картинок этих) .kat1 { width: 184px; height: 184px; background-image: url("../js/kat2.gif"); } И 104 на 54 пробовал..это не работает, ничего не изменилось, слово Экшен всё равно ПОД картинкой. А надо чтобы было в тютелька в тютельку как сейчас на сайте. А если 80 на 54 то вот, что выходит: http://i35.fastpic.ru/big/2012/0330/f6/260596c2c87d609578abce20b9612df6.png Да и потом когда я увеличиваю эти цифры, вот что бывает: http://i35.fastpic.r...f6f8071a02d.png Бывает ещё хуже если высоту много сделать (height) но уже страшно смотрить..скрин не стал делать. Изменено 30 марта 2012 пользователем Pterodaktl Цитата Ссылка на сообщение Поделиться на других сайтах
Lomot 134 Опубликовано: 30 марта 2012 Рассказать Опубликовано: 30 марта 2012 (изменено) .kat1 { width: 184px; height: 184px; /* <<== не знаю нужные размеры и смотреть лень */ background: url("../js/kat2.gif") no-repeat; padding: 0 0 0 60px; /* 60 это чуть больше ширины картинки */ } Изменено 30 марта 2012 пользователем Lomot Цитата Ссылка на сообщение Поделиться на других сайтах
Drabodan 1 Опубликовано: 31 марта 2012 Рассказать Опубликовано: 31 марта 2012 Автор Всё равно следующее получается:http://i33.fastpic.ru/big/2012/0331/4b/8c2673ce89cbb80373a1086c477ea54b.png А размеры картинки зачем смотреть Вам, я много раз сказал, что они ровно 54 на 54 Цитата Ссылка на сообщение Поделиться на других сайтах
alex32 942 Опубликовано: 31 марта 2012 Рассказать Опубликовано: 31 марта 2012 Выложите полный код с css того, чего вы делаете. а то так смотреть по картинкам бессмысленно. Вам дали два 100% рабочих варианта, чего вы там чудите это только вам видно, вам так никто не поможет,это гадание на кофейной гуще. Цитата Ссылка на сообщение Поделиться на других сайтах
Drabodan 1 Опубликовано: 31 марта 2012 Рассказать Опубликовано: 31 марта 2012 Автор Я же выкладывал много раз, не ужели здесь код НЕ отображается в сообщениях? .kat1 { width: 54px; height: 54px; /* <<== не знаю нужные размеры и смотреть лень */ background: url("../js/kat2.gif") no-repeat; padding: 0 0 0 60px; /* 60 это чуть больше ширины картинки */ } Это CSS А это в main.tpl (в меню) <div class="kat1"></div><a title="Скачать arcade торрент" href="http://tnt-torrent.org/arcade/"><font color="cc6600"><b><span style="padding:0px 10px;">Аркада</span></b><br /><br /></font></a></div> Цитата Ссылка на сообщение Поделиться на других сайтах
abasive 41 Опубликовано: 31 марта 2012 Рассказать Опубликовано: 31 марта 2012 Задайте к div параметр "line-height: размер в пикселах;" Цитата Ссылка на сообщение Поделиться на других сайтах
Drabodan 1 Опубликовано: 31 марта 2012 Рассказать Опубликовано: 31 марта 2012 (изменено) Автор ЗДОРОВО!!! Наконец то почти..http://i28.fastpic.ru/big/2012/0401/8b/1d3bdce1d70b738632e0ee281914288b.png Теперь осталось чтобы слово Аркада было ПОСЕРЕДИНЕ, это возможно, ОПУСТИТЬ его? (вот как сейчас у меня сайте, чтобы было ровно по середине, припущено) Ещё раз Благодарен Вам за помощь!!! К примеру в main.tpl в месте меню пишу: <div class="kat1"><div style="line-height: 0.5"></div><a title="Скачать arcade торрент" href="http://tnt-torrent.org/arcade/"><font color="cc6600"><b><span style="padding:0px 10px;">Аркада</span></b><br /><br /></font></a></div> получилось, но надо опустить, чтобы посередине было как я написал выше здесь. Так же пробовал просто писать (http://www.webremesl...css/glava2.html) <div class="kat1"></div><span style="vertical-align: 50%">Экшен</span><br /> вообще ПОД картинкой опять как раньше. Получилось!! <div class="kat1"><div style="height: 14px; line-height: 14px;"></div>Экшен</div><br /> Вот скрин http://i28.fastpic.r...6bae7b28289.png Вот после оформления <div class="kat1"><div style="height: 14px;"></div><font color="cc6600"><b><span style="padding:0px 5px;">Аркада</span></b></div><br /> http://i32.fastpic.r...7b5d9a7faf8.png это для будущих Я (у кого будет такая же трудность, чтобы не мучились) Вернее так чтобы ещё и кликабельная была (ссылка) <div class="kat1"><div style="height: 14px;"></div><a title="Скачать arcade торрент" href="http://tnt-torrent.org/arcade/"><font color="cc6600"><b><span style="padding:0px 5px;">Аркада</span></font></a></b></div><br /> Всем Спасибо!!! Изменено 31 марта 2012 пользователем Pterodaktl Цитата Ссылка на сообщение Поделиться на других сайтах
Drabodan 1 Опубликовано: 31 марта 2012 Рассказать Опубликовано: 31 марта 2012 (изменено) Автор Прошу прощения!! Опять беда! Вот как в итоге выходит:http://i35.fastpic.ru/big/2012/0401/b5/5bdc3b06bb529e42ae825e292db86db5.png В main.tpl следующее (первые пару кат. хватит) <div class="kat1"><div style="height: 14px;"></div><a title="Скачать action торрент" href="http://tnt-torrent.org/action/"><font color="cc6600"><b><span style="padding:0px 5px;">Экшн</span></font></a></b></div><br /> <div class="kat2"><div style="height: 14px;"></div><a title="Скачать arcade торрент" href="http://tnt-torrent.org/arcade/"><font color="cc6600"><b><span style="padding:0px 5px;">Аркада</span></font></a></b></div><br /><br /> <div class="kat3"><div style="height: 14px;"></div><a title="Скачать adventures торрент" href="http://tnt-torrent.org/adventure_game/"><font color="cc6600"><b><span style="padding:0px 5px;">Приключения</span></font></a></b></div><br /><br /> А в css следующее: .kat1 { width: 54px; height: 54px; background-image: url("../js/kat1.gif"); } .kat2 { width: 54px; height: 54px; background-image: url("../js/kat2.gif"); } .kat3 { width: 68px; height: 49px; background-image: url("../js/kat3.gif"); } Выше мне казалось получилось, сорри после перезапуска браузера (Mozilla FireFox) истина была видна. Изменено 31 марта 2012 пользователем Pterodaktl Цитата Ссылка на сообщение Поделиться на других сайтах
Drabodan 1 Опубликовано: 1 апреля 2012 Рассказать Опубликовано: 1 апреля 2012 (изменено) Автор Вот как надо оказывается (а то в прошлый раз браузер показывал правильно, а как только перезапустил браузер оказалось, что слово на картинке лежит): http://i33.fastpic.r...e23c59b0adc.png <div class="kat1"><div style="height: 14px;"></div><a title="Скачать action торрент" href="http://tnt-torrent.org/action/"><font color="cc6600"><b><span style="padding:50px 65px;">Экшн</span></font></a></b></div><br /> А в Css без изменений. .kat1 { width: 184px; height: 54px; background-image: url("../js/kat1.gif"); } Всем Огромное Спасибо за Терпение!! Всем Удачи и Успехов!!! Изменено 1 апреля 2012 пользователем Pterodaktl Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.