Tricks and solutions
Useful tricks and best practices solutions
370 topics in this forum
-
Учимся верстать 1 2
by Fu-tai- 27 replies
- 29.3k views
Долго у меня напрашивался этот цикл статей и вот наконец изливаюсь. А цикл этот вот о чём. Вёрстка и верстальщик. Основы профессии если хотите и логика действий при вёрстке. Решил разделить пока на две статьи. И предлагаю ознакомится с первой. Верстальщик кто-он? И так поехали. Не хотелось бы скатиться до популизма и повторения много раз описанных истин, поэтому постараюсь писать как можно понятнее и всё-таки передать мысль закладываемую в текст. В сети множество примеров статей и вообще материала о принципах вёрстки, инструментах, методиках написания кода, семантике и т.?д. Но я ещё ни-разу не встречал статьи рассказывающей о том с какого бока подойти к этому процессу, с…
Last reply by larionov-sphere, -
- 13 replies
- 4.5k views
Несколько лет никто (и я в том числе) не мог найти решение надоедливой проблемы, касаемой абсолютного позиционирования в ячейках таблицы, в браузере Firefox. Но, так случилось, что рывшись долгое время в поисках этого решения я на него всё таки наткнулся, и спешу поделиться им с вами в этой статье. Абсолютное позиционирование в ячейках таблицы, в Firefox Отдельное спасибо Илюхе (SelenIT). Пока писалась статья, мы с ним узнали много нового и интересного
Last reply by Yazon_Nile, -
- 18 replies
- 12k views
Вот постоянно задаюсь вопросом, какие сайты любят поисковики. Точно знаю, что они любят семантику, релевантность, валидность, фавиконы, уникальные страницы 404, лёгкий и удобный дизайн, поменьше внешних ссылок, качественный контент. А что ещё любят поисковики?
Last reply by Great Rash, -
- 24 replies
- 16k views
Так порой случается, что необходимо в PHP сформировать «человекопонятную» дату. То есть что-то в виде «4 февраля 2010 14:35:48». Представим, что у нас есть какие-то новости на сайте и у этих новостей должна быть дата, когда новость была добавлена. Новости хранятся в БД MySQL. Наиболее подходящий, как я раньше считал, для преобразования даты вариант хранениея: UNIX_TIMESTAMP в поле типа INT, так как, если бы это был DATETIME, то перед преобразованием даты при помощи функции PHP date(), нам бы приходилось делать strtotime(). Однажды оказалось, что следующая конструкция отнимает слишком много времени: $months=array('01'=>'января', '02'=>'февраля', '03'=>'марта', '0…
Last reply by Plaurnereag, -
- 23 replies
- 10.9k views
В браузере IE9 при нажатии на F12 есть возможность выбрать режим браузера. Это IE7, IE8, IE9 с режимами совместимости. И это отображение теперь очень похоже на честное, в отличие от всякого рода эмуляций. Ура, товарищи!
Last reply by zSpx, -
- 12 replies
- 10.5k views
Посоветуйте хорошую CMS для сайта музыкального портала, нужно ничего лишнего чтоб можно было удобно добавлять музвыку описние, чтоб были хорошие расширения, чтоб шаблон можно было перекроить не тяжело, про расширения я сказал, чтоб можно было чтоб зареганные юзеры могли залить.... Естестно моды как последнее добавленное новинки ну всё как пологаеися Ну чтот тип зайцев.нет, сортировка... я так на джумлю глаз положил, посоветуйте, покритикуйте.... наставьте в путь, спасибо
Last reply by stiffler, -
- 12 replies
- 7.5k views
Недавно столкнулся с одной очень интересной (и не очевидной) проблемой. Мне по работе надо было сверстать сайт где дизайнером был предусмотрен огромный (шириной 2000px) бекграунд. Идея дизайнера такова - мы кладем этот бек на <body> и выравниваем по середине (background-position: 50% 0;), при ресайзе окна бекграунд будет все время оставаться на месте (по центру). "Ничего сложного", подумал я и наткнулся на неожиданное поведение "нормальных" браузеров. Минимальная ширина сайта была 950px и пока окно не становилось меньше все было отлично. Но, как только я делал окно меньше 950 пикселей бекграунд начинал смещаться относительно моего wrapper'а (и правильно делал, ведь …
Last reply by Great Rash, -
- 27 replies
- 28.2k views
Копался в файликах с полезными решениями, которые я для себя сохраняю и наткнулся на интересную разработку (почти что собственного приготовления) Довольно часто, при верстке "резиновой" странички, возникает необходимость выровнять список со ссылками (допустим меню) по ширине. Казалось бы без таблиц тут никак не обойтись... Однако, около месяца назад (когда кто-то на форуме озадачился этой проблемой) я придумал довольно простое кроссбраузерное решение без использования таблиц. Без лишних слов привожу код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:la…
Last reply by SelenIT, -
- 5 replies
- 4k views
На сайтах вы часто видели блок под статьей "Смотри также" или "Похожие ссылки", набор ссылок ведущих на связанные с данным материалом статьи. Мне известно два способа организации такого блока. Первый удобен для ссылок, когда их немного (несколько десятков) - делаем форму со списком всех материалов и галочками проставляем связи. Когда количество статей переваливает за тысячу такая форма теряет всякий смысл. Второй способ построен на терминах или ключевых словах, объединяющих разные материалы. Для каждого материала заводится текстовое поле, куда пишем некоторое слово (метку). Материалы имеющие одну и ту же метку считаются "похожими". Этот способ применяется в Друпале, кстат…
Last reply by Vlad, -
- 15 replies
- 24.3k views
Да-да, оно возможно! Кроссбраузерно, без скриптов, без отрицательных магринов, для текста любой высоты! Совершенно случайно нарвался в гугле на этот способ и хочу поделиться с вами товарищи. Вот немного подрихтованный мной код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> * { …
Last reply by SelenIT, -
Здравствуйте, столкнулся с проблемой оценки знаний у одного верстальщика. Для того чтобы определить узкие моменты - давал ему макеты для верстки, как, в принципе, делают многие. Но сверстаный макет говорит лишь о красоте кода и о паре моментов, иногда самого главного и не видно. Поэтому предлагаю разработать ряд небольших универсальных задач по верстке: типичных и экзотических. Задачи можно кидать по блочной, и по табличной верстке.
Last reply by psywalker, -
- 5 replies
- 6.4k views
Как вы знаете indexOf поддерживается не всеми браузерами. Но иногда возникает необходимость проверить существование элемента в массиве. Недавно наткнулся на очень элегантное решение проблемы: function oc(a) { var o = {}; for (var i = 0, l = a.length; i < l; i++) { o[a[i]] = ''; } return o; } alert('test' in oc(['te', 'st', 'test'])); // true alert(7 in oc([1, 2, 3, 4, 10, 20, 150, 7])); // true alert('test' in oc(['te', 'st', 'word', 'etst', test1])); // false alert(5 in oc([10, 9, 8, 7, 12, 1, 2, 3])); // false Источник
Last reply by Great Rash, -
- 7 replies
- 23.8k views
Давно (года полтора назад) натыкался на статью о том как создаются кнопки для сервисов гугля. Статью уже не найду, но те кнопки очень понравились и захотелось их повторить. Вот что вышло: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } html { font-size: 100.1%; } body { margin: 10px; font: 62.5% Arial, Tah…
Last reply by mishka, -
Приветвую, ув. посетители форума и администрация. первым делом я заюзал поиск для поиска топа с подобныс сабжом, но он мне ничего не выдал. Соответственно хотелось б поднять данный вопрос на обсуждение. Использование хаков, как я понял прочитав некоторое кол-во статеек/блогов нерекомендовано использовать в силу того что неизвестно что они могут принести в будущем. Ведь, собственно css hack - это ошибки в программе, которые допустили разработчики при разработке браузера, что в свою очередь не факт что они остануться при выходе следующего патча, что в свою очередь приведет к неработоспособности хака, или вообще его использование в абсолютно иных целях, нежели кодил разрабо…
Last reply by mishka, -
- 2 replies
- 5.3k views
IE поддерживает ряд свойств позволяющих раскрасить полосы прокрутки на странице, в блоке или текстовом поле. Это scrollbar-arrow-color и ему подобные свойства. Опера с версии 7 тоже поддерживает эти свойства, но при соблюдении некоторых условий. В старых версиях надо было прописать в файле opera6.ini в блоке [user Prefs] такую строку: Enable Scrollbar Colors=1 В современных версиях это делается через настройки: Настройки > Общие настройки > Расширенные > Содержимое > Настроить стили > Включить стилизацию полос прокрутки У меня Опера 10.60, но эта настройка работает нестабильно. То появляется цвет на скролбаре, то исчезает. От чего это может зависеть?
Last reply by Vlad, -
- 7 replies
- 11.6k views
У меня вот тут возникла довольно специфическая проблема - вставить контент, генерируемый скриптом, в определенное место на странице. Контент генерируется при помощи методов DOM createElement и appendChild поэтому вставить на странице его при помощи document.write не получится. Долго придумывал решение и наконец придумал такое: 1) назначаем скрипту id 2) в самом скрипте находим его же по id 3) вставляем нужный контент при помощи insertBefore Как это выглядит в коде: <body> <!-- задаем id скрипту --> <script type="text/javascript" id="script"> // ищем самого себя var self = document.getElementById('script'); // создаем тестовый элемент var tes…
Last reply by s0rr0w, -
- 16 replies
- 13.6k views
И снова здравствуйте, друзья и коллеги по несчастью! Вот выдалась свободная минутка и я спешу поделиться с вами совсем недавно (30 минут назад) найденным решением для стилизации селекта. Не секрет, что для многих это очень большая проблема, особенно когда попадается тупой заказчик и такой же дизайнер Итак без лишних слов качаем картинку select_bg.gif и разбираемся в коде: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;ch…
Last reply by psywalker, -
footer к низу 1 2
by tonik_spb- 32 replies
- 23k views
вот просто стало интересно кто какой способ использует, для начало мои размышления =): Гуляя по сети, общаясь с верстальщицами понимаешь, что у каждого свой метод, кадый любит делать так, кто то любит делать что бы попроще и тд и тп. и вот наверно только малая доля способов прижатия footerА к низу страницы: 1) Кто то смотрит на верстку блоками с опаской и говорит зачем мне лишние траблы мине и так хорошо, и верстает таблицами, и вправду действие с футер с помощью таблиц плевое дело. Но такие как я не переваривают табличную верстку + css лучше по всем известным причинам. 2) Один человек вообще мне сказал, что не парится по поводу футера, в последних 10 проекта…
Last reply by Dron79, -
- 1 reply
- 7.7k views
Ознакомиться с уроками можно по адресу htmlmaster.info
Last reply by Justnewone, -
- 36 replies
- 19.6k views
Начинал я сайты делать с таблиц. Это были простенькие и не оч красивые сайты, одно слово - первые Вот сейчас пытаюсь перейти на стили и вместо таблиц использовать слои. Открытым для меня остается вопрос "тягучести" сайта со стилями. И имеет ли смысл полностью отказываться от таблиц и переходить на стили? Сейчас творю на xhtml 1.0 Transitional + CSS. вот для примера последняя работа полностью на CSS http://www.reichauto.com.ua/ , но он не "резиновый".
Last reply by Ялекс, -
- 15 replies
- 9.7k views
Здравствуйте, товарищи по несчастью! Я имею в виду тех верстальщиков, которым каждый день приходится сталкиваться с закруглением углов у различных блоков. И за что его так дизайнеры любят... Хочу поделиться с вами еще одним способом закругления углов, который я совсем недавно придумал. Он использует всего одну картинку, не использует background-position (так что .png24 будет нормально отображаться с хаком в ИЕ6) и полностью резиновый. Плюсы: - одна картинка; - тянется по ширине и по высоте (по контенту); - сменить дизайн можно очень быстро. Минусы: - блок не может быть резиновым по высоте; - 7 контейнеров; - использует .png24 картинку, так что для ИЕ6 нужен хак; - код стр…
Last reply by Great Rash, -
- 72 replies
- 28k views
Часто верстальщики сталкиваются с проблемой – необходимо сделать графический блок, в котором может находиться любой контент, с возможностью его растягивания, как по высоте, так и по ширине. Предлагаю простой метод решения данной проблемы. На все про все два файла графики Статья Пример
Last reply by psywalker, -
- 20 replies
- 10.8k views
всем привет. подскажите что нужно для того чтобы саит отображался в поисковых машинах (гугл, яндекс, ... )
Last reply by bbsalex, -
- 29 replies
- 15.3k views
Приветствую. Никогда не интересовался подобными вопросами, по этому прошу у вас помощи в данном вопросе. Допустим есть портал. Меня интересует как происходит его раскрутка? Какие есть варианты? На что лучше обратить внимание? Собственно сами методы раскрутки сайта с нуля и до, хотя б , 500 -1000 посетителей в день. Что можно подучить и сделать самому, а что лучше отдать заниматься проф? Так же интересует затратная часть В общем подскажите плз чаво и как оно tnx u.
Last reply by 10488, -
- 9 replies
- 9.5k views
Вот задумался как проверить код на кроссбраузерность. Можно установить все броузеры и проверять в них, но в win нельзя поставить IE 6 и IE 7. Что делать? А может есть мультиброузер где несколько броуз объединены.
Last reply by dandandan,
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть. -
Решение нашел. Заменил на Всем привет. Список выходит из дива. При этом, другие элементы в диве отображаются корректно. Не могу найти причину. Нужно чтобы список был под кнопкой ПЛЕЙ... -
Здравствуйте! Мы команда программистов с многолетним опытом разработки. Работая с нашей командой, Вы получаете порядок условий и развитие с обеих сторон: разработка проекта и продолжение сотрудничества на долгосрочной основе, так же специалисты всегда готовы предложить различные идеи и дополнения. Разрабатываем проекты любой сложности: скрипты для автоматизации рутины, боты, сайты, админ панели, ico, ldo, разработка криптовалюты, смарт контракты, приложения, игры. Ответственность, качество, соблюдение дедлайнов - это про нас! Наш контакт: https://t.me/MadFury (https://t.me/madfury) (TG) TG: https://t.me/2e7.io Сайт: https://code-r.io/
-