Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Вопрос по теме ... » Как сделать стандартные смайлики в три колонки? (Решение на CSS и JavaScript. Подменяем стандартные смайлы)
Как сделать стандартные смайлики в три колонки?
Дата: Четверг, 13.12.2012, 23:25 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


Можешь как последнему чайнику подсказать где именно? Там трижды назначаются величины.
Я ведь с последнего посещения твоего сайта своим, как админ, и не занимался. Не до того было
Code
<cmd p="content"><![CDATA[<style type="text/css">#stSmailTb{width:300px!important;margin:0 auto;}#stSmailTb tr{width:100px!important;float:left;clear:right;height:30px;}#stSmailTb tr td{width:50px!important;height:30px;vertical-align:middle;}</style><table id="stSmailTb" border="0" cellspacing="0" cellpadding="2">

Правильно понимаю, что 300 трогать сначала не следует, а все width 100 и 50 и height 30 поменять на max-...: N px
?

Добавлено (13.12.2012, 23:25)
---------------------------------------------
Ну вот.
Со старту у меня началось:
В мозиле, в хроме, в опере файл http://www.s-kh.ru/index/35-1- сразу открывается.
На открывающейся страничке первой строка:
С этим XML-файлом не связана ни одна таблица стилей. Ниже показано дерево элементов.
Как скачать-то его?
Или я отупел окончательно?)


Сообщение отредактировал SKh - Четверг, 13.12.2012, 23:28
 
Дата: Четверг, 13.12.2012, 23:31 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


SKh,
Можешь как последнему чайнику подсказать где именно? Там трижды назначаются величины.

Естественно:
1. На всю таблицу - ID == #stSmailTb
2. На строку - tr
3. На ячейку - td

Естественно, идем от конца.
Если ячейка в ширину 50 px и в строке 2 ячейки (td) .. строка (tr) == 100 px, в таблице (stSmailTb) 3 колонки - строки (tr), соответственно, таблица 300 px.
Чем шире отдельная ячейка, тем больше величины 1 и 2.


 
Дата: Пятница, 14.12.2012, 00:02 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


Я правильно понял?
Для начала так:
Code
<cmd p="content"><![CDATA[<style type="text/css">#stSmailTb{width:300px!important;margin:0 auto;}#stSmailTb tr{max-width: N px!important;float:left;clear:right;max-height: N px;}#stSmailTb tr td{max-width: N px!important;max-height: N px;vertical-align:middle;}</style><table id="stSmailTb" border="0" cellspacing="0" cellpadding="2">

А уже в зависимости от того, как получится визуально, регулировать размер окна?
А правильно заменил? Проверь, пожалуйста.
Боюсь, накосорезил, как всегда...;)
А если и попал, случайно, то проблема как файл скачать?
Или можно тупо скопировать содержимое и уложить в блокнот?
Сделать все по инструкции и сохранить в блокноте с расширением .xml и в кодировке UTF-8?


Сообщение отредактировал SKh - Пятница, 14.12.2012, 00:53
 
Дата: Пятница, 14.12.2012, 00:17 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


SKh,
Для начала так:
Code
<cmd p="content"><![CDATA[<style type="text/css">#stSmailTb{width:300px!important;margin:0 auto;}#stSmailTb tr{max-width: N px!important;float:left;clear:right;max-height: N px;}#stSmailTb tr td{max-width: N px!important;max-height: N px;vertical-align:middle;}</style><table id="stSmailTb" border="0" cellspacing="0" cellpadding="2">

А уже в зависимости от того, как получится визуально, регулировать размер окна?

А почему max-width ?
Перечитай посты выше.
max-width - это к картинкам, здесь должны быть четкие размеры.


 
Дата: Пятница, 14.12.2012, 01:20 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


max-width - это к картинкам, здесь должны быть четкие размеры.

Та-а-ак...)
Что я опять не понимаю?
Веря словарям) width - ширина.
И вставлял внутри окна, т.к. у смайлов разные размеры и по высоте.
Не туда вставил (не в том месте) или смайлам по высоте не нужно "давать свободу"?)))

Добавлено (14.12.2012, 01:20)
---------------------------------------------
Пробую сначала:
Code
<cmd p="content"><![CDATA[<style type="text/css">#stSmailTb{width:300px!important;margin:0 auto;}#stSmailTb tr{width:100px!important;float:left;clear:right;height: N px;}#stSmailTb tr td{width:50px!important;height: N px;vertical-align:middle;}</style><table id="stSmailTb" border="0" cellspacing="0" cellpadding="2">

Так?
Или где width:50px (там где рядом tr и td )заменить на width: N px?


Сообщение отредактировал SKh - Пятница, 14.12.2012, 01:22
 
Дата: Пятница, 14.12.2012, 09:50 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


SKh,
Что я опять не понимаю?
Веря словарям) width - ширина.

Не “веря словам”, а согласно CSS - ознакомьтесь: htmlbook.ru - CSS - Справочник CSS

Кстати, я вам и оффлайн справочник тоже давал. от Влада Мержевича

И вставлял внутри окна, т.к. у смайлов разные размеры и по высоте.
Не туда вставил (не в том месте) или смайлам по высоте не нужно "давать свободу"?)))

Вы невнимательно читаете написанное.
Я же писал: «приводить все смайлы, опять же через стили, к одному максимальному размеру по высоте и ширине - max-height: N px; max-width: N px;»...
Теперь ваш вопрос теряет смысл, ибо смайлы должны быть не больше определенного размера и “давать свободу” нигде не надо, просто отрываться от максимального размера самого смайла.
От него (максимального размера самого смайла) и прописывать размеры (такие, что бы смайл туда влез) ячейкам.

