Zoltan пишет: цитата: может, мне уже уроки css писать начинать пора xD
Камрад! Давно пора! Если тебе требуется особое благословение, считай, что мы всем форумом тебе его дали))
Предлагаю всем высказаться по данному вопросу. Дело-то ведь полезное, и ни кто-нибудь, а наш родной и знакомый Золтан решил совершить сей подвиг во благо форумного ролевого движения! Давайте его поддержим!
Отправлено: 04.01.11 20:36. Заголовок: Zoltan пишет: А это..
Zoltan пишет:
цитата:
А это нужно? Я так мыслю, и так в сети полно ресурсов, где можно почитать на данную тему.. И вообще, изначально писал в шутку :)
Нужно. Во-первых, автор не кто-нибудь левый незнакомый, а ты, наш понятный и близкий фри-ролевик. Что немаловажно)) Во-вторых, "полно" - это не значит, хорошо. Вообще, хорошего много не бывает. Так что дерзай и устремляйся, сей разумное и доброе по мере возможностей. Если умеешь и знаешь - надо делать, лишним не будет.
Нужно. Во-первых, автор не кто-нибудь левый незнакомый, а ты, наш понятный и близкий фри-ролевик. Что немаловажно)) Во-вторых, "полно" - это не значит, хорошо. Вообще, хорошего много не бывает. Так что дерзай и устремляйся, сей разумное и доброе по мере возможностей. Если умеешь и знаешь - надо делать, лишним не будет.
Я поддерживаю Серифу, да Ты хорошо объясняешь, чопочемхоккейсмячом, а css вещь нужная)
Отправлено: 05.01.11 19:16. Заголовок: Начнем хD Кнопка с з..
Начнем хD Кнопка с заменяющимся изображением при наведении и клике. Зачем? Красиво) Данный метод предусматривает использование css-спрайтов, т.е картинка одна, а вот css уже её делит на части и показывает по частям, когда нам нужно. Что нам нужно?) Картинка-кнопка!
Как видим, картинка состоит из трёх частей, первая в самом верху - это кнопка в "спокойном состоянии". Вторая - кнопка, когда курсор наведён на неё. В данном случае, она на 40 или около того, пикселей ниже, это важный параметр, учитывайте его, когда будете рисовать кнопку! И третья - клик по кнопке. Еще на 40 (или около того) писелей вниз. Прошу обратить внимание, если не вычислить точное кол-во писелей, кнопка будет "прыгать", увидите на демо.
Собственно, код кнопки. <a href="#" id="button_sujet"><span></span></a>
Спан нам нужен, чтобы было, к чему привязывать картинку :) Адрес ссылки ( # ) заменить на свой ;)
Теперь - стиль. <!--настройки кнопки--> #button_sujet, #button_sujet span{ display:block; width:160px; height:40px; position:relative; overflow: hidden; } Оффтоп: Присваиваем классу button_sujet и button_sujet span одинаковые параметры отображения, размеры и позиционирование. Последний параметр отвечает за переполнение блока, если содержимое в него не влазит, блок скрывает содержимое. hidden. Менять можно только размеры кнопки ;)
#button_sujet span{ height:120px; background: url(http://editor.darknessworld.ru/demo/spryte_button_files/sujet.gif) 0 0 no-repeat; text-indent:-9000px; } Оффтоп: Теперь привязываем нашу картинку к спану, парметр no-repeat запрещает картинке повторяться, если блок будет больше, чем она. Текст-индент смещает текст за границы видимого, однако верстка не рвется, т.к указано ранее - скрывать все, что влазит ;) overflow: hidden; #button_sujet:hover{ background:none; } Оффтоп: Теперь явно указываем отсутствие заднего плана у ссылки с классом button_sujet. По сути, необязательный параметр, но рекомендуется ради совместимости кнопки к отсталыми браузерами, типа ишака.
#button_sujet:hover span{ top:-40px; } Оффтоп: Здесь начинаются чудеса) На самом деле, наша кнопка выглядит, как одна целая картинка. Но! Мы сказали браузеру, что кнопка меньше размеров картинки, все не поместилось, влезла первая часть изображения. А что не влезло - указали скрыть. Теперь же мы поднимаем спан выше на 40 пикселей, соответственно, становится видимым нижняя часть картинки, №2 :) Выделенная область - это видимая область. Примерно так
#button_sujet:active span, #button_sujet:focus span{ top:-80px; } Оффтоп: Теперь же мы указываем, поднять картинку на 80 пикселей. И становится видимым нижний блок нашей картинки :) Присваивается одно и то же отображение к двум событиям - активно и фокус. Т.е. то, что нажимается сейчас и то, что уже нажато. Наша кнопка не будет изменять картинку на себе до клика по другой области - это удобно, если она перекидывает на другую страницу - страница все равно обновится) И, самый важный параметр
Оффтоп: body{ background: #d6d6d6; } Как видно, я сохранил картинку в гиф с подложкой именно м таким цветом Всем спасибо, все свободны жду вопросов) Ах да, лайв-демо
Отправлено: 06.01.11 17:48. Заголовок: Serifa Да кому оно н..
Serifa Да кому оно надо, еще себе такие кнопки рисовать
Сегодня урок ориентирован на ИЕ-ненавистников, как я :)
Что делаем? Просто даём знать посетителю, что по ссылке он уже ходил ;)
За все ссылки по умолчанию отвечает класс "a", у которого есть несколько вариантов - ссылка, просто на страничке (a); посещенная ссылка (visited); ссылка, на которую наведен курсор (hover), и ссылка на страничку, на которой находится пользователь (active). Сейчас рассматриваем посещенные ссылки, однако, заменив a:visited на любое значение - это можно изменить ;)
Эффект первый, зачеркивание ссылок. Все просто, перечеркнем посещенные ссылки. Посетить их все равно можно, просто линия поперек.
Пишем в css такое
цитата:
a:visited { text-decoration: line-through; }
Получаем зачеркнутые ссылки. посмотреть в действии Естессна, можно применить не только к ссылкам, а вообще к любому тексту, но мы сегодня о ссылках)
Это самый простой эффект. Следующие немного сложнее. Для браузера ИЕ - фатально сложно, проверив на установленном у меня ИЕ 8, оказалось, что оно не в силах отобразить ничего. Так что.. В любом случае, можно не обращать внимания на этот факт - пользователи браузеров получше всё увидят. А ИЕшники... сами виноваты
Картинка около ссылки :) Галочка, в данном случае.
Прежде всего, нам нужно найти место, куда воткнуть картинку) Потому пишем в css такое
цитата:
a:visited { padding-right: 12px; }
паддинг - значит отступ, райт - право. Т.е отступить вправо 12 пикселей, пока что просто Самое время добавить картинку) Пишем в css такое
background задаёт нашей ссылке задний план, смещённый на 12 пикселей вправо. no-repeat запрещает ссылке повторяться. 100% указывает, что картинку нужно отображать после ссылки, указав 10% мы получим картинку на 10% от начала ссылки. А не указав, по умолчанию получим в самом начале. Оно нам надо? посмотреть в действии
Но, ведь есть еще классы, к которым можно привязать еще значений) Привяжем к уже существующей ссылке с галочкой еще пункт.
Что мы сделали?) Привязали к наведению курсора на ссылку отображение уже другой картинки, т.е горит галочка - навели, она потухла. Или наоборот, это уже как захотите, я описываю только общий принцип.
Можно еще побаловаться с настройками и сделать так
Теперь, благодаря параметру font-size мы уменьшили "ок" на 30 процентов)
Сделаем сложнее?) Пишем такое)
цитата:
a:visited:after { content: " (ok)"; font-size: 60%; text-transform: uppercase; color: #777; } a:visited:hover:after { content: " (Эй! Вы здесь уже были!)"; font-size: 80%; text-transform: uppercase; color: #f00; }
Что мы натворили?) Рассмотрим первый класс, a:visited:after. Приписываем "ок" после ссылки, т.к афтер. Далее, устанавливаем размер, 60%. Потом параметром text-transform задаём подчёркивание ссылки (кстати, написав туда text-transform:capitalize; мы заставим все посещенные ссылки начинаться с большой буквы ). И цвет. Далее, идет класс a:visited:hover:after, который отвечает за ссылку, которую пользователь посетил и на которую вновь навёл курсор. Вместо "ок" пишем напоминание, что пользователь там был, указываем размер 80%, снова подчёркивание и цвет, красный, поярче :)
Конечно же, это все раскрывает только общий принцип, на самом деле можно вертеть ссылками, как угодно. Но не забывайте - наляпистость - не лучшее, что можно придумать для вашего форума. Чувство меры вам в руки :) С наступающим Рождеством!
Serifa Cкачал хром, действительно. Не работает только для общих условий, т.е конструкция типа a:hover:after { content: " (Эй! Вы здесь уже были!)"; font-size: 80%; text-transform: uppercase; color: #f00; }
РАБОТАЕТ. А вот уже a:visited:hover:after уже нет. Причем в весии хрома 5 и ниже это было! Отписался на форуме у них, жду ответа. Может, включат исправление в новой версии... печально, что не работает(
Отправлено: 07.01.11 14:15. Заголовок: А какое именно демо,..
А какое именно демо, которое в предыдущем посте или выше? Сейчас проверю, что там с правкой постов. На Борде многое остается непонятным, например, система перехода из участников в "постоянные участники".
Отправлено: 08.01.11 16:10. Заголовок: Serifa пишет: А как..
Serifa пишет:
цитата:
А какое именно демо
тут проверял в ИЕ 8, Мозилла 3.0.5, Хром 6, опера 10.10 и 11. Все работает. Не работает только для visited. Весь урок там, т.к небыло возможности править пост.
Продолжаем :) Сегодня о выпадающих меню, будем использовать новые свойства css3, увы, не всеми браузерами поддерживаемые. Работает без cкругления углов в ИЕ8, опера 10.10, частичная поддержка эффектов в опера 11, идеальная совместимость - гугл хром. В любом случае, меню работает во всех браузерах. Отображается только немного по-разному :)
Итак, начнём с простого, с каркаса :) У нас есть разделы и некоторые ссылки, которые мы обрамляем в хтмл код :)
Конструкция вложения в меню - открываем новый элемент li, внутрь него запихиваем новый ul - это то меню, что будет выпадать при наведении на родительский li, т.е ссылку, которую создали чуть выше. Таким образом, вложенность может быть неограниченной ;)
Комментарии по строчкам %) Маргин - отступы, ноль пикселей - нам не нужно пустое пространство Значение отсупов от края до содержимого, в пикселях. Задний фон нашего меню, используем одну маленькую картинку, запрещаем ей повторяться. Высота строки 100% - чтобы гарантированно влез шрифт сглаживание углов в 2 пикселя. Работает в новых браузерах. Отсюда и до конца - костыли для мозиллы, чтобы меню не поломалось в ней
Далее, берем известный нам айди nav и присваем стиль элементам li внутри этого айди
Отправлено: 09.01.11 23:59. Заголовок: А на Борду придется ..
А на Борду придется запихивать весь этот длиннющий код? С выравниванием кочек?
Ладно, попробуем как-нибудь, как разгребу немного, да и диз надо облегчить здесь, че то он в Хроме временами прыгает. Здесь боковые бордеры ведут себя неадекватно.
Отправлено: 10.01.11 00:38. Заголовок: Serifa пишет: А на ..
Serifa пишет:
цитата:
А на Борду придется запихивать весь этот длиннющий код? С выравниванием кочек?
угу :( Лучше бы вынести в отдельный css-файл, тогда бы он загружался один раз, а потом браузер бы доставал уже из кеша. Вообще, этот код весит копейки, так меньше 3х кб... но все равно не очень удобно, что на борде в файл вынести нельзя
Отправлено: 16.01.12 17:06. Заголовок: вспомнил про эту тем..
вспомнил про эту темку, решил что-то полезное описать, например, оформление цитаты, на майбе и клонах часто её раскрашивают. На борде же это нереально без стороннего яваскрипта, так как изначально у цитаты нет ни одного уникального идентификатора - можно изменить её стиль, но тогда изменится весь стиль форума. Так вот вопрос, нужен ли мануальчик такой, с "левым" скриптом?
Борду ведь ломать не так жалко, как форум на платном хостинге
Никто ничего не ломает) Просто немного изменим вывод. Всё равно всё обрабатывает ява-скрипт. Потому можно подключить свой, который "перехватит" бразды правления. Потому скрипт желательно подключать в самом низу, насколько мне известно, на борде есть возможность воткнуть скрипт в подвал. Если подключить его вверху, то работать не будет. Т.к весит он довольно много (приходится заново объявлять целую функцию), то втыкать весь код на страницу неразумно, лучше подключить по типу script src="http://... Т.к на борде этого сделать нельзя - каждый может зарегистрироваться на юкозе, народе, гугл коде или вообще где угодно и положить скрипт туда.
Возможно, можно и сократить размер, вырезав лишнее, но у меня тогда перестаёт работать. Потому скрипт весит 15кб. Не много. Подключать можно так
Оттуда же можно сохранить скрипт и залить куда угодно, смотрите выше. С моего сайта тоже работать будет. Специально ничего не сжимал, чтоб было ясно видно, что вредоносного кода там нет. можно сжать и тогда будет 11 килобайт кода.
Что мы делаем? Раньше сама "цитата" была таблицей, без особых атрибутов и возможности настройки. Теперь это 2 div'a, которые можно спокойно настроить через css. Заголовок, т.е сам текст "цитата:" и тело цитаты.
#quot_header - это заголовок, #quot_body - "тело".
Т.к все настройки вынесены в css, то каждый может сам себе настроить, как угодно. Если не настраивать, то выглядеть будет, как простой текст, т.е без любых выделений вообще.
Отправлено: 17.01.12 10:10. Заголовок: Вопрос: 1. А где на ..
Вопрос: 1. А где на борде эту css закапывать? Тут под нее нет места, тут все встроенное. (А, т.е. вставляется в хтмл-верх?) 2. Где взять сам скрипт? 15 кб весит, я правильно поняла? Ну, это как бы немного...
Отправлено: 17.01.12 10:44. Заголовок: Serifa пишет: 1. А ..
Serifa пишет:
цитата:
1. А где на борде эту css закапывать? Тут под нее нет места, тут все встроенное. (А, т.е. вставляется в хтмл-верх?)
Я вообще в шоке от этой "встроенности" на борде, если честно. Уныло было не выделить места под css, картинки и скрипты. Потому в посту выше советовал завести аккаунт где-нибудь "на стороне". Например, есть яндекс-хостинг. Php и прочие языки он не поддерживает, но положить туда скрипты и css можно.
Если этого не делать - то можно вставить css хоть в хтмл-верх, хоть в низ, эта штука будет работать в любом случае. А вот скрипт - только в низ.
Serifa пишет:
цитата:
2. Где взять сам скрипт? 15 кб весит, я правильно поняла? Ну, это как бы немного...
я положил скрипт себе на сайт. Можно перейти по ссылке, откроется скрипт, потом нажать "файл-сохранить" и положить его куда угодно и оттуда уже подключать.
Отправлено: 17.01.12 16:01. Заголовок: Тут остается самый г..
Тут остается самый главный вопрос: куда класть эти файлы? Я вот не хочу их к себе на фору орг уносить, мне там зачем бордовское постороннее? А куда еще? Специально регится на юкозе ради пары скриптов и папки картинок - это слишком жирно.
Отправлено: 17.01.12 16:24. Заголовок: Вот и я про другое х..
Вот и я про другое хранилище. Потому что на форуме лишние файлы, не имеющие прямого отношения к самому форуму и его работе, скорее вредны. А вот альтернативы нет. Борду тоже можно понять - ей на своих серверах лишние файлы тоже не нужны. В итоге все остаются при своем интересе.
CSS тоже можно на Борде подключать отдельным файлом. В этом случае между head и /head.
Можно, никто не спорит. Проблема в том, что хранить на борде - нельзя. Да и не суть важно, между head или нет, все равно будет работать.
Serifa пишет:
цитата:
Я вот не хочу их к себе на фору орг уносить, мне там зачем бордовское постороннее? А куда еще? Специально регится на юкозе ради пары скриптов и папки картинок - это слишком жирно.
Ну, скрипт можно тащить напрямую от меня, никто не запрещает ;) Для картинок есть куча хостингов.. для css я бы мог написать интерфейс-конструктор с сохранением, но, опять же, не без регистрации. мне уже 2 года спамеры шлют спам на сайт, которого 2 года, как нет - сделал одну форму общедоступной и понеслась. так что мне оно не шибко надо, гостю привелегии давать)
Кстати, поколупался, борда проста, как три копейки, можно хоть всю раскурочить. И очень, очень много таблиц. Это ужасно UPD
Добавляем в css. Сакральный смысл имеет выделенное чёрным - 200 пикселей и не больше. Картинка остаётся той же, но отображается, как 200px по ширине. Насильно. Не работает в IE6 (да кому он вообще нужен?) Возможны какие-то глюки, т.к на борде нет уникальных идентификаторов - css может присвоится ещё чему-то, но маловероятно.
Serifa Нет-нет, моя вина, прошу прощения. Все дело в том, что "собирал" всё, открыв исходный код форолла и издеваясь дебаггером, как оказалось, этих тестов недостаточно, потому я создал форум на борде и отловил, как можно подключать. Там же можно посмотреть, что да как.
(примечание, этот пункт можно не использовать, если хотите настроить цитату по-своему, т.е в своих стилях настроить #quot_body и #quot_header) з.ы. и ещё какой-то странный глюк с выбором дизайна, пока что не понял, в чём дело. Уже понял, т.к применяется только к стандартному дизайну, то на других не работает. Почему нельзя редактировать все дизайны, а не только "оригинальный"?
Отправлено: 23.01.12 18:38. Заголовок: Serifa пишет: Так, ..
Serifa пишет:
цитата:
Так, значит, цитаты работать не будут?(
Будут, но только в дизайне по умолчанию, в других нет. Тоесть, сами-то цитаты работать будут, но будут оформлены по умолчанию. Как сейчас. Если можно как-то редактировать остальные дизайны - напишите, сделаю.
Serifa пишет:
цитата:
Опять попробовала - нет эффекта(
А на том форуме, что по ссылке, работает? Все правильно вставляете? в новости нужно скрипт засунуть
Да, ещё поковырялся, вариант годится такой, если в новостях более одного скрипта. Текст не пробовал
Отправлено: 25.01.12 08:42. Заголовок: Zoltan, камрад, ты г..
Zoltan, камрад, ты гений) Оно заработало! Так красиво. Очень подходит к стилю форы) А почему ты мне "вы" говоришь? Я, вроде, тут в единственном экземпляре с тобой разговариваю)
У меня вот такая проблема: никак не получается задвинуть эту кнопку посреди ячейки таблицу в шапке форума. В див запихивала - кнопка все равно выползает влево и нарушает равновесие. Не хочет быть по центру! Вот этот кусок кода:
цитата:
<!-- Поместите этот тег туда, где должна отображаться кнопка +1. --><g:plusone annotation="inline"></g:plusone>
Отправлено: 25.01.12 10:25. Заголовок: Serifa если что-то ..
Serifa если что-то по стилю не подходит - могу донастроить :)
а на "вы" просто привычка. Бывает.
Serifa пишет:
цитата:
<g:plusone annotation="inline"></g:plusone>
Вообще, есть хороший тег <center> что-нибудь </center>, но я так глянул, здесь не поможет, все равно не по центру. Сейчас посмотрю, что можно сделать, только уже через css.
p.s. и зачем про меня в шапке форума? лучше убрать бы :)
Отправлено: 25.01.12 10:33. Заголовок: Удобная штука, этот ..
Удобная штука, этот плюсик)
Zoltan пишет:
цитата:
p.s. и зачем про меня в шапке форума? лучше убрать бы :)
Камрад, ты достоин прославления и в более широких масштабах! Но если тебе не нравится - уберу) Может, в подвале форума такой лозунг написать? Там не так заметно)
Отправлено: 25.01.12 11:15. Заголовок: Гуглокод создаёт бло..
Гуглокод создаёт блок размером 450 пикселей, так что даже если его отцентровать, то визуально выглядит не по середине. Можно нажать "выделить всё", тогда блок этот отчётливо видно.
потому такая вставка идеально не отцентрует, только примерно.
Отправлено: 25.01.12 13:18. Заголовок: Камрад, если тебе хв..
Камрад, если тебе хватает денег, можешь поделиться со мной)) Дело разве в величине модификации? Просто у нас ты такой единственный! Луч света в царстве борды, можно сказать)
Выявили странный баг со скриптом пропали админские кнопки "бан", "айпи" и квадратик для галочки, для выделения нескольких сообщений( Как бы редко пользуемся, но для нормы надо. Можно что-то придумать?
Отправлено: 26.01.12 12:26. Заголовок: Zoltan, а для движка..
Zoltan, а для движка SMF твои красивые цитаты можно приспособить? Там я хотя бы знаю, где файлик css находится) Ну и в корень форума сам скрипт можно закинуть.
Отправлено: 26.01.12 14:18. Заголовок: С удаленными стилями..
С удаленными стилями форума цитаты выглядят криво, фон смещается, поэтому стили оставила на месте, а новые прописала внизу файла css. Вроде пока работае.
Это плохо, очень плохо. Потому может не работать, если нет возможности удалить\заменить выделенное
Serifa пишет:
цитата:
Это удивительно, но на том форуме оно тоже работает.
ничего удивительного, css работает везде ;)
Serifa пишет:
цитата:
С удаленными стилями форума цитаты выглядят криво, фон смещается, поэтому стили оставила на месте
Возможно, там есть что-то вроде "display:block;" или подобное, это удалять не нужно, а вот "сolor:***", "font:" можно удалить.
И, раз уж народ берёт себе - распишу что зачем в этом стиле, ведь не обязательно ставить именно такую цитату, всё самое "вкусное" - в настройке под себя)
.quoteheader // идентификатор заголовка цитаты. Чтобы узнать "свой" нужно в исходном коде найти блок, отвечающий за цитату, там будет что-то вроде <div id='block'> или <div class='block'> имеет значение, id или класс, если айди - строка должна начинаться с #, если класс - то с точки. { padding-left:40px; //отступ влево. Т.к бордюрчик у нас закруглённый, то делаем отступ "от левой границы", 40 пикселей. color:grey; // цвет текста. можно брать любой цвет, grey, red или написать # и RGB код цвета. font-size:10px; // размер шрифта border: 1px dashed black; // здесь устанавливается тип бордюрчика. Толщиной в 1пиксель, dashed - значит пунктирный, solid - сплошной, double - двойная линия. Следом - цвет, опять же можно #rgb border-radius:25px 12px; // радиус сглаживания бордера. можно писать для каждого угла - свой радиус, и описывается в таком порядке - сначала верхний левый угол, потом верхний правый, потом нижний левый и в конце правый. Я описал только свойства двух углов, потому оно просто чередуется, можно указать что-то вроде 10px 24px 12px 27px - для каждого угла своя личная настройка. Если указать только одно значение, то оно применится ко всем углам. Можно удалить настройку - углы будут острыми. -webkit-border-radius:25px 12px; // продублируем предыдущую настройку для webkit. Вдруг, у кого макинтош. -moz-border-radius:25px 12px; // теперь для мозиллы. width:350px;} //ширина блока. Можно ещё указать height, задний план, воткнуть картинку и так далее.
Во втором классе все тоже, кроме font-style:italic; - это указывает на то, что шрифт наклонный (аналог бб-кода [i]), background: #18181a; - цвет заднего фона. Можно любой, само собой ;) padding: 5 15 5; - снова отступы, т.к углы скруглены, а я не хочу, чтобы текст налазил на бордюрчик. text-shadow:black 0px 1px 0px; - "тень" теста. На моём варианте цитаты его не видно, т.к фон чёрный, тень чёрная.
Отправлено: 27.01.12 17:05. Заголовок: Morfus пишет: всё г..
Morfus пишет:
цитата:
всё гораздо проще.
я имел ввиду, что прямо в теге цитаты указывается, например, padding-left. Потому из css свойств заголовка цитаты можно удалить padding-left:40px; ведь всё равно работает только паддинг, указанный в коде тега, padding-left:5px;
здесь хорошо заметно, на форолле "цитата:" пишет с отступом, а вот у вас - уже нет. Не критично, но неприятно, что "прибито гвоздями". Приоритет всегда за опциями, которые объявлены позже всего. А вот паддинги у тела цитаты, кажется, работают нормально.
Кажется, увеличить размер блока цитаты, как и убрать ползунок - нельзя, снова прибито гвоздями. Или можно редактировать шаблоны в админке сайта? не помню уже. Это бока юкоза, не стиля. На форолле ползунка не будет, какой бы ни был размер цитаты
Отправлено: 30.01.12 13:52. Заголовок: Zoltan пишет: а есл..
Zoltan пишет:
цитата:
а если в скрипте уже будет стиль с параметром !important? ;)
Не будет. Код пишется с расчётом, чтобы было корректное отображение при наличии кривых ручек, но для знающего пользователя всегда оставляется возможность сделать по своему. !important не дурной тон, а вполне корректный инструмент. Если использовать по назначению.
Отправлено: 30.01.12 14:22. Заголовок: Morfus пишет: Код п..
Morfus пишет:
цитата:
Код пишется с расчётом, чтобы было корректное отображение при наличии кривых ручек
Э? там ни на что не влияющий отступ в 5 пикселей и дурацкая полоса прокрутки в теле цитаты. Это само по себе не есть корректное отображение - кому нужны лишние полосы прокрутки? Они обычно только мешают, когда содержимое блока нужно показать целиком, например, при чтении цитат. Так что нет, там изначально пишется не с расчётом на кривые руки, а, видимо, по индийскому методу, не иначе.
Morfus пишет:
цитата:
!important не дурной тон
моветон не !important, а прописывать стили в хтмл.
Zoltan Прокрутка не дурацкая. Меня дико раздражают километровые посты-цитаты. А тут аккуратное отображение.
Zoltan пишет:
цитата:
Так что нет, там изначально пишется не с расчётом на кривые руки, а, видимо, по индийскому методу, не иначе.
Вы гадаете, а я знаю. *пожимает плечами*
Zoltan пишет:
цитата:
моветон не !important, а прописывать стили в хтмл.
Учитывая, что в исходном коде страницы не видно какая часть кода выведена системным кодом вида $COD$, а какая вписана в шаблон, не вижу оснований для такой категоричности. В uCoz-е есть масса нюансов, которые со стороны не очень понятны. Поэтому рассуждать о них с предубеждённым наблюдателем, только время зря терять.
а меня дико раздражают блоки с прокруткой, т.к их надо прокручивать; скорость чтения позволяет читать больше 200px, а бесконечная прокрутка бьёт по глазам. В случае, если бы безымянные пейсатели кода учитывали юзабилити, то припаяли бы кнопку "развернуть" к цитате, чего нет. Думаю, я не один такой, кто в состоянии прочитать больше трёх строчек за раз.
Morfus пишет:
цитата:
Вы гадаете, а я знаю
о нет, я всего лишь констатирую факт. Тот код не спасёт от кривых ручек, даже наоборот, признак этих самых кривых ручек.
Morfus пишет:
цитата:
Учитывая, что в исходном коде страницы не видно какая часть кода выведена системным кодом вида
Да, это можно вырезать из шаблона, я в курсе. Но это есть в исходном варианте шаблона, прописанном розрабами. В юкозе нюансы? право, Америку открывать не надо, я пару раз имел дело с сайтами на юкозе, никаких нюансов там нет. Кроме невозможности пройти валидатор.
В любом случае, мне не интересно спорить с вами, каждый защищает свою точку зрения и от спора проку не будет и на грош. Да и тема изначально была предназначена не для этого.
Отправлено: 31.01.12 19:33. Заголовок: Аналогично. Мне вооб..
Аналогично. Мне вообще спорить в таких темах не интересно. Фломастеры, они и в Африке фломастеры и любое категоричное мнение смотрится как минимум странно. В любом случае следует как факт принимать движок сервиса и использовать его преимущества. uCoz хорош тем, что доступ к изменению кода страниц там значительно больше, чем на Борде или даже миббе. Больше только на том движке, что сам ставишь. В отличие от Борды там для форума предусмотрены идентификаторы для практически 100% элементов и стилями можно сделать достаточно много. Хотя доступ к шаблонам тоже хорошее решение.
Отправлено: 12.02.12 08:40. Заголовок: Serifa Просто юкоз г..
Serifa Просто юкоз генерирует хтмл-код, в котором некоторые стили уже прописаны, на счёт них и спорили В основном, это строчка <div class="bbQuoteName" style="padding-left:5px;font-size:7pt"> Это не страшное, просто не очень удобное, как по мне, решение. А вот Morfus'у нравится. Кому как
Serifa пишет:
цитата:
Потом попробую что-то в цитате поменять, с помощью
Если что, не обязательно все стили писать, можно просто добавить себе в css что-то типа #quot_body { background: white;} это заменит цвет фона цитаты.
Отправлено: 12.02.12 08:44. Заголовок: На этом форуме цитат..
На этом форуме цитата смотрится даже эффектно, можно и не менять ничего. А вот на форролл орге фон форума - серо-голубой. С другой стороны, смотрится тоже эффектно! Так что думаю, а надо ли что-то менять? Как говорится: если оно работает - отойди и не трогай :)
Верстка резинового текстового поля (input[type=text])
Взято отсюда: http://unixhome.org.ua/blog/315.html#comment322 ЦИТАТА: __________________________________________ Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (/>), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить следующим условиям:
Возможность установки любых горизонтальных и вертикальных отступов у текста; Элемент должен занимать весь контейнер, в который он помещен; Клик мышью в любое место текстового поля устанавливает в нем курсор.
Ответ достаточно прост и решается следующим методом:
Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.
Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border) и внешних отступов (margin), будет равна:
width = width + padding-left + padding-right
Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область. Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров:
Из стилей получается, что элемент input-width задает ширину, которую должно было занимать текстовое поле. Элемент width-setter задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы (margin) должны быть равны padding-left и padding-right для элемента input. При таком описании input-элемент будет выступать из width-setter на величину своих горизонтальных отступов (padding), а в IE6 — растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute.
В итоге, при применении таких стилей выполняются поставленные в начале задачи. Текстовое поле получилось с заданными отступами резиновым и кликабельным в любом его месте. Чтобы задать конкретную ширину итоговому элементу, необходимо лишь прописать свойство width для контейнера input-width.
Примечание. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) — и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.
Оффтоп: имхо, изврат. Инпут даже высотой в n строк всегда будет иметь одну строку - так он себя в браузерах ведёт. И набираться строка будет строго по центру огромного поля. А перенос строки в инпутах как бы не предусмотрен.. В таких случаях лучше пользоваться textarea.
Отправлено: 07.05.12 15:32. Заголовок: Zoltan, не обязатель..
Zoltan, не обязательно по центру.
будды... какой изврат...
<любой блок, который надо заполнить; зачем это делать - не спрашиваем. НАДО.> <input type="text" value="lalala" id="olala" /> </любой блок, который надо заполнить; зачем это делать - не спрашиваем. НАДО.>
любой блок, который надо заполнить; зачем это делать - не спрашиваем. НАДО. { position: relative; //чтоб 100% не пойми от кого не брало width: 400px; //ширина - (минус) горизонтальные отступы инпута height: 14px; //высота строки инпута padding: 20px 30px (нужная высота блока - вертикальные отступы инпута - высота строки)px 50px; //те же самые отступы, что у инпута }
#olala { width: 100%; height: //высота строки инпута padding: 20px 30px (нужная высота блока - вертикальные отступы инпута - высота строки)px 50px; //вот те самые любые отступы, они с объемлющим блоком одинаковые margin: -20px -30px -(нужная высота блока - вертикальные отступы инпута - высота строки)px -50px // те же отступы со знаком минус line-height: 14px; //та самая высота строки. }
helheim Извращение чистой воды. Инпут всегда в одну строчку, потому смысла в отступах не вижу. Ну окей, будет эта одна строчка посреди блока - красота? как по мне, практической ценности ровно ноль. Если уж нужен подобный изврат, то
Отправлено: 09.05.12 05:36. Заголовок: Zoltan, хах! я тоже ..
Zoltan, хах! я тоже не понимаю, зачем. )) но мало ли, может у кого-то фетиш такой: инпутами все пространство окна занимать, или там рисовать в стиле кубизма: пиксель-арт. Вот хлебом не корми - да инпут сделать!
С пятым хтмл удобно, конечно, но относительно стандартных форм ИМХО таки все еще остался один неприятный косяк: приходится на скрипты отправку вешать, вместо того, чтобы элементарным сабмитом отправлять. Нехай бы они еще сабмит к такой штуке аналогичный формам прикрутили - цены бы не было. Пока же я все-таки люблю, чтобы как минимум текст и формы юзабельно отображались и в дельфине, и в линксе.
Отправлено: 09.05.12 08:13. Заголовок: helheim пишет: Вот ..
helheim пишет:
цитата:
Вот хлебом не корми - да инпут сделать!
cейчас как раз пишу скрипт, который пробегается по массиву и для каждого элемента создаёт инпут... Сейчас это что-то около полутора сотен. Не хотел бы, чтоб каждый занимал столько места
helheim пишет:
цитата:
приходится на скрипты отправку вешать
это да, но найдите мне того, у кого они отключены. И я скажу "сам виноват" В конце-концов, можно получить $('#block').html() и заслать его через форму, хоть хидден полем, хоть вообще без полей.
Отправлено: 12.05.12 16:39. Заголовок: Zoltan, это какой-то..
Zoltan, это какой-то жестокий конструктор сайтов на 5хтмл? О_о скрипты у меня бывают отключены когда с мелкого бука сижу, в вап-версиях отключены нередко, у поисковых роботов (например, того же яндекса), некоторые фаерволы их некошерно режут. Первое - ни разу не ориентир, второе - тоже сомнительный, т.к. мобильная версия сайта вообще всяких джекверей и мутулсов не предполагает и всего на них похожего, а вот поисковики и трафикинспекторы порой приносят огорчения. поэтому, к сожалению, альтернатива для выключенных скриптов до сих пор - хороший стиль.
С другой стороны, та же борда без скриптов вообще не загрузится, т.е. у ее пользователя они 100% включены, чем и пользуемся напропалую =). Речь-то изначально о форумах шла.
Отправлено: 13.05.12 12:22. Заголовок: helheim пишет: это ..
helheim пишет:
цитата:
это какой-то жестокий конструктор сайтов на 5хтмл? О_о
а смысл делать конструктор сайтов, если есть движки?) всё гораздо проще, массив - код css, формочка для каждого класса, инпут для каждого параметра.
Ну, у ботов они отключены - но поисковикам яваскрипт и не нужен; формочки-смайлы-аякс гуглоботу явно не интересны. мобильные версии? никогда их не делаю для сайтов, зачем? скоро будут с телевизоров лазить в интернет, так что я должен делать стили и для этих кривых браузеров? Ну уж нет. А с нормального мобильника можно и полную версию посмотреть. Трафик инспекторы? это ещё что такое и зачем им нужен яваскрипт? ;)
helheim пишет:
цитата:
С другой стороны, та же борда без скриптов вообще не загрузится Речь-то изначально о форумах шла.
Угум-с, а теперь смотрим любой не-бордовский форум с отключённым яваскриптом, пытаемся вставить смайлик\ббкод. Не работает? ну так ограниченная функциональность, сами виноваты, что браузер урезан (выключен яваскрипт).
Отправлено: 15.05.12 09:55. Заголовок: Ну, у ботов они откл..
цитата:
Ну, у ботов они отключены - но поисковикам яваскрипт и не нужен
а как же чтоб бордофорумы индексировали нормально, или аякс-страницы? Гугль-то видит, он вообще лапочка, а яндекс - не видит, и "подтвердить права" при регистрации вап-версии в том же я.ру на борде, например, в силу особенностей оной версии нереально =).
цитата:
будут с телевизоров лазить в интернет, так что я должен делать стили и для этих кривых браузеров
не соглашусь за МКАД есть жизнь! =)) Да и вообще если уж верстать - так по-человечески, чтобы везде где можно ровно отображалось и одинаково, ну или хотя бы функционально., но спорить не буду =). Хотя бы потому, что спор классический, в момент превратится в холивар и истина в нем не родится точно.
цитата:
А с нормального мобильника
Вот как раз с нормального мобильника - нельзя.
цитата:
Трафик инспекторы? это ещё что такое и зачем им нужен яваскрипт?
Это такие программки для экономии и фильтрации входящего трафика. Кстати, весьма популярны. Избавляют страницы от попапов, перенаправлений, анимации, убирают часть или все вообще картинки, убивают на корню львиную долю (как бы не весь вообще) джаваскрипт, часто работают в том числе как баннерорезки. Полезная в общем штука, особенно когда информация нужна, а смотреть на всю эту красивость - ни сил ждать пока загрузится, ни денег. В целом обычно настраиваются под нужды каждого.
цитата:
Угум-с, а теперь смотрим любой не-бордовский форум с отключённым яваскриптом
Практика показывает, что когда человек запрещает у себя js, то он мало того, что морально готов к отсутствию смайликов, но еще и страстно желает их у себя не видеть.
Отправлено: 16.05.12 16:43. Заголовок: helheim пишет: а ка..
helheim пишет:
цитата:
а как же чтоб бордофорумы индексировали нормально, или аякс-страницы?
На счёт первого - бордофорумы не индексируются. Только главная и вап-версия. Да и на главной бот видит шапку, скленную с подвалом, выпуская из вида все разделы-категории. Давно доказано, что поисковые боты не индексируют яваскрипт и флеш, но опознают скриптовые ссылки и баннеры. По поводу второго - если аякс страницы не открываются без яваскрипта - увольте своего вебмастера, у него кривые руки :) можно делать ссылки не href='#' и не href='яваскрипт, а с нормальным адресом и перехватывать онклик событие. Не аргумент.
helheim пишет:
цитата:
за МКАД есть жизнь! =))
Само собой, за МКАДом есть жизнь. За МКАДом Москва. Потом, отображалось нормально на всех браузерах? этого не делает никто. На самом деле, есть браузеры без поддержки стилей и яваскриптов, например, Lynx. Сам Гугль заявляет, что Lynx отображает страницы примерно так, как видит их бот. И кто верстает дизы для них? под всех не угодишь никогда, а только подгадишь большинству нормальных людей.
helheim пишет:
цитата:
Вот как раз с нормального мобильника - нельзя
С миниоперы можно посмотреть любой бордофорум и даже отправить пост, а уж какой мобильник в наше время не поддерживает миниоперу? В более "продвинутых" браузерах уж и подавно всё работает.
helheim пишет:
цитата:
Практика показывает, что когда человек запрещает у себя js, то он мало того, что морально готов к отсутствию смайликов
Ну так об этом и речь - человек сам себе делает плохо, а виноват кто? дизайнер Давайте, я добавлю в файрволл запрет на доступ к интернету и пожалуюсь провайдеру, что у меня не работает ютуб. Вспомнилось
цитата:
-Установил программу от нортона, а она сожгла мне жёсткий диск!!1 -А как называется прога? -Norton Disk Destructor -Ну и чего другого ты ожидал от такой программы?
Точно также можно сказать каждому, кто установил эти инспекторы, носкрипт-плагины, отключил стили, картинки, интернет и вообще компьютер - чего другого ты ожидал? всё и должно было перестать работать.
Отправлено: 21.01.13 14:24. Заголовок: Небольшой странный и..
Небольшой странный и достаточно не очевидный факт.
Если вы на борде основной таблице задаёте фиксированную ширину и align="center" то в итоге получаете вертикальную полосу прокрутки. Чем больше разрешение монитора отличается от заданных размеров, тем больше скролл. Заметил на форуме CharlieCarbon'a такое.
Отправлено: 21.01.13 20:45. Заголовок: Да, точно, горизонта..
Да, точно, горизонтальную, поперёк которая
Можно изменить масштаб страницы (зажать контрол и покрутить колёсико мышки), если при увеличении размер скроллбара уменьшается и в какой-то момент исчезает - оно
Все даты в формате GMT
0 час. Хитов сегодня: 229
Права: смайлы да, картинки да, шрифты да, голосования нет
аватары да, автозамена ссылок вкл, премодерация вкл, правка нет
Это каталог форумных ролевых игр: форум, в разделах которого имеются адреса других форумов с кратким описанием того, что там происходит. Как найти свою игру? Посетить интересующий раздел нужной тематики, и пройтись по темам и указанным в них адресам. Потом можно написать свой отзыв прямо в теме.
Некоммерческий проект. Если Вы оставили здесь свои cookie, Вы сами за них отвечаете! Информация на сайте доступна по лицензии Creative Commons «Attribution-NonCommercial-NoDerivatives» 4.0, если не указана другая лицензия в подписи автора сообщения.
..... база данных пополняется с 20/06/2007..... картинки для оформления форума сделаны с помощью редактора Inkscape, в шапке присутствует фрагмент работы неизвестного художника
Внимание! На форуме включена премодерация!
Ты хорошо объясняешь, чопочемхоккейсмячом, а css вещь нужная)
С выравниванием кочек? 
Луч света в царстве борды, можно сказать)
пропали админские кнопки "бан", "айпи" и квадратик для галочки, для выделения нескольких сообщений( Как бы редко пользуемся, но для нормы надо. Можно что-то придумать? 
))
- участник сейчас на форуме