Leaderboard
Popular Content
Showing content with the highest reputation on 02/09/2012 in Posts
-
Доктайп <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> а разметка html51 point
-
Да вроде никто не минусовал Просто я тут на форуме давно не появлялся, вот и накопилось откуда то пара минусов в репутации. Тем не менее, спасибо, за проявленную заботу.1 point
-
IE7 с помощью PIE поддерживает border-radius. И зачем, собственно искать сложные пути? Во-первых, пользователь может зайти со старого браузера, отличного от ИЕ. Это тоже можно подправить, определяя тип и версию браузера яваскриптом (хотя вряд ли PIE будет работать в старых мозиллах и операх), но использование такого кол-во костылей уже вряд ли проще нарезки картинок. Во-вторых (по порядку, но никак не по значению), если у пользователя отключён JS, он увидит неприглядную картину. Скруглять углы border-radius'ом можно тогда, когда радиус скругления небольшой и в ИЕ8 и старше сайт не будет выглядеть чересчур угловато. Примеры: htmlbook, twitter, некоторые сервисы яндекса. Имхо, сначала лучше не увлекаться новыми возможностями html5 и css3, а налегать на более надёжные варианты. А уже потом можно и с новыми возможностями поиграться. Хотя вёрстку не видел, т.к. не могу скачать файлы 1) Для старых браузеров существуют префиксы. 2) Нормальное отображение сайта с отключенным JS - это требование ваших заказчиков? Пара риторических вопросов: - какой % пользователей отключает JS? - какой % сайтов нормально выглядят с отключенным JS? Border-radius поддерживается без костылей во всех современных браузерах. HTML5 и CSS3 несут в себе не только украшательства, но и возможность избавляться от костылей в виде оформительских тегов, скриптов для разметки, лишних подгружаемых изображений. И как следствие: чистый код, надежность верстки, меньшее количество запросов к серверу (увеличение скорости загрузки страниц). Профессиональные верстальщики - специалисты которые постоянно повышают уровень своих знаний, изучают новые приемы верстки, технологии и т.д. Поэтому надежные варианты это хорошо, конечно, но не стоит стоять на месте, а тестировать, оттачивать и применять новые возможности современных технологий.1 point
-
Уроки очень хорошие и объясняется все очень на простом английском. После этого курса они новый еще бесплатный выпустили, как раз сейчас только начался: 30 Days to Learn jQuery Желающим освоить jQuery рекомендуется. ИМХО, за 2 года обучения понял, что самые качественные уроки у западных преподов, Поповым и остальным русским гуру расти и расти еще до Lynda.com и сети Envato...1 point
-
А кто бы и сомневался, K2 ваще красавчег - мой любимый компонент1 point
-
Или давать линки на ресурсы с безплатными шаблонами, типа: http://www.free-psd.com/1 point
-
Рекомендации относительно верстки 1. теги font, b, hr, br, center и подобные устарели. Всех их можно заменить более элегантными конструкциями CSS+(x)HTML. То же относится и к некоторым атрибутам вроде align, nowrap, hspace, vspace и т.д. Т.е., если чтото можно вынести в CSS и при этом код становится более логичным, удобочитаемым и меньше, то так и делайте. Подробнее... 2. Если необходимо выделить часть текста, то используйте логические теги вместо тегов форматирования strong вместо b em вместо i и т.д. Кроме того используйте такие теги как code, samp и т.д. Во-первых это логично. Во-вторых практично для задания стилей с помощью CSS И наконец это хорошая поисковая оптимизация Подробнее... 3. Таблицы (table) используются только для табличных данных. Исключение составляют те случаи, когда, слоями (дивами) просто не возможно сделать некоторые вещи, или когда это более разумный способ, но в 95 из 100 случаев такая необходимость отсутствует. 4. Форматируйте правильно CSS-код. Некоторые верстальщики полагают, что написав все в одну строчку они таким образом оптимизируют CSS-код. На самом деле это не так. Выигрыш от этого не большой, но вот код становится неудобочитаемым и легко запутаться. Если Вы считаете, что я не прав, то взгляните на CSS популярных и много-посещаемых порталов. Например http://www.i.ua/ 5. Не используйте CSS-хаки. Они не надежны, это не валидно и это не красиво. В 99 из 100 случаев достаточно использования условных комментариев для IE. Причем в 99% случаев достаточно конструкции вида <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="ie6.css"> <![endif]--> Т.е. отдельные стили для ИЕ ниже 7 версии. 6. Указывайте правильный доктайп. При неправильном (или отсутствующем) доктайпе ваша верстка будет очень отличаться в разных браузерах (Quirks mode). Подробнее... 7. Проверяйте код валидатором. Это позволит не только соблюдать валидность, но и избавит вас от случайных ошибок (например описок или незакрытых тегов). Валидаторы: Онлайн валидатор (x)HTML, Онлайн валидатор CSS Полезные плагины для Firefox: Валидация CSS, Валидация (x)HTML Существуют также "отладчики": Для Opera - Opera Dragonfly (как сделать оффлайновой) Для IE - IE Developer Toolbar Для Firefox - Firebug 8. Так лучше не верстать <li> <a href="http://google.com/"> <span> </span> <span> <p class="Stylz21"> <span class="Stylz21"> </span> </p> </span> </a> </li> <td class="menuplace"> Отступ слева</td> и т.п. 9. Стили должны быть вынесены в отдельный файл(ы) (или в крайнем случае тег <style>). Использование атрибута style="" крайне нежелательно. 10. Отключаем картинки. Все ли можно прочесть? Можно ли получить информацию, которую ваш сайт хочет донести посетителю? Доступна ли навигация? А теперь отключаем стили. Оцениваем собственную верстку. Пробуем различные комбинации вышеприведенного. 10.1. Для важных (те которые служат для навигации, фотографии и т.д.) картинок должен указываться атрибут alt="" с соответствующим описанием 10.2. Если у вас, к примеру светлый текст, а для фона используется темная картинка, не забудьте установить также темный цвет фона. 10.3. Должно быть правильное логическое разбиение структуры страницы. 10.4. Навигационное меню желательно делать не нумерованным списком (ul) 11. Удобно использовать следующую конструкцию в начале CSS-файла ul,ol {list-style: none;} ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin: 0; padding: 0;} img {border: 0;} 12. Оптимизируйте графику. Этим вы сэкономите трафик и время посетителя. 13. Проверяйте верстку в разных браузерах (Самые важные на данный момент браузеры это Internet Explorer 6, Internet Explorer 7, Firefox 2.x, Opera 9.x, Safari). Подробнее... Пример хорошей (с моей точки зрения верстки) http://www.fasthtml.ru/clients/omitrans/index.html Вы также можете поискать хорошие примеры самостоятельно (просматривайте код понравившыхся Вам сайтов, популярных сайтов, т.е. смотрите как верстают другие). Плохие примеры не привожу. Их в сети достаточно. Рекомендуется к прочтению Оценка качества верстки 70 идей экспертов для улучшения CSS кода Доступность сайтов для пользователей мобильных устройств Making Small Devices Look Great HTML ? XHTML ? XML XHTML Strict - элементы и атрибуты, которые не надо использовать Азбука веб стандартов P.S. Это всего лишь рекомендации. 100% следовать им не стоит и скорей всего даже не получится. Но это идеал к которому необходимо стремится.1 point
This leaderboard is set to Kiev/GMT+02:00
-
Upcoming Events
No upcoming events found -
Сообщения форума
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-