Даешь уроки css!

Форум » Вопросы дизайна » Даешь уроки css! » Ответить

Даешь уроки css!

Serifa: [quote]Zoltan пишет: цитата: может, мне уже уроки css писать начинать пора xD Камрад! Давно пора! Если тебе требуется особое благословение, считай, что мы всем форумом тебе его дали)) [/quote] Предлагаю всем высказаться по данному вопросу. Дело-то ведь полезное, и ни кто-нибудь, а наш родной и знакомый Золтан решил совершить сей подвиг во благо форумного ролевого движения! Давайте его поддержим!

Ответов - 85, стр: 1 2 3 4 5 6 All

Zoltan: А это нужно? Я так мыслю, и так в сети полно ресурсов, где можно почитать на данную тему.. И вообще, изначально писал в шутку :)

Serifa: Zoltan пишет: А это нужно? Я так мыслю, и так в сети полно ресурсов, где можно почитать на данную тему.. И вообще, изначально писал в шутку :) Нужно. Во-первых, автор не кто-нибудь левый незнакомый, а ты, наш понятный и близкий фри-ролевик. Что немаловажно)) Во-вторых, "полно" - это не значит, хорошо. Вообще, хорошего много не бывает. Так что дерзай и устремляйся, сей разумное и доброе по мере возможностей. Если умеешь и знаешь - надо делать, лишним не будет.

black.dahlia: Serifa пишет: Нужно. Во-первых, автор не кто-нибудь левый незнакомый, а ты, наш понятный и близкий фри-ролевик. Что немаловажно)) Во-вторых, "полно" - это не значит, хорошо. Вообще, хорошего много не бывает. Так что дерзай и устремляйся, сей разумное и доброе по мере возможностей. Если умеешь и знаешь - надо делать, лишним не будет. Я поддерживаю Серифу, да Ты хорошо объясняешь, чопочемхоккейсмячом, а css вещь нужная)

Zoltan: Начнем х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; } Как видно, я сохранил картинку в гиф с подложкой именно м таким цветом Всем спасибо, все свободны жду вопросов) Ах да, лайв-демо

Serifa: Что-то я не поняла, все эти #button_sujet, # идут один под другим в файлике вроде style css?

Zoltan: Serifa Да, это стиль, вносить в css и подключать к сайту, либо прописать на странице в тегах <style>. Полный код без комментариев #button_sujet, #button_sujet span{ display:block; width:160px; height:40px; position:relative; overflow: hidden; } #button_sujet span{ height:120px; background: url(http://lesson.dark-role.ru/demo/spryte_button_files/sujet.gif) 0 0 no-repeat; text-indent:-9000px; } #button_sujet:hover{ background:none; } #button_sujet:hover span{ top:-40px; } #button_sujet:active span, #button_sujet:focus span{ top:-80px; } body{ background: #d6d6d6; }

Serifa: А теперь все делаем на форумах такие кнопки и отписываемся о результатах! У кого все правильно - получают зачет))) Вот думаю, куда мне такую кнопку присобачить?)

