Вынести картинки в отдельный файл CSS и чтобы текст обтекал картинки справа (ровно по середине)

[Drabodan 1]

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 934]

<div>

<div class="kat16"></div>

</div>

а куда вы тут текст пишите? видимо, так?

<div>

<div class="kat16"><a href="ляляля"> Экшт</a></div>

</div>

НО у вас в стилях прописана ширина 54 рх, и картинка такой же ширины, тексту некуда лезть)

[Drabodan 1]

Простите Многоуважаемый, верно я НЕ дописал полностью. (а картинка и у меня ровно сама по себе 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]

.kat1 {

width: 184px; height: 184px; /* <<== не знаю нужные размеры и смотреть лень */

background: url("../js/kat2.gif") no-repeat; padding: 0 0 0 60px; /* 60 это чуть больше ширины картинки */

}

Изменено 30 марта 2012 пользователем Lomot

[Drabodan 1]

Всё равно следующее получается:http://i33.fastpic.ru/big/2012/0331/4b/8c2673ce89cbb80373a1086c477ea54b.png

А размеры картинки зачем смотреть Вам, я много раз сказал, что они ровно 54 на 54

[alex32 934]

Выложите полный код с css того, чего вы делаете. а то так смотреть по картинкам бессмысленно. Вам дали два 100% рабочих варианта, чего вы там чудите это только вам видно, вам так никто не поможет,это гадание на кофейной гуще.

[Drabodan 1]

Я же выкладывал много раз, не ужели здесь код НЕ отображается в сообщениях?

.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]

Задайте к div параметр "line-height: размер в пикселах;"

[Drabodan 1]

ЗДОРОВО!!! Наконец то почти..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]

Прошу прощения!! Опять беда!

Вот как в итоге выходит: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]

Вот как надо оказывается (а то в прошлый раз браузер показывал правильно, а как только перезапустил браузер оказалось, что слово на картинке лежит):

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