Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



CSS трюки

Сообщений 1 страница 20 из 108

1

Данная тема призвана помочь в решении специфических и актуальных задач для Вашего форума с помощью css методов


Дополнения к текущей темеИнтересные решения для форумов

+2

2

давно поднималась и неоднократно обсуждалась тема
как присвоить каждой категории форума отдельную тематическую иконку-изображение
было уже найдено как минимум 3 способа, но все они осуществлялись через js  в теме - http://forum.mybb.ru/viewtopic.php?id=24229

у этих способов есть плюсы и минусы,
существенный минус в том, что если пользователь отключит использование браузером Javascript, то вся прелесть оформления будет невидна

в поисках способа построенного только на css, пришёл пока вот к такому методу:

<style>
#pun-category1 h2 span:before {content:url(адрес изображения);}
#pun-category2 h2 span:before {content:url(адрес изображения);}
#pun-category3 h2 span:before {content:url(адрес изображения);}
#pun-category4 h2 span:before {content:url(адрес изображения);}
</style>

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

по такому же принципу можно разместить иконку в Статистике форума,
добавив ещё одну строку

#pun-stats h2:before {content:url(адрес изображения);}

единственный минус у такого метода, это что не удалось пока осуществить отступ между изображением и названием категории

0

3

Romych написал(а):

ну, всё отлично, а главное метод кроссбраузерный

Ну для рисунков просто уши побольше оставлять, в счёт отступа

Отредактировано Deff (Вт, 14 Дек 2010 00:39:51)

0

4

Deff написал(а):

Ну для рисунков просто уши побольше оставлять, в счёт отступа

ну, в общем то да, особенно отступ справа

0

5

тут вдогонку ещё к этому методу пришёл
ещё один момент с добавлением иконки,
только теперь  в профиле, в строке где некоторые пользователи указывают номер сего icq
запросто можно добавить иконку - http://testing.1bb.ru/uploads/000b/89/6b/242-1.png

Иконка icq в профиле (css)

тоже в html-верх