Zoltan: Serifa Да кому оно надо, еще себе такие кнопки рисовать Сегодня урок ориентирован на ИЕ-ненавистников, как я :) Что делаем? Просто даём знать посетителю, что по ссылке он уже ходил ;) За все ссылки по умолчанию отвечает класс "a", у которого есть несколько вариантов - ссылка, просто на страничке (a); посещенная ссылка (visited); ссылка, на которую наведен курсор (hover), и ссылка на страничку, на которой находится пользователь (active). Сейчас рассматриваем посещенные ссылки, однако, заменив a:visited на любое значение - это можно изменить ;) Эффект первый, зачеркивание ссылок. Все просто, перечеркнем посещенные ссылки. Посетить их все равно можно, просто линия поперек. Пишем в css такое a:visited { text-decoration: line-through; } Получаем зачеркнутые ссылки. посмотреть в действии Естессна, можно применить не только к ссылкам, а вообще к любому тексту, но мы сегодня о ссылках) Это самый простой эффект. Следующие немного сложнее. Для браузера ИЕ - фатально сложно, проверив на установленном у меня ИЕ 8, оказалось, что оно не в силах отобразить ничего. Так что.. В любом случае, можно не обращать внимания на этот факт - пользователи браузеров получше всё увидят. А ИЕшники... сами виноваты Картинка около ссылки :) Галочка, в данном случае. Прежде всего, нам нужно найти место, куда воткнуть картинку) Потому пишем в css такое a:visited { padding-right: 12px; } паддинг - значит отступ, райт - право. Т.е отступить вправо 12 пикселей, пока что просто Самое время добавить картинку) Пишем в css такое a:visited { padding-right: 12px; background: url(Supergifka.gif) no-repeat 100% 50%; } background задаёт нашей ссылке задний план, смещённый на 12 пикселей вправо. no-repeat запрещает ссылке повторяться. 100% указывает, что картинку нужно отображать после ссылки, указав 10% мы получим картинку на 10% от начала ссылки. А не указав, по умолчанию получим в самом начале. Оно нам надо? посмотреть в действии Но, ведь есть еще классы, к которым можно привязать еще значений) Привяжем к уже существующей ссылке с галочкой еще пункт. a:visited:hover { background-image: url(Supergifka_navedenie.gif) } Т.е в css уже такой код a:visited { padding-right: 12px; background: url(Supergifka.gif) no-repeat 100% 50%; } a:visited:hover { background-image: url(Supergifka_navedenie.gif) } Что мы сделали?) Привязали к наведению курсора на ссылку отображение уже другой картинки, т.е горит галочка - навели, она потухла. Или наоборот, это уже как захотите, я описываю только общий принцип. Можно еще побаловаться с настройками и сделать так a:visited { padding-right: 12px; background: url(Supergifka.gif) no-repeat 100% 50%; color: #aaa; text-decoration: none; } a:visited:hover { background-image: url(Supergifka_navedenie.gif); color: #f00; } Тоесть, по умолчанию, посещенные ссылки серые с красной галочкой, а при наведении - красные с серой галочкой Светофор) Идём дальше) Используем псевдоэлемнты. Пишем в сss так a:visited:before { content: " (Вы ходили по этой ссылке!)"; } Что мы сделали?) Мы приписали перед ссылкой (before) текст, указанный в кавычках :) Или сделаем другой текст и после, after a:visited:after { content: " (ok)"; font-size: 70%; } Или настроим немного размер нашего "ок") a:visited:after { content: " (ok)"; font-size: 70%; } Теперь, благодаря параметру 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: Zoltan, ты будешь удивлен, но в Хроме тоже ничего не работает!(( Настройки файрвола - там все разрешено. Может, адблок или что-то такое? Проверила в Опере - работает. В Хроме - нет ни галочек, ни эффектов, ничего.

Zoltan: Serifa Cкачал хром, действительно. Не работает только для общих условий, т.е конструкция типа a:hover:after { content: " (Эй! Вы здесь уже были!)"; font-size: 80%; text-transform: uppercase; color: #f00; } РАБОТАЕТ. А вот уже a:visited:hover:after уже нет. Причем в весии хрома 5 и ниже это было! Отписался на форуме у них, жду ответа. Может, включат исправление в новой версии... печально, что не работает(

Serifa: a:hover:after { content: " (Эй! Вы здесь уже были!)"; font-size: 80%; text-transform: uppercase; color: #f00; } - а у меня не работает(( У тебя никаких расширений не стоит? У меня есть 1. ад блок 2. Browser Button for AdBlock - Версия: 0.0.12 3. Plugin helper for chrome - Версия: 8.8 4. Awesome Screenshot: захвати и подпиши - Версия: 2.4.9 5. Download Master - Версия: 1.1.4 6. Расширение Download Master для Chrome 7. Google Translate - Версия: 1.2.3.1 8. Speed Dial (ru) - Версия: 2.1.0 9. Web Developer - Версия: 0.3.1 10. YouTube Music Video Lyrics - Версия: 1.1.0 (отключено) 11. Расширение Web страницы - Webpage Screenshot - Версия: 4.6.2

Zoltan: Serifa Чистый хром, вообще без ничего. А на этой страничке работает? click here

Serifa: А там работает! Что ты изменил?

Zoltan: В ходе оперативного расследования оказалось, что максимум, что нам позволяет хром - это установить цвет посещенной ссылки. a:visited {color:black !important;} Потому, что... в нём где-то есть дырка, благодаря которой через это можно применить эксплойт и сломать пользователя. Гугл об этом оперативно умалчивает А вот мозилла сообщает подробности http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ Однако, проверив в мозилле 3.0.5 заметил, что там все работает. Ок, урок потерпел крах, не работает в хроме. Досадно. Пост поправить не могу, увы; эффекты работают в ие 8, на версии ниже проверить не могу( Хром же игнорит всё. Обещаю в последующем проверять сначала. Однако, хром позволяет разукрашивать ссылки НЕ посещённые как угодно хD Что, собственно, теперь и демонстрируется в демо. А посещенные.. украсим цветом) Обещаю, что потом об этом будет урок на java, мы все-таки разрисуем эти посещённые ссылки

Serifa: А какое именно демо, которое в предыдущем посте или выше? Сейчас проверю, что там с правкой постов. На Борде многое остается непонятным, например, система перехода из участников в "постоянные участники". То самое демо, в котором в Хроме "все работает"?)

Zoltan: Serifa пишет: А какое именно демо тут проверял в ИЕ 8, Мозилла 3.0.5, Хром 6, опера 10.10 и 11. Все работает. Не работает только для visited. Весь урок там, т.к небыло возможности править пост.

Zoltan: Продолжаем :) Сегодня о выпадающих меню, будем использовать новые свойства css3, увы, не всеми браузерами поддерживаемые. Работает без cкругления углов в ИЕ8, опера 10.10, частичная поддержка эффектов в опера 11, идеальная совместимость - гугл хром. В любом случае, меню работает во всех браузерах. Отображается только немного по-разному :) Итак, начнём с простого, с каркаса :) У нас есть разделы и некоторые ссылки, которые мы обрамляем в хтмл код :) <ul id="nav"> <li ><a href="http://moysuperforum.ru/">На главную</a></li> </ul> Итак, начали :) ul = начало нашего меню. li - означает элемент меню. Но зачем нам одна ссылка? :) Добавим больше <ul id="nav"> <li ><a href="http://moysuperforum.ru/">На главную</a></li> <li><a href="">Разделы</a></li> </ul> Итак, пока что 2 ссылки и всё. Пока что просто, верно?) Теперь добавим в пункт разделы, собственно, выпадающие элементы ;) <ul id="nav"> <li ><a href="#">На главную</a></li> <li><a href="#">Разделы (со вложениями)</a> <ul> <li><a href="#">Игры</a> </ul> </li> </ul> Конструкция вложения в меню - открываем новый элемент li, внутрь него запихиваем новый ul - это то меню, что будет выпадать при наведении на родительский li, т.е ссылку, которую создали чуть выше. Таким образом, вложенность может быть неограниченной ;) <ul id="nav"> <li ><a href="#">На главную</a></li> <li><a href="">Разделы (со вложениями)</a> <ul> <li><a href="">Игры</a> <ul> <li><a href="">Локационки</a></li> <li><a href="">Эпизодички</a> <ul> <li><a href="">Гениальные</a></li> <li><a href="">Интересные</a></li> <li><a href="">Не очень =\</a></li> </ul> </li> <li><a href="">Настолки Оо</a></li> </ul> </li> <li><a href="">Флуд</a></li> <li><a href="">Рекламный раздел</a></li> </ul> </li> <li><a href="">Регистрация</a></li> <li><a href="">Сюжет</a></li> </ul> Теперь наш стиль, тобишь css :) Для начала, мы открывали меню (ul) с айди nav, чтобы выделить его среди прочих) Присваием этому id стиль #nav { margin: 0; padding: 7px 6px 0; background: #7d7d7d url(gradient.png) repeat-x 0 -110px; line-height: 100%; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); } Комментарии по строчкам %) Маргин - отступы, ноль пикселей - нам не нужно пустое пространство Значение отсупов от края до содержимого, в пикселях. Задний фон нашего меню, используем одну маленькую картинку, запрещаем ей повторяться. Высота строки 100% - чтобы гарантированно влез шрифт сглаживание углов в 2 пикселя. Работает в новых браузерах. Отсюда и до конца - костыли для мозиллы, чтобы меню не поломалось в ней Далее, берем известный нам айди nav и присваем стиль элементам li внутри этого айди #nav li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } Полный код css #nav { margin: 0; padding: 7px 6px 0; background: #7d7d7d url(gradient.png) repeat-x 0 -110px; line-height: 100%; display: inline-block; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); } #nav li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } /* родительская ссылка */ #nav a { font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding: 8px 20px; margin: 0; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0,0,0, .3); } #nav a:hover { background: #000; color: #fff; } /* родительская ссылка при наведении курсором */ #nav .current a, #nav li:hover > a { background: #666 url(gradient.png) repeat-x 0 -40px; color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); } /* дочерние разделы */ #nav ul li:hover a, #nav li:hover li a { background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; } #nav ul a:hover { background: #0078ff url(gradient.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 1px 1px rgba(0,0,0, .1); } /* стили для li */ #nav li:hover > ul { display: block; } /* cписок дочерних ли */ #nav ul { display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 35px; left: 0; background: #ddd url(gradient.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3); } #nav ul li { float: none; margin: 0; padding: 0; } #nav ul a { font-weight: normal; text-shadow: 0 1px 0 #fff; } /* Дорние от дочерних li %) */ #nav ul ul { left: 181px; top: -3px; } #nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } #nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; } /* Выравниваем кочки */ #nav:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } Лайв-демо тут. В хроме и новой опере углы закруглены, в остальных браузерах меню квадратно-гнездовое :) Кстати, принимаю заказы, если кто-то что-то хочет сделать, но не знает, как :) Мну злой, но не кусючий, пишите

