Данная тема призвана помочь в решении специфических и актуальных задач для Вашего форума с помощью css методов
Дополнения к текущей теме: Интересные решения для форумов
CSS трюки
Сообщений 1 страница 20 из 126
Поделиться1Вт, 14 Дек 2010 00:15:54
- drumman
- Зарегистрирован: Вт, 16 Дек 2008
- Сообщений: 2704
- Уважение: +4063
- Позитив: +2368
- Пол: Мужской
- Последний визит:
Вчера 10:36:31
Поделиться2Вт, 14 Дек 2010 00:33:22
- drumman
- Зарегистрирован: Вт, 16 Дек 2008
- Сообщений: 2704
- Уважение: +4063
- Позитив: +2368
- Пол: Мужской
- Последний визит:
Вчера 10:36:31
давно поднималась и неоднократно обсуждалась тема
как присвоить каждой категории форума отдельную тематическую иконку-изображение
было уже найдено как минимум 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(адрес изображения);}
единственный минус у такого метода, это что не удалось пока осуществить отступ между изображением и названием категории
Поделиться3Вт, 14 Дек 2010 00:39:12
- Тутошний...
- Зарегистрирован: Ср, 16 Июн 2010
- Сообщений: 51112
- Уважение: +15195
- Позитив: +11566
- Последний визит:
Сегодня 21:57:05
Romych написал(а):
ну, всё отлично, а главное метод кроссбраузерный
Ну для рисунков просто уши побольше оставлять, в счёт отступа
Отредактировано Deff (Вт, 14 Дек 2010 00:39:51)
Поделиться4Вт, 14 Дек 2010 01:13:35
- drumman
- Зарегистрирован: Вт, 16 Дек 2008
- Сообщений: 2704
- Уважение: +4063
- Позитив: +2368
- Пол: Мужской
- Последний визит:
Вчера 10:36:31
Deff написал(а):
Ну для рисунков просто уши побольше оставлять, в счёт отступа
ну, в общем то да, особенно отступ справа
Поделиться5Вт, 14 Дек 2010 01:20:23
- drumman
- Зарегистрирован: Вт, 16 Дек 2008
- Сообщений: 2704
- Уважение: +4063
- Позитив: +2368
- Пол: Мужской
- Последний визит:
Вчера 10:36:31
тут вдогонку ещё к этому методу пришёл
ещё один момент с добавлением иконки,
только теперь в профиле, в строке где некоторые пользователи указывают номер сего icq
запросто можно добавить иконку - 
Иконка icq в профиле (css)
тоже в html-верх
<style>
li.pa-icq:before{content:url(http://forumupload.ru/uploads/000b/89/6b/242-1.png);}
</style>
лучше конечно все иконки загружать к себе на форум и уже оттуда использовать
Поделиться6Вт, 14 Дек 2010 18:15:11
- Стремясь к новому...
- Зарегистрирован: Вс, 12 Окт 2008
- Сообщений: 22652
- Уважение: +4738
- Позитив: +3431
- Пол: Мужской
- Предупреждения: ‡ 1. 2. 3. ... 10!
- Последний визит:
Вс, 14 Мар 2021 21:42:57
Romych
Позволю себе несколько замечаний.
1. Псевдоэлементы не поддерживаются многими старыми версиями браузеров. Так, ИЕ 6 и ИЕ7, Мозила 2, Опера 9 и так далее не поймут, что такое :before.
2. #pun-category1 - я тебе уже как-то рассказывал, что при скрытии одной категории меняется порядок всех остальных. Поэтому иконки сдвинутся. Я бы не стал делать подобным образом.
Romych написал(а):
тут вдогонку ещё к этому методу пришёл ещё один момент с добавлением иконки,только теперь в профиле, в строке где некоторые пользователи указывают номер сего icqзапросто можно добавить иконку -
3. А вот тут, учитывая, что в профиле все пункты являются списком, я бы предложил вместо псевдоэлементов сделать маркеры-изображения (как написал в соседней теме). Зная, что каждый пункт имеет свой уникальный класс, можно создать маленькие иконочки для каждого li, при этом этот вариант получился бы кроссбраузерным, даже со старыми версиями.
Поделиться7Вт, 14 Дек 2010 20:07:26
- drumman
- Зарегистрирован: Вт, 16 Дек 2008
- Сообщений: 2704
- Уважение: +4063
- Позитив: +2368
- Пол: Мужской
- Последний визит:
Вчера 10:36:31
rps написал(а):
Псевдоэлементы не поддерживаются многими старыми версиями браузеров. Так, ИЕ 6 и ИЕ7, Мозила 2, Опера 9
давно пора им помахать ручкой,
хотя не все делают, почему то
rps написал(а):
(как написал в соседней теме)
это в какой?
Поделиться8Ср, 15 Дек 2010 16:54:22
- Стремясь к новому...
- Зарегистрирован: Вс, 12 Окт 2008
- Сообщений: 22652
- Уважение: +4738
- Позитив: +3431
- Пол: Мужской
- Предупреждения: ‡ 1. 2. 3. ... 10!
- Последний визит:
Вс, 14 Мар 2021 21:42:57
Romych написал(а):
давно пора им помахать ручкой,хотя не все делают, почему то
Да, к сожалению, на устаревших версиях, при этом не только ИЕ, сидит достаточное количество народа.
Romych написал(а):
это в какой?
Да в общих вопросах, но не суть важно, дам ссылку на учебник: Это интересно.
Поделиться9Ср, 15 Дек 2010 20:08:14
- drumman
- Зарегистрирован: Вт, 16 Дек 2008
- Сообщений: 2704
- Уважение: +4063
- Позитив: +2368
- Пол: Мужской
- Последний визит:
Вчера 10:36:31
rps написал(а):
Да в общих вопросах, но не суть важно, дам ссылку на учебник: Это интересно.
ну, как вариант тоже интересный
Поделиться10Сб, 18 Дек 2010 16:06:25
- drumman
- Зарегистрирован: Вт, 16 Дек 2008
- Сообщений: 2704
- Уважение: +4063
- Позитив: +2368
- Пол: Мужской
- Последний визит:
Вчера 10:36:31
rps написал(а):
А вот тут, учитывая, что в профиле все пункты являются списком, я бы предложил вместо псевдоэлементов сделать маркеры-изображения (как написал в соседней теме). Зная, что каждый пункт имеет свой уникальный класс, можно создать маленькие иконочки для каждого li, при этом этот вариант получился бы кроссбраузерным, даже со старыми версиями.
rps
попробовал я использовать list-style-image, для добавления иконки как ты говорил, что-то не катит
ul li.pa-icq {list-style-image:url(адрес картинки);}
ты сам пробовал?
Поделиться11Сб, 18 Дек 2010 16:23:48
- Стремясь к новому...
- Зарегистрирован: Вс, 12 Окт 2008
- Сообщений: 22652
- Уважение: +4738
- Позитив: +3431
- Пол: Мужской
- Предупреждения: ‡ 1. 2. 3. ... 10!
- Последний визит:
Вс, 14 Мар 2021 21:42:57
Romych написал(а):
ты сам пробовал?
Нет, а что там такое?
Поделиться12Сб, 18 Дек 2010 18:54:51
- Тутошний...
- Зарегистрирован: Ср, 16 Июн 2010
- Сообщений: 51112
- Уважение: +15195
- Позитив: +11566
- Последний визит:
Сегодня 21:57:05
Romych А скриншот можешь дать куда ставил "?( мну тож попробует ...
Отредактировано Deff (Сб, 18 Дек 2010 18:55:12)
Поделиться13Сб, 18 Дек 2010 19:19:11
- drumman
- Зарегистрирован: Вт, 16 Дек 2008
- Сообщений: 2704
- Уважение: +4063
- Позитив: +2368
- Пол: Мужской
- Последний визит:
Вчера 10:36:31
rps написал(а):
Нет, а что там такое?
да что-то ни один браузер так и не решил воспроизвести желаемое
а вот с псевдоклассами :before и :after проблем нет
пусть тебя не смущает слово псевдо все последние версии браузеров успешно с ними работают
кстати, о птичках
вот ещё пример работы с псевдоклассами,
только на этот раз :first-child и :last-child
был тут как то давно выложен скрипт заменявший + и - в уважении под подписью на картинки
например на такие 
дык вот это в 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 было бы не реализовать
Поделиться14Сб, 18 Дек 2010 19:20:49
- drumman
- Зарегистрирован: Вт, 16 Дек 2008
- Сообщений: 2704
- Уважение: +4063
- Позитив: +2368
- Пол: Мужской
- Последний визит:
Вчера 10:36:31
Deff написал(а):
Romych А скриншот можешь дать куда ставил "?( мну тож попробует ...
в 11 посте код,
только картинку вставь свою
p.s. и сравни потом с кодом из 6 поста
Отредактировано Romych (Сб, 18 Дек 2010 19:22:50)
Поделиться15Сб, 18 Дек 2010 21:01:48
- Тутошний...
- Зарегистрирован: Ср, 16 Июн 2010
- Сообщений: 51112
- Уважение: +15195
- Позитив: +11566
- Последний визит:
Сегодня 21:57:05
Romych написал(а):
в 11 посте код,
Дык поскольку 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)
Поделиться16Сб, 18 Дек 2010 21:36:33
- drumman
- Зарегистрирован: Вт, 16 Дек 2008
- Сообщений: 2704
- Уважение: +4063
- Позитив: +2368
- Пол: Мужской
- Последний визит:
Вчера 10:36:31
не парни,
это какой-то полтергейст 
,
как только начинаю применять
li.pa-icq {
list-style: square inside;
list-style-image:url(адрес картинки);
}
в своём стиле (у меня на форум собственный стиль), то изображение моментально исчезает
Поделиться17Сб, 18 Дек 2010 22:59:05
- Тутошний...
- Зарегистрирован: Ср, 16 Июн 2010
- Сообщений: 51112
- Уважение: +15195
- Позитив: +11566
- Последний визит:
Сегодня 21:57:05
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)
Поделиться18Вс, 19 Дек 2010 00:08:41
- Стремясь к новому...
- Зарегистрирован: Вс, 12 Окт 2008
- Сообщений: 22652
- Уважение: +4738
- Позитив: +3431
- Пол: Мужской
- Предупреждения: ‡ 1. 2. 3. ... 10!
- Последний визит:
Вс, 14 Мар 2021 21:42:57
Romych
Я КСС наизусть помню, можешь не рассказывать.
Поделиться19Вс, 19 Дек 2010 00:14:52
- Стремясь к новому...
- Зарегистрирован: Вс, 12 Окт 2008
- Сообщений: 22652
- Уважение: +4738
- Позитив: +3431
- Пол: Мужской
- Предупреждения: ‡ 1. 2. 3. ... 10!
- Последний визит:
Вс, 14 Мар 2021 21:42:57
Romych
Вот, иконка появилас:
Код:
<style type="text/css">
li.pa-icq{
list-style-image: url(http://forumupload.ru/uploads/000b/89/6b/242-1.png) !important;
}
</style>И через стиль пробовал - тоже работает. Правдо расстояние от неё до текста великовато будет...
Поделиться20Вс, 19 Дек 2010 01:44:42
- Тутошний...
- Зарегистрирован: Ср, 16 Июн 2010
- Сообщений: 51112
- Уважение: +15195
- Позитив: +11566
- Последний визит:
Сегодня 21:57:05
rps Вот если делаешь вначале list-style: square inside;
то изображение ближе к тексту,- а если сразу, без этого предварительного кода, - оно ставицо как outside (на данном форуме (на ЕТП
Отредактировано Deff (Вс, 19 Дек 2010 01:45:26)