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

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

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

CSS трюки

Страница:   1 2 3 4 … 7  

Сообщений 21 страница 40 из 127

1

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2708
  • Уважение: +4085
  • Позитив: +2378
  • Пол: Мужской
  • Последний визит:
    Пн, 18 Ноя 2024 23:40:35

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

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

+4

21

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4738
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57
Deff написал(а):

то изображение ближе к тексту

В ИЕ оно всё равно далеко...

0

22

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51422
  • Уважение: +15369
  • Позитив: +11881
  • Последний визит:
    Вчера 22:40:31
rps написал(а):

В ИЕ оно всё равно далеко...

Да у меня тож подальше и в Ие6 и в Ие7

0

23

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4738
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57
Deff написал(а):

Да у меня тож подальше и в Ие6 и в Ие7

Всё-таки способ Ромыча оказался лучше, признаю.

0

24

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2708
  • Уважение: +4085
  • Позитив: +2378
  • Пол: Мужской
  • Последний визит:
    Пн, 18 Ноя 2024 23:40:35
rps написал(а):

Всё-таки способ Ромыча оказался лучше, признаю.

да ладно вам парни, 2 способа это лучше чем один,
тем более оба на css ;)

0

25

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4738
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57

Romych
Но мой-то всё равно применить нельзя.

0

26

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2708
  • Уважение: +4085
  • Позитив: +2378
  • Пол: Мужской
  • Последний визит:
    Пн, 18 Ноя 2024 23:40:35
Romych написал(а):

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

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

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

тут обнаружил немного извращенский способ, свойство content позволяет в ставить в одно и то же место и 2-3 изображения подряд или слово, символ после изображения,
так что если лень ковыряться с иконкой и оставлять прозрачный хвост справа, то можно вставить и пустую прозрачную картинку 3х3 px. например,
тогда получится требуемый отступ
на примере иконки icq в профиле под аватаром http://forumupload.ru/uploads/000b/89/6b/242-1.png