Serifa: А на Борду придется запихивать весь этот длиннющий код? С выравниванием кочек? Ладно, попробуем как-нибудь, как разгребу немного, да и диз надо облегчить здесь, че то он в Хроме временами прыгает. Здесь боковые бордеры ведут себя неадекватно.

Zoltan: Serifa пишет: А на Борду придется запихивать весь этот длиннющий код? С выравниванием кочек? угу :( Лучше бы вынести в отдельный css-файл, тогда бы он загружался один раз, а потом браузер бы доставал уже из кеша. Вообще, этот код весит копейки, так меньше 3х кб... но все равно не очень удобно, что на борде в файл вынести нельзя успехов с дизом

Zoltan: вспомнил про эту темку, решил что-то полезное описать, например, оформление цитаты, на майбе и клонах часто её раскрашивают. На борде же это нереально без стороннего яваскрипта, так как изначально у цитаты нет ни одного уникального идентификатора - можно изменить её стиль, но тогда изменится весь стиль форума. Так вот вопрос, нужен ли мануальчик такой, с "левым" скриптом?

Morfus: Где-то мне попадался уже такой...

Zoltan: Morfus просто единственный вариант, не удивлён, что такое было)

Serifa: Я лично "за". Борду ведь ломать не так жалко, как форум на платном хостинге

Zoltan: Serifa пишет: Борду ведь ломать не так жалко, как форум на платном хостинге Никто ничего не ломает) Просто немного изменим вывод. Всё равно всё обрабатывает ява-скрипт. Потому можно подключить свой, который "перехватит" бразды правления. Потому скрипт желательно подключать в самом низу, насколько мне известно, на борде есть возможность воткнуть скрипт в подвал. Если подключить его вверху, то работать не будет. Т.к весит он довольно много (приходится заново объявлять целую функцию), то втыкать весь код на страницу неразумно, лучше подключить по типу script src="http://... Т.к на борде этого сделать нельзя - каждый может зарегистрироваться на юкозе, народе, гугл коде или вообще где угодно и положить скрипт туда. Возможно, можно и сократить размер, вырезав лишнее, но у меня тогда перестаёт работать. Потому скрипт весит 15кб. Не много. Подключать можно так <script src="http://editor.darknessworld.ru/js/forum2.js" type="text/javascript"></script> Оттуда же можно сохранить скрипт и залить куда угодно, смотрите выше. С моего сайта тоже работать будет. Специально ничего не сжимал, чтоб было ясно видно, что вредоносного кода там нет. можно сжать и тогда будет 11 килобайт кода. Что мы делаем? Раньше сама "цитата" была таблицей, без особых атрибутов и возможности настройки. Теперь это 2 div'a, которые можно спокойно настроить через css. Заголовок, т.е сам текст "цитата:" и тело цитаты. Если вставить скрипт, а потом вставить css-код <Style> #quot_header { padding-left:40px; color:grey; font-size:10px; border: 1px dashed black;} #quot_body { color:white; font-style:italic; border:2px solid grey; background: #18181a; padding: 5 5 5; text-shadow:red 0px 1px 0px; -moz-border-radius:13px; -webkit-border-radius:13px; border-radius:13px; } </Style> Тогда выглядеть будет так #quot_header - это заголовок, #quot_body - "тело". Т.к все настройки вынесены в css, то каждый может сам себе настроить, как угодно. Если не настраивать, то выглядеть будет, как простой текст, т.е без любых выделений вообще.

Serifa: Вопрос: 1. А где на борде эту css закапывать? Тут под нее нет места, тут все встроенное. (А, т.е. вставляется в хтмл-верх?) 2. Где взять сам скрипт? 15 кб весит, я правильно поняла? Ну, это как бы немного...