Не ужели я так непонятно пишу?


 
Дата: Пятница, 14.12.2012, 13:45 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


Не “веря словам”, а согласно CSS

))) Я не про слова, а про словари...
Веря словарям) width - ширина.

Что-то совсем вообще все стало непонятно.
Да и файл http://www.s-kh.ru/index/35-1 сразу открывается во всех браузерах - скачать невозможно.
А когда он открыт в браузере, и когда копируешь его содержимое в блокнот - в нем нет строки:
Code
<cmd p="content"><![CDATA[<table border="0" cellspacing="0" style="width:100%" cellpadding="2">


Сообщение отредактировал SKh - Пятница, 14.12.2012, 15:35
 
Дата: Пятница, 14.12.2012, 17:21 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


SKh,
Я не про слова, а про словари...

Ну вообще ))
Но не суть.
width - это параметр отвечающий за ширину элемента, подробное писание параметра, по ссылке: http://htmlbook.ru/css/width

Что-то совсем вообще все стало непонятно.

Все это что?

Что неясно?

Если в ячейке находится картинка, ограниченная максимальным размером по ширине, например 20px, какой ширины должна быть ячейка, что бы картинка умещалась в неё полностью? То же самое и про высоту.

Вопрос уровня детского сада, как про яблоки: «У Пети было 2 яблока, одно он потерял. Сколько яблок у Пети?...»

И так, выяснили какими размерами должна быть ячейка - по ширине и высоте, и считаем дальше.
Можно на бумажке, последовательно, действие за действием.

x=ширина ячейка.
значит строка tr будет равна 2x.
отсюда, таблица в три колонки смайлов, будет равна 3*2x.
следовательно, чтобы не было горизонтальных полос прокрутки в аякс окошке, его параметр ширины должен быть равен 3*2x+25.
Ширина для окошка вот здесь, это фрагмент скрипта:
Quote (Code)
_uWnd(\'Sml\',\'Полный список смайлов\',340,400,{ ...

...Все.
Что тут может быть непонятным?

А может вам забить на это дело? или подождать “вдохновения”?..

Да и файл http://www.s-kh.ru/index/35-1 открывается во всех браузерах - скачать невозможно.

1. Меню Файл » сохранить как.


...

2. Правой клавишей мыши по ссылке » Сохранить объект как


...

По теме:
Подробно о создании uWnd (аякс) окошек (примеры реализации)

Прикрепления: 5526361.png (11.0 Kb) · 0892669.png (19.8 Kb)

 
Дата: Пятница, 14.12.2012, 21:39 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


Спасибо!


Все ОК!
Разобрался!
wink


Сообщение отредактировал SKh - Пятница, 14.12.2012, 21:44
 
Дата: Пятница, 14.12.2012, 21:49 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


SKh,
Все ОК!
Разобрался!

Ну слава Богу )
А то я уже начал выдумывать как это объяснить на картинках ))


 
Дата: Пятница, 14.12.2012, 22:30 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


А я сначала все вогнал по инструкции, а потом начав с размеров самого большого смайла и установив предел рамки 660х600, начал вгонять и резать пока не уложилось до пропажи горизонтальной прокрутки.)
У крупноватых смайлов режет правый бок, но - терпимо. wink
Спасибо, еще раз!
wink


Сообщение отредактировал SKh - Пятница, 14.12.2012, 22:30
 
Дата: Суббота, 15.12.2012, 00:03 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


SKh,
У крупноватых смайлов режет правый бок, но - терпимо.

Я же писал: «приводить все смайлы, опять же через стили, к одному максимальному размеру по высоте и ширине - max-height: N px; max-width: N px;»...
Code
#stSmailTb td img{max-width: Npx!important;max-height: Npx!important;}

...


 
Дата: Суббота, 15.12.2012, 05:55 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


приводить все смайлы, опять же через стили, к одному максимальному размеру по высоте и ширине - max-height: N px; max-width: N px;

Так и я изначально раздул ширину и высоту по максимальному размеру самого большого: 220х200
Потом урезал. Остановился на 172х200.
Все равно много места занимает, много пустот, но все видимы.
Покалечены в меру.)))


Сообщение отредактировал SKh - Суббота, 15.12.2012, 05:57
 
Дата: Суббота, 15.12.2012, 08:55 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


SKh,
Так и я изначально раздул ширину и высоту по максимальному размеру самого большого: 220х200

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

Приводить - это значит принудительно изменять, задавать другие, отличные от оригинальных, размеры.

А если у тебя один смайл будет 500x500 а остальные 20x20... что, так и будете по большему лепить?...


 
Дата: Суббота, 15.12.2012, 16:23 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


likbezz,

...к одному максимальному размеру

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

так тогда, при таком методе, уже не одну сторону смайлов обрежет, а от больших вообще 10-20% останется.
Я видел в сообщении 4 что есть другой метод.
Как раз сжимания иконок смайлов, как я понял. Но сноска на другой скрипт убита.)
Там мухи трахаются)))
И стили там видел. Но не понял что с ними делать.) Куда их вставлять.


Сообщение отредактировал SKh - Суббота, 15.12.2012, 16:26
 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Вопрос по теме ... » Как сделать стандартные смайлики в три колонки? (Решение на CSS и JavaScript. Подменяем стандартные смайлы)
Поиск:


Мобильная версия