Код:
<style>
li.pa-icq:before{content:url(http://forumupload.ru/uploads/000b/89/6b/242-1.png)url(http://s59.radikal.ru/i164/1101/b4/c45d9da5ce49.gif);}
</style>

0

27

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4738
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57
Romych написал(а):

свойство content позволяет в ставить в одно и то же место и 2-3 изображения подряд или слово, символ после изображения

А оно КСС 2.1 или КСС 3.0? Если первое, то должно поддерживаться старыми браузерами и, значит, можно попробовать решить проблему наложения нескольких изображений на один элемент...

0

28

  • Автор: Мафика
  • Заслуженный
  • Мафика
  • Зарегистрирован: Чт, 24 Мар 2011
  • Сообщений: 28
  • Уважение: 0
  • Позитив: +2
  • Последний визит:
    Ср, 1 Фев 2012 16:32:12

как иконки ставить в категории я разобралась,а вот как поставить икони в форумы  нет.Подскажите пожалуйста как их поставить.

Пример как на этом форуме  http://i045.radikal.ru/1103/1d/b9f9335b3fb3t.jpg

0

29

  • Автор: Мафика
  • Заслуженный
  • Мафика
  • Зарегистрирован: Чт, 24 Мар 2011
  • Сообщений: 28
  • Уважение: 0
  • Позитив: +2
  • Последний визит:
    Ср, 1 Фев 2012 16:32:12

Ну помогите плиз очень надо.
Что я только не делаю,у меня меняются кнопки (нов.собщ и тд),а мне нужно что бы кроме этих кнопок были ещё и иконочки.Как на  скрине выше.

0

30

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4738
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57

Мафика
Здравствуйте.

Мафика написал(а):

как иконки ставить в категории я разобралась,а вот как поставить икони в форумы  нет.Подскажите пожалуйста как их поставить. Пример как на этом форуме

Если я правильно понял то, что Вы хотите - Администрирование---Форумы---Редактировать---В поле "Описание" вставите код:

Код:
<img src="Адрес изображения" alt="Описание" />

Или, если речь всё-таки про иконки форумов - то таким кодом в ХТМЛ-верх:

Код:
<style type="text/css">
.punbb div.icon {
float: left; 
display: block; 
border-style: none none none none; 
position: relative !important;
height: 50px; 
width: 50px;
}
.punbb td div.tclcon {
margin-left: 50px;
}

Div.icon {
background-image : url(адрес иконки темы без новых сообщений);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(адрес иконки темы с новыми сообщениями);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(адрес иконки выделенной темы);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(адрес иконки закрытой темы);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(адрес иконки переадресации с форума);
background-repeat: no-repeat;
}
</style>

0

31

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51422
  • Уважение: +15369
  • Позитив: +11881
  • Последний визит:
    Вчера 22:40:31

Замена плюса и минуса в Уважении

http://s2.uploads.ru/1UqJY.png

В HTML верх

Код:
<style type="text/css">
.pa-respect a[href*="&v=0&cod"],
.pa-respect a[href*="&v=1&cod"]{
   display:inline-block;
   margin-top:-7px;
}
.pa-respect a[href*="&v=1&cod"] img,
.pa-respect a[href*="&v=0&cod"] img {
  visibility:hidden;
  /*размеры для картинок  +/- */
  height:34px;
  width:34px;
}
.pa-respect a[href*="&v=1&cod"]{
   background:url(http://s3.uploads.ru/cyQa5.png) center 100% no-repeat; /*картинка для +*/
}
.pa-respect a[href*="&v=0&cod"] {
   background:url(http://s2.uploads.ru/ijAu3.png) center  100% no-repeat; /*картинка для  - */
}
</style>

+2

32

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2708
  • Уважение: +4085
  • Позитив: +2378
  • Пол: Мужской
  • Последний визит:
    Пн, 18 Ноя 2024 23:40:35

Иконки в списке видеохостингов

есть идея сделать список доступных видеохостингов в форме ответа визуально более привлекательными
чтоб вместо старого вида:
http://s2.uploads.ru/t/pOKJL.png
получился такой
http://s2.uploads.ru/t/rVSef.png

делаю спрайт с иконками (фавиконами) характерными для видеохостингов (знак вопроса для тех, которые не имеют своего лейбла)
http://forumstatic.ru/files/0012/b1/41/42036.png

далее расписываем каждой иконке своё место вот таким кодом:

Код:
<style type="text/css">
.tipsy-inner {font-size:14px!important;}
#video-host-list a.turn_link {
color: transparent !important;
font-size: 6px;
letter-spacing: -2.5px;
margin-left: 5px;
padding: 9px;
}
a.turn_link[href$="#youtube.com"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll 5px 3px transparent;}  
a.turn_link[href$="#video.yandex.ru"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -16px 3px transparent;}  
a.turn_link[href$="#video.mail.ru"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -37px 3px transparent;}  
a.turn_link[href$="#rutube.ru"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -58px 3px transparent;}  
a.turn_link[href$="#vkontakte.ru"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -76px 3px transparent;}  
a.turn_link[href$="#smotri.com"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -96px 3px transparent;}  
a.turn_link[href$="#ivi.ru"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -118px 3px transparent;}  
a.turn_link[href$="#myvi.ru"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -136px 3px transparent;}  
a.turn_link[href$="#zoomby.ru"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -156px 3px transparent;}  
a.turn_link[href$="#video.bigmir.net"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -176px 3px transparent;} 
a.turn_link[href$="#play.ukr.net"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -328px 3px transparent;}  
a.turn_link[href$="#video.i.ua"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -369px 3px transparent;}  
a.turn_link[href$="#video.google.com"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -194px 3px transparent;}  
a.turn_link[href$="#vimeo.com"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -214px 3px transparent;}  
a.turn_link[href$="#metacafe.com"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -233px 3px transparent;}  
a.turn_link[href$="#vids.myspace.com"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -254px 3px transparent;}  
a.turn_link[href$="#dailymotion.com"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -274px 3px transparent;}  
a.turn_link[href$="#facebook.com"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -292px 3px transparent;}  
a.turn_link[href$="#24video.net"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -312px 3px transparent;}  
a.turn_link[href$="#ustream.tv"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -328px 3px transparent;}  
a.turn_link[href$="#kiwi.kz"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -348px 3px transparent;}  
a.turn_link[href$="#1tv.ru"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -388px 3px transparent;}  
a.turn_link[href$="#ntv.ru"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -409px 3px transparent;}  
a.turn_link[href$="#rutv.ru"] {background: url("http://forumstatic.ru/files/0012/b1/41/42036.png") no-repeat scroll -328px 3px transparent;}
</style>

и совсем для красоты добавляем всплывающую подсказку с названием хостинга:

Код:
<script type="text/javascript">
$('a.turn_link').tipsy({live:true, gravity:'s', fade : true});
$('#video-host-list a.turn_link').map(function () {
var label=$(this).text();
$(this).attr('title',label);
});
</script>

p.s.
спрайт с иконками я бы сделал крупнее (хотя бы 24х24), но к сожалению не нашёл подходящего размера, особенно отечественных видеохостингов,
может быть кто-нибудь займётся?

p.p.s.
коды выдаваемые некоторыми видеохостингами из списка изменились, поэтому неизбежно на сервисе будут соответствующие правки, не исключено, что вид списка тоже изменится, так что предлагайте ваши варианты оформления ;)

+4

33

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7390
  • Уважение: +5876
  • Позитив: +6482
  • Пол: Мужской
  • Последний визит:
    Вчера 21:12:40
Romych написал(а):

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

А так подойдет:
http://s2.uploads.ru/t/JSOCt.png
Поправил:
http://s2.uploads.ru/t/TXYH0.gif
Или:
http://s2.uploads.ru/t/qimxL.gif

Отредактировано kolobdur74 (Вт, 11 Июн 2013 22:14:12)

+1

34

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2708
  • Уважение: +4085
  • Позитив: +2378
  • Пол: Мужской
  • Последний визит:
    Пн, 18 Ноя 2024 23:40:35
kolobdur74 написал(а):

А так подойдет:

фон за иконками должен быть прозрачным, а сами они соответственно чётко прорисованными (желательно)

0

35

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2708
  • Уважение: +4085
  • Позитив: +2378
  • Пол: Мужской
  • Последний визит:
    Пн, 18 Ноя 2024 23:40:35
Romych написал(а):

Поправил:

скопировал твой исправленный вариант, но подожду ещё варианты от других желающих )
кстати, спрайт можно замутить и по сложнее, сделать например все иконки серыми, а при наведении курсора цветными, подобие такого

http://s2.uploads.ru/t/sl6oa.png

0

36

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7390
  • Уважение: +5876
  • Позитив: +6482
  • Пол: Мужской
  • Последний визит:
    Вчера 21:12:40
Romych написал(а):

скопировал твой исправленный вариант

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

Отредактировано kolobdur74 (Вт, 11 Июн 2013 22:32:50)

0

37

  • Автор: ruslan_as
  • Заслуженный
  • Зарегистрирован: Пн, 21 Ноя 2011
  • Сообщений: 815
  • Уважение: +52
  • Позитив: +329
  • Последний визит:
    Чт, 5 Янв 2017 11:30:27

Romych
А сильно будут нагружать форум?  у нас многие с мобилок- часто отключают картинки(

0

38

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51422
  • Уважение: +15369
  • Позитив: +11881
  • Последний визит:
    Вчера 22:40:31
kolobdur74 написал(а):

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

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

Отредактировано Deff (Ср, 12 Июн 2013 00:07:41)

0

39

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7390
  • Уважение: +5876
  • Позитив: +6482
  • Пол: Мужской
  • Последний визит:
    Вчера 21:12:40
ruslan_as написал(а):

А сильно будут нагружать форум?  у нас многие с мобилок- часто отключают картинки(

Не сильно - картинка весит 5-6 килобайт от силы до 10..

0

40

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2708
  • Уважение: +4085
  • Позитив: +2378
  • Пол: Мужской
  • Последний визит:
    Пн, 18 Ноя 2024 23:40:35
kolobdur74 написал(а):

Не сильно - картинка весит 5-6 килобайт от силы до 10..

всё верно, и при желании можно ещё ужать без потери качества - http://tinypng.org/

+2

Страница:   1 2 3 4 … 7