Zoltan: Serifa пишет: 1. А где на борде эту css закапывать? Тут под нее нет места, тут все встроенное. (А, т.е. вставляется в хтмл-верх?) Я вообще в шоке от этой "встроенности" на борде, если честно. Уныло было не выделить места под css, картинки и скрипты. Потому в посту выше советовал завести аккаунт где-нибудь "на стороне". Например, есть яндекс-хостинг. Php и прочие языки он не поддерживает, но положить туда скрипты и css можно. Если этого не делать - то можно вставить css хоть в хтмл-верх, хоть в низ, эта штука будет работать в любом случае. А вот скрипт - только в низ. Serifa пишет: 2. Где взять сам скрипт? 15 кб весит, я правильно поняла? Ну, это как бы немного... Можно вставить в тело форума код <script src="http://editor.darknessworld.ru/js/forum2.js" type="text/javascript"></script> я положил скрипт себе на сайт. Можно перейти по ссылке, откроется скрипт, потом нажать "файл-сохранить" и положить его куда угодно и оттуда уже подключать.

Morfus: CSS тоже можно на Борде подключать отдельным файлом. В этом случае между head и /head.

Serifa: Тут остается самый главный вопрос: куда класть эти файлы? Я вот не хочу их к себе на фору орг уносить, мне там зачем бордовское постороннее? А куда еще? Специально регится на юкозе ради пары скриптов и папки картинок - это слишком жирно.

Morfus: Serifa, тут уж нужно выбирать - нужно оно на форе орг или надо искать другое хранилище. )

Serifa: Вот и я про другое хранилище. Потому что на форуме лишние файлы, не имеющие прямого отношения к самому форуму и его работе, скорее вредны. А вот альтернативы нет. Борду тоже можно понять - ей на своих серверах лишние файлы тоже не нужны. В итоге все остаются при своем интересе.

Zoltan: Morfus пишет: CSS тоже можно на Борде подключать отдельным файлом. В этом случае между head и /head. Можно, никто не спорит. Проблема в том, что хранить на борде - нельзя. Да и не суть важно, между head или нет, все равно будет работать. Serifa пишет: Я вот не хочу их к себе на фору орг уносить, мне там зачем бордовское постороннее? А куда еще? Специально регится на юкозе ради пары скриптов и папки картинок - это слишком жирно. Ну, скрипт можно тащить напрямую от меня, никто не запрещает ;) Для картинок есть куча хостингов.. для css я бы мог написать интерфейс-конструктор с сохранением, но, опять же, не без регистрации. мне уже 2 года спамеры шлют спам на сайт, которого 2 года, как нет - сделал одну форму общедоступной и понеслась. так что мне оно не шибко надо, гостю привелегии давать) Кстати, поколупался, борда проста, как три копейки, можно хоть всю раскурочить. И очень, очень много таблиц. Это ужасно UPD Ещё немного поиздевался...Вставляем в низ форума <script src="http://editor.darknessworld.ru/f_/fjs_packed.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="http://editor.darknessworld.ru/f_/def.css" /> Скрипт сжат, 12 килобайт После чего цитата на форуме выглядит так В качестве бесплатного бонуса добавлена обработка бб-кодов [center], [right], [left], [align=center], [align=right], [align=left].

Zoltan: Некоторые жалуются, что реклама на ресурсе разрывает шаблон. Исправим это. .font1 img {vertical-align: text-top; min-width: 10px !important; max-width: 200px !important;} Добавляем в css. Сакральный смысл имеет выделенное чёрным - 200 пикселей и не больше. Картинка остаётся той же, но отображается, как 200px по ширине. Насильно. Не работает в IE6 (да кому он вообще нужен?) Возможны какие-то глюки, т.к на борде нет уникальных идентификаторов - css может присвоится ещё чему-то, но маловероятно.

CharlieCarbon: Zoltan, тебя на фтп надо отправить) Реально ведь полезные вещи!

Serifa: Либо я не поняла, как это вставлять... но что-то цитата не работает(( Может, скрипт от Гугля мешает?

Zoltan: Serifa Нет-нет, моя вина, прошу прощения. Все дело в том, что "собирал" всё, открыв исходный код форолла и издеваясь дебаггером, как оказалось, этих тестов недостаточно, потому я создал форум на борде и отловил, как можно подключать. Там же можно посмотреть, что да как. В поле html-новости и только туда вставляем <script src="http://editor.darknessworld.ru/f_/fjs_packed.js" type="text/javascript"> И куда угодно, в любое место - хоть в те же новости, хоть вверх, хоть в низ <link rel="stylesheet" type="text/css" href="http://editor.darknessworld.ru/f_/def.css" /> (примечание, этот пункт можно не использовать, если хотите настроить цитату по-своему, т.е в своих стилях настроить #quot_body и #quot_header) з.ы. и ещё какой-то странный глюк с выбором дизайна, пока что не понял, в чём дело. Уже понял, т.к применяется только к стандартному дизайну, то на других не работает. Почему нельзя редактировать все дизайны, а не только "оригинальный"?

Serifa: Так, значит, цитаты работать не будут?( Опять попробовала - нет эффекта(

Zoltan: Serifa пишет: Так, значит, цитаты работать не будут?( Будут, но только в дизайне по умолчанию, в других нет. Тоесть, сами-то цитаты работать будут, но будут оформлены по умолчанию. Как сейчас. Если можно как-то редактировать остальные дизайны - напишите, сделаю. Serifa пишет: Опять попробовала - нет эффекта( А на том форуме, что по ссылке, работает? Все правильно вставляете? в новости нужно скрипт засунуть Да, ещё поковырялся, вариант годится такой, если в новостях более одного скрипта. Текст не пробовал <script src="http://editor.darknessworld.ru/f_/fjs_packed.js" type="text/javascript"> никаких </script>

Serifa: По ссылке на том форуме все видно( Сейчас еще раз проверю у себя. Че то не пашет( Может, кэш почистить? Никто ничего не видит?

Zoltan: Serifa Cудя по всему, скрипт подключился. А стили не забыли подключить?) css файл <link rel="stylesheet" type="text/css" href="http://editor.darknessworld.ru/f_/def.css" /> или настроить в css форума стили для #quot_body и #quot_header

Serifa: Zoltan, камрад, ты гений) Оно заработало! Так красиво. Очень подходит к стилю форы) А почему ты мне "вы" говоришь? Я, вроде, тут в единственном экземпляре с тобой разговариваю) У меня вот такая проблема: никак не получается задвинуть эту кнопку посреди ячейки таблицу в шапке форума. В див запихивала - кнопка все равно выползает влево и нарушает равновесие. Не хочет быть по центру! Вот этот кусок кода: <g:plusone annotation="inline"></g:plusone>

Zoltan: Serifa если что-то по стилю не подходит - могу донастроить :) а на "вы" просто привычка. Бывает. Serifa пишет: <g:plusone annotation="inline"></g:plusone> Вообще, есть хороший тег <center> что-нибудь </center>, но я так глянул, здесь не поможет, все равно не по центру. Сейчас посмотрю, что можно сделать, только уже через css. p.s. и зачем про меня в шапке форума? лучше убрать бы :)

Serifa: Удобная штука, этот плюсик) Zoltan пишет: p.s. и зачем про меня в шапке форума? лучше убрать бы :) Камрад, ты достоин прославления и в более широких масштабах! Но если тебе не нравится - уберу) Может, в подвале форума такой лозунг написать? Там не так заметно)