<style>
li.pa-icq:before{content:url(http://testing.1bb.ru/uploads/000b/89/6b/242-1.png);}
</style>

лучше конечно все иконки загружать к себе на форум и уже оттуда использовать

+1

6

Romych
Позволю себе несколько замечаний.

1. Псевдоэлементы не поддерживаются многими старыми версиями браузеров. Так, ИЕ 6 и ИЕ7, Мозила 2, Опера 9 и так далее не поймут, что такое :before.
2. #pun-category1 - я тебе уже как-то рассказывал, что при скрытии одной категории меняется порядок всех остальных. Поэтому иконки сдвинутся. Я бы не стал делать подобным образом.

Romych написал(а):

тут вдогонку ещё к этому методу пришёл ещё один момент с добавлением иконки,только теперь  в профиле, в строке где некоторые пользователи указывают номер сего icqзапросто можно добавить иконку -

3. А вот тут, учитывая, что в профиле все пункты являются списком, я бы предложил вместо псевдоэлементов сделать маркеры-изображения (как написал в соседней теме). Зная, что каждый пункт имеет свой уникальный класс, можно создать маленькие иконочки для каждого li, при этом этот вариант получился бы кроссбраузерным, даже со старыми версиями.

0

7

rps написал(а):

Псевдоэлементы не поддерживаются многими старыми версиями браузеров. Так, ИЕ 6 и ИЕ7, Мозила 2, Опера 9

давно пора им помахать ручкой,
хотя не все делают, почему то

rps написал(а):

(как написал в соседней теме)

это в какой?

0

8

Romych написал(а):

давно пора им помахать ручкой,хотя не все делают, почему то

Да, к сожалению, на устаревших версиях, при этом не только ИЕ, сидит достаточное количество народа.

Romych написал(а):

это в какой?

Да в общих вопросах, но не суть важно, дам ссылку на учебник: Это интересно.

0

9

rps написал(а):

Да в общих вопросах, но не суть важно, дам ссылку на учебник: Это интересно.

ну, как вариант тоже интересный

0

10

rps написал(а):

А вот тут, учитывая, что в профиле все пункты являются списком, я бы предложил вместо псевдоэлементов сделать маркеры-изображения (как написал в соседней теме). Зная, что каждый пункт имеет свой уникальный класс, можно создать маленькие иконочки для каждого li, при этом этот вариант получился бы кроссбраузерным, даже со старыми версиями.

rps

попробовал я использовать list-style-image, для добавления иконки как ты говорил, что-то не катит

ul  li.pa-icq {list-style-image:url(адрес картинки);}

ты сам пробовал?

0

11

Romych написал(а):

ты сам пробовал?

Нет, а что там такое?

0

12

Romych А  скриншот можешь дать куда ставил "?( мну тож попробует ...

Отредактировано Deff (Сб, 18 Дек 2010 18:55:12)

0

13

rps написал(а):

Нет, а что там такое?

да что-то ни один браузер так и не решил воспроизвести желаемое

а вот с псевдоклассами :before и :after проблем нет
пусть тебя не смущает слово псевдо все последние версии браузеров успешно с ними работают

кстати, о птичках
вот ещё пример работы с псевдоклассами,
только на этот раз :first-child и :last-child

был тут как то давно выложен скрипт заменявший + и - в уважении под подписью на картинки
например на такие http://testing.1bb.ru/uploads/000b/89/6b/244-1.gif http://testing.1bb.ru/uploads/000b/89/6b/244-2.gif
дык вот это в css тоже легко делается

замена + и - в уважении под подписью на изображения (только css)

в html-верх:

<style>
div.post-vote a:first-child {background:url(/uploads/000b/89/6b/244-1.gif); padding-left: 12px; padding-top: 7px;}
div.post-vote a:last-child {background:url(/uploads/000b/89/6b/244-2.gif);padding-right: 16px; padding-top: 7px;}
</style>

правда это не совсем замена, а бэкграунд, но без псевдокласса, такое на css было бы не реализовать

0

14

Deff написал(а):

Romych А  скриншот можешь дать куда ставил "?( мну тож попробует ...

в 11 посте код,
только картинку вставь свою

p.s. и сравни потом с кодом из 6 поста

Отредактировано Romych (Сб, 18 Дек 2010 19:22:50)

0

15

Romych написал(а):

в 11 посте код,

:blush: Дык поскольку icq не общаюсь(не обращаю на неё внимания - поэтому и спросил

Romych
Пахож сначало нужно поставить графический, только потом на его место встает картинка

http://hostjs-mybb2011.narod.ru/list_style_image.htm (в ИЕ6 работает

<style type="text/css">
li.pa-icq {
   list-style: square inside;
   list-style-image:url(http://i053.radikal.ru/0806/7f/8b80a2497566.gif);
}
</style>

Отредактировано Deff (Сб, 18 Дек 2010 21:07:49)

0

16

не парни,
это какой-то полтергейст ;) ,
как только начинаю применять

li.pa-icq {
   list-style: square inside;
   list-style-image:url(адрес картинки);
}

в своём стиле (у меня на форум собственный стиль), то изображение моментально исчезает

0

17

Romych написал(а):

в своём стиле (у меня на форум собственный стиль), то изображение моментально исчезает

...возможно необходимо добавить !important

li.pa-icq {
   list-style: square inside!important;
   list-style-image:url(адрес картинки)!important;
}

- проверил этот код, - на тестовом работает в 4 браузерах

...эффект возможен, если про li есть коды в первом-втором окне стиля, например list-style-type:none (может попробовать данный  css cтавить в  НТML низ  ?

Отредактировано Deff (Сб, 18 Дек 2010 23:07:10)

0

18

Romych
:D
Я КСС наизусть помню, можешь не рассказывать.

0

19

Romych
Вот, иконка появилас:

Код:
<style type="text/css"> 
li.pa-icq{
list-style-image: url(http://testing.1bb.ru/uploads/000b/89/6b/242-1.png) !important;
}
</style>

И через стиль пробовал - тоже работает. Правдо расстояние от неё до текста великовато будет...

0

20

rps Вот если делаешь вначале    list-style: square inside;
то изображение ближе к тексту,- а если сразу, без этого предварительного кода, - оно ставицо как outside (на данном форуме (на ЕТП

Отредактировано Deff (Вс, 19 Дек 2010 01:45:26)

0