Zoltan: Гуглокод создаёт блок размером 450 пикселей, так что даже если его отцентровать, то визуально выглядит не по середине. Можно нажать "выделить всё", тогда блок этот отчётливо видно. потому такая вставка идеально не отцентрует, только примерно. <center><g:plusone annotation="inline"></g:plusone></center> да не, лучше вообще не надо меня "прославлять", и так неплохо

Serifa: Zoltan пишет: да не, лучше вообще не надо меня "прославлять", и так неплохо Кошельки свои давай, мы их повесим на странице. Напишем: камраду Золтану. Народ должен знать своих героев!)) И чтить их. И кидать им денежку)

Zoltan: Serifa мне пока денег хватает, а почитания не ищу. Тем более, здесь не настолько большая модификация, на самом деле, просто мелочи.

Serifa: Камрад, если тебе хватает денег, можешь поделиться со мной)) Дело разве в величине модификации? Просто у нас ты такой единственный! Луч света в царстве борды, можно сказать)

Zoltan: Serifa пишет: Камрад, если тебе хватает денег, можешь поделиться со мной)) начну делиться, перестанет хватать, перестанет хватать - перестану делиться какой-то странный замкнутый круг. Да ладно, единственный. Скрипты для борды есть даже на а.борда.ру, как ни странно :D если что-то ещё переделать - заказывайте

Serifa: Выявили странный баг со скриптом пропали админские кнопки "бан", "айпи" и квадратик для галочки, для выделения нескольких сообщений( Как бы редко пользуемся, но для нормы надо. Можно что-то придумать?

Zoltan: Serifa пишет: Можно что-то придумать? done Ещё что-нибудь?

Serifa: Аллилуйя, кнопки вернулись! Камрад, ради счастья видеть твое присутствие на этом форуме я придумаю еще десяток "что-нибудь" ))

Serifa: Zoltan, а для движка SMF твои красивые цитаты можно приспособить? Там я хотя бы знаю, где файлик css находится) Ну и в корень форума сам скрипт можно закинуть.

Zoltan: Serifa Вообще, можно. И там скрипт не нужен) Нужно открыть основной файл css и вставить в самый низ .quoteheader { padding-left:40px; color:grey; font-size:10px; border: 1px dashed black; -moz-border-radius:25px 12px; -webkit-border-radius:25px 12px; border-radius:25px 12px; width:350px;} blockquote { color:white; font-style:italic; border:2px solid grey; background: #18181a; padding: 5 15 5; text-shadow:black 0px 1px 0px; -moz-border-radius:13px 35px; -webkit-border-radius:13px 35px; border-radius:13px 35px;} В идеале, сначала нужно найти стили для quoteheader и blockquote, и удалить их. Но должно работать и без этого. Serifa пишет: Камрад, ради счастья видеть твое присутствие на этом форуме я придумаю еще десяток "что-нибудь" да хватит же меня смущать, в самом деле

Serifa: Zoltan пишет: да хватит же меня смущать, в самом деле Говорю, что думаю) Уж прости) Сейчас все попробую, если успею, а то у меня опять интернет заканчивается)

Morfus: Zoltan утащил на uCoz. Спасибо.

Serifa: Это удивительно, но на том форуме оно тоже работает. Времени не было разыскивать стили, просто вставила в конец файла. Вот тут видно хорошо: http://forroll.org/index.php?topic=2279.msg19422#msg19422 Попробую потом еще стили те удалить, что будет...

Serifa: С удаленными стилями форума цитаты выглядят криво, фон смещается, поэтому стили оставила на месте, а новые прописала внизу файла css. Вроде пока работае.

Zoltan: Morfus Не за что. На юкозе я посмотрел, стиль прописывается прямо в исходном коде <div class="bbQuoteName" style="padding-left:5px;font-size:7pt"> Это плохо, очень плохо. Потому может не работать, если нет возможности удалить\заменить выделенное 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; - "тень" теста. На моём варианте цитаты его не видно, т.к фон чёрный, тень чёрная.

Morfus: Zoltan, всё гораздо проще. .codeMessage,.quoteMessage {background: #18181a;color:white;font-style:italic;text-shadow:black 0px 1px 0px;padding: 5px 15px 5px;border:2px solid grey !important; -moz-border-radius:13px 35px !important; -webkit-border-radius:13px 35px !important; border-radius:13px 35px !important;} А заголовок: .bbQuoteName,.bbCodeName {padding-left:40px;color:grey;font-size:10px;border: 1px dashed black; -moz-border-radius:25px 12px; -webkit-border-radius:25px 12px; border-radius:25px 12px; width:200px;} И замечательно всё выглядит. Только, если появляется ползунок справа, то там нет закруглений. Но высоту цитаты тоже можно увеличить. ) http://poligon.name/forum/22-4-196-16-1327584935

Zoltan: Morfus пишет: всё гораздо проще. я имел ввиду, что прямо в теге цитаты указывается, например, padding-left. Потому из css свойств заголовка цитаты можно удалить padding-left:40px; ведь всё равно работает только паддинг, указанный в коде тега, padding-left:5px; здесь хорошо заметно, на форолле "цитата:" пишет с отступом, а вот у вас - уже нет. Не критично, но неприятно, что "прибито гвоздями". Приоритет всегда за опциями, которые объявлены позже всего. А вот паддинги у тела цитаты, кажется, работают нормально. Morfus пишет: Только, если появляется ползунок справа <div class="quoteMessage" style="border:1px inset;max-height:200px;overflow:auto; Кажется, увеличить размер блока цитаты, как и убрать ползунок - нельзя, снова прибито гвоздями. Или можно редактировать шаблоны в админке сайта? не помню уже. Это бока юкоза, не стиля. На форолле ползунка не будет, какой бы ни был размер цитаты

Morfus: Совсем убрать нельзя, изменить величину - можно. Вообще, всё что прописано для стилей прямо в скрипте, можно переопределить с помощью !important. Про Борду разговор отдельный, я этого сейчас не касаюсь.

Zoltan: Morfus пишет: всё что прописано для стилей прямо в скрипте, можно переопределить с помощью !important. а если в скрипте уже будет стиль с параметром !important? ;) говорю же, не критично, но неудобно. Да и вообще, считается дурным тоном.. Morfus пишет: Про Борду разговор отдельный, я этого сейчас не касаюсь. привёл в качестве примера. и кстати, весь этот скрипт с цитатой на том же принципе основан, что более "поздние" параметры срабатывают вместо "ранних".

Morfus: Zoltan пишет: а если в скрипте уже будет стиль с параметром !important? ;) Не будет. Код пишется с расчётом, чтобы было корректное отображение при наличии кривых ручек, но для знающего пользователя всегда оставляется возможность сделать по своему. !important не дурной тон, а вполне корректный инструмент. Если использовать по назначению.

Zoltan: Morfus пишет: Код пишется с расчётом, чтобы было корректное отображение при наличии кривых ручек Э? там ни на что не влияющий отступ в 5 пикселей и дурацкая полоса прокрутки в теле цитаты. Это само по себе не есть корректное отображение - кому нужны лишние полосы прокрутки? Они обычно только мешают, когда содержимое блока нужно показать целиком, например, при чтении цитат. Так что нет, там изначально пишется не с расчётом на кривые руки, а, видимо, по индийскому методу, не иначе. Morfus пишет: !important не дурной тон моветон не !important, а прописывать стили в хтмл.

Morfus: Zoltan Прокрутка не дурацкая. Меня дико раздражают километровые посты-цитаты. А тут аккуратное отображение. Zoltan пишет: Так что нет, там изначально пишется не с расчётом на кривые руки, а, видимо, по индийскому методу, не иначе. Вы гадаете, а я знаю. *пожимает плечами* Zoltan пишет: моветон не !important, а прописывать стили в хтмл. Учитывая, что в исходном коде страницы не видно какая часть кода выведена системным кодом вида $COD$, а какая вписана в шаблон, не вижу оснований для такой категоричности. В uCoz-е есть масса нюансов, которые со стороны не очень понятны. Поэтому рассуждать о них с предубеждённым наблюдателем, только время зря терять.

Zoltan: Morfus пишет: Меня дико раздражают километровые посты-цитаты. а меня дико раздражают блоки с прокруткой, т.к их надо прокручивать; скорость чтения позволяет читать больше 200px, а бесконечная прокрутка бьёт по глазам. В случае, если бы безымянные пейсатели кода учитывали юзабилити, то припаяли бы кнопку "развернуть" к цитате, чего нет. Думаю, я не один такой, кто в состоянии прочитать больше трёх строчек за раз. Morfus пишет: Вы гадаете, а я знаю о нет, я всего лишь констатирую факт. Тот код не спасёт от кривых ручек, даже наоборот, признак этих самых кривых ручек. Morfus пишет: Учитывая, что в исходном коде страницы не видно какая часть кода выведена системным кодом вида Да, это можно вырезать из шаблона, я в курсе. Но это есть в исходном варианте шаблона, прописанном розрабами. В юкозе нюансы? право, Америку открывать не надо, я пару раз имел дело с сайтами на юкозе, никаких нюансов там нет. Кроме невозможности пройти валидатор. В любом случае, мне не интересно спорить с вами, каждый защищает свою точку зрения и от спора проку не будет и на грош. Да и тема изначально была предназначена не для этого.

Morfus: Аналогично. Мне вообще спорить в таких темах не интересно. Фломастеры, они и в Африке фломастеры и любое категоричное мнение смотрится как минимум странно. В любом случае следует как факт принимать движок сервиса и использовать его преимущества. uCoz хорош тем, что доступ к изменению кода страниц там значительно больше, чем на Борде или даже миббе. Больше только на том движке, что сам ставишь. В отличие от Борды там для форума предусмотрены идентификаторы для практически 100% элементов и стилями можно сделать достаточно много. Хотя доступ к шаблонам тоже хорошее решение. Всегда восхищало трепетное отношение к валидаторам. Особенно учитывая, насколько на это кладут разработчики браузеров. )))

Serifa: А можно глянуть (пример), о чем вы так горячо спорили? Что там такое на юкозе страшное? Потом попробую что-то в цитате поменять, с помощью - Zoltan пишет: распишу что зачем в этом стиле, ведь не обязательно ставить именно такую цитату, всё самое "вкусное" - в настройке под себя) Как время найду.

Zoltan: Serifa Просто юкоз генерирует хтмл-код, в котором некоторые стили уже прописаны, на счёт них и спорили В основном, это строчка <div class="bbQuoteName" style="padding-left:5px;font-size:7pt"> Это не страшное, просто не очень удобное, как по мне, решение. А вот Morfus'у нравится. Кому как Serifa пишет: Потом попробую что-то в цитате поменять, с помощью Если что, не обязательно все стили писать, можно просто добавить себе в css что-то типа #quot_body { background: white;} это заменит цвет фона цитаты.

Serifa: На этом форуме цитата смотрится даже эффектно, можно и не менять ничего. А вот на форролл орге фон форума - серо-голубой. С другой стороны, смотрится тоже эффектно! Так что думаю, а надо ли что-то менять? Как говорится: если оно работает - отойди и не трогай :)

Serifa: Верстка резинового текстового поля (input[type=text]) Взято отсюда: http://unixhome.org.ua/blog/315.html#comment322 ЦИТАТА: __________________________________________ Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (/>), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить следующим условиям: Возможность установки любых горизонтальных и вертикальных отступов у текста; Элемент должен занимать весь контейнер, в который он помещен; Клик мышью в любое место текстового поля устанавливает в нем курсор. Ответ достаточно прост и решается следующим методом: Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста. Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border) и внешних отступов (margin), будет равна: width = width + padding-left + padding-right Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область. Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров: 1 <div class="input-width"> 2 <div class="width-setter"> 3 <input type="text" value="" /> 4 <div> 5 </div> Каждый контейнер выполняет свою роль: input-width – этот контейнер задает результирующую ширину текстового поля; width-setter – этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов. Вот набор стилей, который разъяснит эту конструкцию: 01 .input-width { 02 height:23px; 03 border:1px solid #999; 04 background:#fff; 05 } 06 .width-setter { 07 height:23px; 08 margin:0 9px; 09 } 10 .width-setter input { 11 width:100%; 12 height:14px; 13 padding:4px 9px 5px; 14 margin:0; 15 font-family:Tahoma, Geneva, sans-serif; 16 font-size:12px; 17 line-height:14px; 18 color:#000; 19 border:0 none; 20 background:#9C6; 21 } Пример 1 Из стилей получается, что элемент 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. Опишем по-новому исходный набор контейнеров: 01 .input-width { 02 height:23px; 03 border:1px solid #999; 04 background:#fff; 05 } 06 .width-setter { 07 height:23px; 08 margin:0 9px; 09 position:relative; 10 } 11 .width-setter input { 12 width:100%; 13 height:14px; 14 padding:4px 9px 5px; 15 margin:0; 16 font-family:Tahoma, Geneva, sans-serif; 17 font-size:12px; 18 line-height:14px; 19 color:#000; 20 border:0 none; 21 background:#9C6; 22 position:absolute; 23 left:-9px; 24 top:0; 25 } Пример 2 В итоге, при применении таких стилей выполняются поставленные в начале задачи. Текстовое поле получилось с заданными отступами резиновым и кликабельным в любом его месте. Чтобы задать конкретную ширину итоговому элементу, необходимо лишь прописать свойство 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 кроссбраузерная работоспособность метода не гарантирована.

Zoltan: имхо, изврат. Инпут даже высотой в n строк всегда будет иметь одну строку - так он себя в браузерах ведёт. И набираться строка будет строго по центру огромного поля. А перенос строки в инпутах как бы не предусмотрен.. В таких случаях лучше пользоваться textarea.

helheim: 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; //та самая высота строки. } То же самое, коротко без комментов: Код: 1. <блок> 2. <input type="text" value="lalala" id="olala" /> 3. </блок> стиль: 01. блок { 02. position: relative; 03. width: 400px; 04. height: 14px; 05. padding: 20px 30px 226px 50px; 06. } 07. #olala { 08. width: 100%; 09. height: 14px; 10. padding: 20px 30px 226px 50px; 11. margin: -20px -30px -226px -50px; 12. line-height: 14px; 13. }

Zoltan: helheim Извращение чистой воды. Инпут всегда в одну строчку, потому смысла в отступах не вижу. Ну окей, будет эта одна строчка посреди блока - красота? как по мне, практической ценности ровно ноль. Если уж нужен подобный изврат, то <div id="block" contenteditable="true"> <span> hooray! </span> </div> Ну и приправить стилями по вкусу.

helheim: Zoltan, хах! я тоже не понимаю, зачем. )) но мало ли, может у кого-то фетиш такой: инпутами все пространство окна занимать, или там рисовать в стиле кубизма: пиксель-арт. Вот хлебом не корми - да инпут сделать! С пятым хтмл удобно, конечно, но относительно стандартных форм ИМХО таки все еще остался один неприятный косяк: приходится на скрипты отправку вешать, вместо того, чтобы элементарным сабмитом отправлять. Нехай бы они еще сабмит к такой штуке аналогичный формам прикрутили - цены бы не было. Пока же я все-таки люблю, чтобы как минимум текст и формы юзабельно отображались и в дельфине, и в линксе.

Zoltan: helheim пишет: Вот хлебом не корми - да инпут сделать! cейчас как раз пишу скрипт, который пробегается по массиву и для каждого элемента создаёт инпут... Сейчас это что-то около полутора сотен. Не хотел бы, чтоб каждый занимал столько места helheim пишет: приходится на скрипты отправку вешать это да, но найдите мне того, у кого они отключены. И я скажу "сам виноват" В конце-концов, можно получить $('#block').html() и заслать его через форму, хоть хидден полем, хоть вообще без полей.

helheim: Zoltan, это какой-то жестокий конструктор сайтов на 5хтмл? О_о скрипты у меня бывают отключены когда с мелкого бука сижу, в вап-версиях отключены нередко, у поисковых роботов (например, того же яндекса), некоторые фаерволы их некошерно режут. Первое - ни разу не ориентир, второе - тоже сомнительный, т.к. мобильная версия сайта вообще всяких джекверей и мутулсов не предполагает и всего на них похожего, а вот поисковики и трафикинспекторы порой приносят огорчения. поэтому, к сожалению, альтернатива для выключенных скриптов до сих пор - хороший стиль. С другой стороны, та же борда без скриптов вообще не загрузится, т.е. у ее пользователя они 100% включены, чем и пользуемся напропалую =). Речь-то изначально о форумах шла.

Zoltan: helheim пишет: это какой-то жестокий конструктор сайтов на 5хтмл? О_о а смысл делать конструктор сайтов, если есть движки?) всё гораздо проще, массив - код css, формочка для каждого класса, инпут для каждого параметра. Ну, у ботов они отключены - но поисковикам яваскрипт и не нужен; формочки-смайлы-аякс гуглоботу явно не интересны. мобильные версии? никогда их не делаю для сайтов, зачем? скоро будут с телевизоров лазить в интернет, так что я должен делать стили и для этих кривых браузеров? Ну уж нет. А с нормального мобильника можно и полную версию посмотреть. Трафик инспекторы? это ещё что такое и зачем им нужен яваскрипт? ;) helheim пишет: С другой стороны, та же борда без скриптов вообще не загрузится Речь-то изначально о форумах шла. Угум-с, а теперь смотрим любой не-бордовский форум с отключённым яваскриптом, пытаемся вставить смайлик\ббкод. Не работает? ну так ограниченная функциональность, сами виноваты, что браузер урезан (выключен яваскрипт).

helheim: Ну, у ботов они отключены - но поисковикам яваскрипт и не нужен а как же чтоб бордофорумы индексировали нормально, или аякс-страницы? Гугль-то видит, он вообще лапочка, а яндекс - не видит, и "подтвердить права" при регистрации вап-версии в том же я.ру на борде, например, в силу особенностей оной версии нереально =). будут с телевизоров лазить в интернет, так что я должен делать стили и для этих кривых браузеров не соглашусь за МКАД есть жизнь! =)) Да и вообще если уж верстать - так по-человечески, чтобы везде где можно ровно отображалось и одинаково, ну или хотя бы функционально., но спорить не буду =). Хотя бы потому, что спор классический, в момент превратится в холивар и истина в нем не родится точно. А с нормального мобильника Вот как раз с нормального мобильника - нельзя. Трафик инспекторы? это ещё что такое и зачем им нужен яваскрипт? Это такие программки для экономии и фильтрации входящего трафика. Кстати, весьма популярны. Избавляют страницы от попапов, перенаправлений, анимации, убирают часть или все вообще картинки, убивают на корню львиную долю (как бы не весь вообще) джаваскрипт, часто работают в том числе как баннерорезки. Полезная в общем штука, особенно когда информация нужна, а смотреть на всю эту красивость - ни сил ждать пока загрузится, ни денег. В целом обычно настраиваются под нужды каждого. Угум-с, а теперь смотрим любой не-бордовский форум с отключённым яваскриптом Практика показывает, что когда человек запрещает у себя js, то он мало того, что морально готов к отсутствию смайликов, но еще и страстно желает их у себя не видеть.

Zoltan: helheim пишет: а как же чтоб бордофорумы индексировали нормально, или аякс-страницы? На счёт первого - бордофорумы не индексируются. Только главная и вап-версия. Да и на главной бот видит шапку, скленную с подвалом, выпуская из вида все разделы-категории. Давно доказано, что поисковые боты не индексируют яваскрипт и флеш, но опознают скриптовые ссылки и баннеры. По поводу второго - если аякс страницы не открываются без яваскрипта - увольте своего вебмастера, у него кривые руки :) можно делать ссылки не href='#' и не href='яваскрипт, а с нормальным адресом и перехватывать онклик событие. Не аргумент. helheim пишет: за МКАД есть жизнь! =)) Само собой, за МКАДом есть жизнь. За МКАДом Москва. Потом, отображалось нормально на всех браузерах? этого не делает никто. На самом деле, есть браузеры без поддержки стилей и яваскриптов, например, Lynx. Сам Гугль заявляет, что Lynx отображает страницы примерно так, как видит их бот. И кто верстает дизы для них? под всех не угодишь никогда, а только подгадишь большинству нормальных людей. helheim пишет: Вот как раз с нормального мобильника - нельзя С миниоперы можно посмотреть любой бордофорум и даже отправить пост, а уж какой мобильник в наше время не поддерживает миниоперу? В более "продвинутых" браузерах уж и подавно всё работает. helheim пишет: Практика показывает, что когда человек запрещает у себя js, то он мало того, что морально готов к отсутствию смайликов Ну так об этом и речь - человек сам себе делает плохо, а виноват кто? дизайнер Давайте, я добавлю в файрволл запрет на доступ к интернету и пожалуюсь провайдеру, что у меня не работает ютуб. Вспомнилось -Установил программу от нортона, а она сожгла мне жёсткий диск!!1 -А как называется прога? -Norton Disk Destructor -Ну и чего другого ты ожидал от такой программы? Точно также можно сказать каждому, кто установил эти инспекторы, носкрипт-плагины, отключил стили, картинки, интернет и вообще компьютер - чего другого ты ожидал? всё и должно было перестать работать.

Serifa: Zoltan пишет: Обещаю, что потом об этом будет урок на java, мы все-таки разрисуем эти посещённые ссылки Надеюсь, к Новому году мы продолжим эту интересную тему :) Камрад Zoltan, возвращайся скорей! :)

Zoltan: Небольшой странный и достаточно не очевидный факт. Если вы на борде основной таблице задаёте фиксированную ширину и align="center" то в итоге получаете вертикальную полосу прокрутки. Чем больше разрешение монитора отличается от заданных размеров, тем больше скролл. Заметил на форуме CharlieCarbon'a такое. Очередной камень в огород табличных вёрсток

Serifa: Zoltan пишет: то в итоге получаете вертикальную полосу прокрутки. Вертикальную или всё же горизонтальную? Я везде на борде вижу именно загадочную непонятной этиологии горизонтальную полосу :)

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

Serifa: Хм... Сейчас смотрю с айрона (Iron - это типа аддон хрома), нет скроллбара. Странно. А с мозиллы есть всегда.

Zoltan: У меня наблюдается в хроме, мозилле и опере

полная версия страницы