Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 87
В целом — неплохо. Но шрифт Cambria на мой взгляд — не лучший выбор. Лучше или Times — с засечками или Arial/Tahoma без оных…
там специально памятка есть на этот счет.
Cambria я поставил, по большей части, при кола ради, ибо он есть далеко не во всех системах (собственно, в XP без офиса 2007 или PowerPointViewer этого шрифта нет, если владелец не озадачился).
Cambria я поставил, по большей части, при кола ради, ибо он есть далеко не во всех системах (собственно, в XP без офиса 2007 или PowerPointViewer этого шрифта нет, если владелец не озадачился).
Calibri — самый зе бест! Жаль, что он не у всех стоит=(
Интересно конечно, но на практике применять врятли получиться…
>Добавлено выделение tr при наведении
Имхо если без надобности запулить такое, на страницах с большим количеством страниц можно получить сильную задержку
Имхо если без надобности запулить такое, на страницах с большим количеством страниц можно получить сильную задержку
Не совсем понятно, каким образом этот набор стилей упрощает жизь верстальщику. Да, и если это нормальный фреймворк, то где документация?
если Вы читали пост, не задали бы ни один из вопросов.
однако, вопрос про упрощение жизни верстальщику выдает тот простой факт, что Вы далеки от этой сферы, а объяснения потребуют хотябы начальных знаний.
данный фреймворк, как, собственно, любой фреймворк имеет четкую целевую аудиторию, в которую не входят люди далекие от верстки.
однако, вопрос про упрощение жизни верстальщику выдает тот простой факт, что Вы далеки от этой сферы, а объяснения потребуют хотябы начальных знаний.
данный фреймворк, как, собственно, любой фреймворк имеет четкую целевую аудиторию, в которую не входят люди далекие от верстки.
Я вообще-то работаю технологом, и каждый день занимаюсь версткой :)
То, что вы называете фреймворком — это одна сверстанная страница, причем с весьма плохо читаемым css кодом. Посмотрите, хотя бы, на blueprint css.
Вы ответьте на поставленный вопрос лучше, как ваш фреймворк упростит мне жизнь? Или, переформулируя, сколько типов лейаутов я могу сверстать с помощью вашего фреймворка, не трогая стили?
То, что вы называете фреймворком — это одна сверстанная страница, причем с весьма плохо читаемым css кодом. Посмотрите, хотя бы, на blueprint css.
Вы ответьте на поставленный вопрос лучше, как ваш фреймворк упростит мне жизнь? Или, переформулируя, сколько типов лейаутов я могу сверстать с помощью вашего фреймворка, не трогая стили?
прозрачная однопиксельная гифка вряд ли семантична
А на мой взгляд автор молодец. Удачно измененный Tripoli, вкупе с jQuery и нормальным XTHML. Мне понравился, спасибо.
Еще один ufo framework? ;)
В целом с имеенованиями всё хорошо, только #all-site смущает.
Ведь по сути — что такое сайт? Набор связей между страницами. В то время как вёрстка — это набор связей между HTML-элементами конкретной страницы. Я такие корневые блоки привык называть #page.
Ведь по сути — что такое сайт? Набор связей между страницами. В то время как вёрстка — это набор связей между HTML-элементами конкретной страницы. Я такие корневые блоки привык называть #page.
Юзайте reset.css, о котором говорилось, наверняка, не только здесь и будет вам счастье!
Сколько раз не пробовал под себя фреймоврк сделать — все без толку. Каждый раз по новому делаю.
а я вот попробовал — получилось, вроде :)
он будет трансформироваться со временем, понятное дело, я только костяк заложил…
он будет трансформироваться со временем, понятное дело, я только костяк заложил…
Что-то не похоже, что получилось. Ваш фреймворк не кросс-браузерный.
Хотелось бы увидеть на примерах в данном фреймворке.
Откройте, например, в ИЕ6 и Firefox3 и сравните списки (не нумерованные). Если не достаточно, ещё могу «показать».
покажите, конечно!
а на тему разницы списков — известная тема. маркеры для нормальных браузеров изменены (в Tripoli изменены, решил так и оставить), а для ишака оставлены дефолтными.
а на тему разницы списков — известная тема. маркеры для нормальных браузеров изменены (в Tripoli изменены, решил так и оставить), а для ишака оставлены дефолтными.
Если для Вас кросс-браузерность не связана с ненормальными браузерами, то мы говорим о разном
это уход от ответа, Вы понимаете? причем уход… гм… недорогой.
для меня кроссбраузерность связана со ВСЕМИ браузерами, занимающими более 1% этого рынка.
по поводу списков — Вы, видимо, не поняли, поясняю: я намеренно пошел на то, чтобы в адекватных браузерах типографика была лучше, чем в говноишаке версии 6.
прошу Вас повторно: укажите еще на не-кроссбраузерность (повторно уточняю — с оформлением форм в IE6 есть проблемы — спасибо программистам).
для меня кроссбраузерность связана со ВСЕМИ браузерами, занимающими более 1% этого рынка.
по поводу списков — Вы, видимо, не поняли, поясняю: я намеренно пошел на то, чтобы в адекватных браузерах типографика была лучше, чем в говноишаке версии 6.
прошу Вас повторно: укажите еще на не-кроссбраузерность (повторно уточняю — с оформлением форм в IE6 есть проблемы — спасибо программистам).
почему бы Вам не включить pingFix плагин для jQuery вместо iepngfix.htc?
Вместо кострукции img, div, span { behavior: url(iepngfix.htc) } плагин универсальнее будет.
Вместо кострукции img, div, span { behavior: url(iepngfix.htc) } плагин универсальнее будет.
Если использовать такой способ (img, div, span { behavior: url(iepngfix.htc) }) и гуглокарту, то можно смело ставить надпись для пользователей ИЕ «пошел на хуй», ибо если ее не поставить, то будет почти такой же результат…
добавил в индексный файлик iframe с гугл-картой. проблем не вижу. что я делаю не так?
ифрейм с гуглокартой и гуглокарта, внедренная на страницу — разные вещи.
можно ссылку на пример?
можно ссылку на пример?
nicothin.ru/nth-framework/ — страничка с гугл-картой.
что-то я не понимаю — как это — «внедренная на страницу»?
дайте ссылку на пример, пожалуйста.
что-то я не понимаю — как это — «внедренная на страницу»?
дайте ссылку на пример, пожалуйста.
например, как тут:
spb.rusavtobus.ru/
spb.rusavtobus.ru/
пасиб, пороюсь.
Просто дело в том, что у гугла на карте используется очень много ПНГшных картинок и когда ИЕ начинает заменять все картинки на прозрачные с фоном — то идет запрос на большее кол-во файлов. При использовании такого метода ИЕ пытался подгрузить около 300 изображений для гуглокарты и тем самым работал ОЧЕНЬ медленно…
а плагин для jQuery в таком не замечен?
или спрошу иначе: как Вы решаете подобную проблемы? (кроме очевидных — не использовать фрейм или «вставку» гугл-карты, или не использовать iepngfix?)
кстати, проверил необъективно — открыл свою страничку в IE6, посмотрел на скорость загрузки — чисто по ощущениям — от FF3 не отличается.
попробовал быстро перемещаться по карте — тоже все быстро и хорошо (увы, у меня толстый канал).
или спрошу иначе: как Вы решаете подобную проблемы? (кроме очевидных — не использовать фрейм или «вставку» гугл-карты, или не использовать iepngfix?)
кстати, проверил необъективно — открыл свою страничку в IE6, посмотрел на скорость загрузки — чисто по ощущениям — от FF3 не отличается.
попробовал быстро перемещаться по карте — тоже все быстро и хорошо (увы, у меня толстый канал).
не всем нужен jQuery, несмотря на довольно небольшой размер, это, как-никак, дополнительный файлик грузить пользователю.
поэтому остановится на iepngfix (грузится только у пользователей ишака).
поэтому остановится на iepngfix (грузится только у пользователей ишака).
А что все негативные комменты минусуются?
Значит изделие не умеет принимать критику и некачественно по-default`у?
Значит изделие не умеет принимать критику и некачественно по-default`у?
всегда было лень делать что-то подобное, и каждый раз, в начале проекта, возня с этим всем длилась часами :))
не, что бы разок помучатся и потом, всегда стразу начинать работать ;)
спасибо автор!
не, что бы разок помучатся и потом, всегда стразу начинать работать ;)
спасибо автор!
Не очень понятен подход к тегу «u». И border-bottom, и text-decoration. Выберите что-нибудь одно.
в файле style.css ошибка
input[type='submint']
input[type='submint']
// подсветка строк в таблицах (для IE6; для нормаьных браузеров дублировано через CSS)
$(«tr»).hover(…
если фикс только под ие, то и пишите if($.browser.msie)… без «дублирования», еще в посте описано дерево каталогов, но у меня скачалось все подряд (кстати если придерживаться того дерева, то для file.htc самое место тоже в js)
ну и конечно спасибо, интересно было почитать.
А вы применяете этот фреймворк для «фрилансерских» работ, или работаете с ним в какой-то компании «на постоянке»?
Фреймворк, конечно, хорошая штука, но что-то index.html смотрится как-то серо и безрадостно(( И напоминает сайты времен начала интернета
со всем согласен, кроме заголовков в хидере. уверен, что в большинстве случаев, главный h1 на странице — это заголовок материала, но никак не название сайта, тем более, если внутри него будет только картинка (более удачно смотрится вариант, в котором картинка закрывает собой текст заголовка с названием сайта).
ну а .site-description — на моя взгляд — чистой воды параграф.
впрочем, это все — только мое мнение, я готов к дискуссии и изменению его.
ну а .site-description — на моя взгляд — чистой воды параграф.
впрочем, это все — только мое мнение, я готов к дискуссии и изменению его.
«исправляя его баги»
у них нет bugtracker'а?
у них нет bugtracker'а?
HTML и CSS это языки разметки… зачем вообще нужен framework?
У автора HTML шаблон изначально ошбочен. Там фиксированая ширина, что не есть хорошо, доказательство: yandex, google, amazon, wikipedia, lebedev — все без фиксированой ширины, а это те самые сайты на котороые надо равнятся.
Еще в коде шаблона заметил что «поиск» заключен в тэг h2… это знак что автору не очень понятно какие тэги для чего надо использовать…
У автора HTML шаблон изначально ошбочен. Там фиксированая ширина, что не есть хорошо, доказательство: yandex, google, amazon, wikipedia, lebedev — все без фиксированой ширины, а это те самые сайты на котороые надо равнятся.
Еще в коде шаблона заметил что «поиск» заключен в тэг h2… это знак что автору не очень понятно какие тэги для чего надо использовать…
фреймворк — для успкрпения выполнения типичных задач.
ошибка в коде — это когда валидатор говорит, а не тема лебедев.
еслиб замечали дальше — все заголовки сайдбара выполнены h2. пояснте свое отношение к этому вопросу.
ошибка в коде — это когда валидатор говорит, а не тема лебедев.
еслиб замечали дальше — все заголовки сайдбара выполнены h2. пояснте свое отношение к этому вопросу.
валидатора на юзабилити нет. фиксированая ширина — это просто неправильный подход к проектированию сайта — логическая ошибка, мое мнение доказывают упомянутые мной сайты yandex, google, amazon, wikipedia, lebedev. А если станете таблицу с данными — скажем 1000 ячеек делать дивами, вам тоже валидатор ошибку не выдаст… Валидатор не критерий, валидатор помагает отыскивать ошибки.
h2 — это заговловок второго уровня у которого есть содержание. А у поиска какое содержание, или у входа??
h2 — это заговловок второго уровня у которого есть содержание. А у поиска какое содержание, или у входа??
>> валидатора на юзабилити нет. фиксированая ширина — это просто неправильный подход к проектированию сайта — логическая ошибка, мое мнение доказывают упомянутые мной сайты yandex, google, amazon, wikipedia, lebedev
начнем с того, что яндекс сократим на Лебедева.
продолжим тем, что длинна комфортно читаемой строки (в символах) ограничена именно понятием юзабилити (комфорт чтения) и оставляет, если не ошибаюсь, 60-80 символов.
продолжим и тем, что факт «резины» на гугле гм… несколько неоднозначен: пояснение-ссылка.
добавим, что у Лебедева «резина» сайта сделана грамотно (см. ководство как пример текстового материала на сайте, см. длину строк), что встречается, скажем прямо, в единичных случаях, чаще всего мастера ТУПО верстают под «резину», якобы для увеличения юзабилити (слышали правильную фразу Лебедева «информация должна быть как газ», но до применения этого правила — еще не доросли).
закончим же тем, что фиксированный по ширине макет ошибкой не является, но, как и его «резиновый» собрат хорош для своих целей (сайты с массивными текстовыми фрагментами, к примеру очень неплохи в таком варианте (см. зачем я вынес style.css в корень фреймфорка)).
я сам ничуть не против хорошего плавающего макета, больше того — в следующей версии я хочу попробовать сотворить кроссбраузерный «резиновый» макет с ограничением макс. и мин. широты контентной части.
но называть ошибкой факс — считаю просто откровенной глупостью.
начнем с того, что яндекс сократим на Лебедева.
продолжим тем, что длинна комфортно читаемой строки (в символах) ограничена именно понятием юзабилити (комфорт чтения) и оставляет, если не ошибаюсь, 60-80 символов.
продолжим и тем, что факт «резины» на гугле гм… несколько неоднозначен: пояснение-ссылка.
добавим, что у Лебедева «резина» сайта сделана грамотно (см. ководство как пример текстового материала на сайте, см. длину строк), что встречается, скажем прямо, в единичных случаях, чаще всего мастера ТУПО верстают под «резину», якобы для увеличения юзабилити (слышали правильную фразу Лебедева «информация должна быть как газ», но до применения этого правила — еще не доросли).
закончим же тем, что фиксированный по ширине макет ошибкой не является, но, как и его «резиновый» собрат хорош для своих целей (сайты с массивными текстовыми фрагментами, к примеру очень неплохи в таком варианте (см. зачем я вынес style.css в корень фреймфорка)).
я сам ничуть не против хорошего плавающего макета, больше того — в следующей версии я хочу попробовать сотворить кроссбраузерный «резиновый» макет с ограничением макс. и мин. широты контентной части.
но называть ошибкой факс — считаю просто откровенной глупостью.
ах да, совсем забыл — а заголовок блока «поиск» что — недостоин h2?
содержание этого блока — поисковая форма.содержание блока авторизации — форма авторизации (может, с к-л пояснениями и ссылкой на регистрацию и восстановление пароля).
есть содержание и у других блоков сайдбара. и заголовки есть, соответственно.
в некоторых своих работах я, так же, использую скрытый CSS-ом заголовок H1 для сайдбара (называется, к примеру, «Управление» или «Сервис» или т.п.)
в чем Ваш протест в данном случае — поясните, не понимаю.
содержание этого блока — поисковая форма.содержание блока авторизации — форма авторизации (может, с к-л пояснениями и ссылкой на регистрацию и восстановление пароля).
есть содержание и у других блоков сайдбара. и заголовки есть, соответственно.
в некоторых своих работах я, так же, использую скрытый CSS-ом заголовок H1 для сайдбара (называется, к примеру, «Управление» или «Сервис» или т.п.)
в чем Ваш протест в данном случае — поясните, не понимаю.
www.w3.org/TR/REC-html40/struct/global.html#h-7.5.5
h2 описывает в кратце информацию котороя идет дальше. а какую информацию вы даете в поиске? какую информацию описыает слово «Поиск»?.. Я вам дал ссылку на спецификацию, там есть пример, посмотрите и поймете как надо использовать элементы заголовков.
A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
Еще по верстки маета. У вас после элемента body идет div в который вы поместили всю страницу — зачем это нужно, чем вас body не устраивает?
Потом менюшка… список тоже запихнули в div — зачем?
Не кажется ли вам что в вашем коде слишком много id и class и это перегружает код?
h2 описывает в кратце информацию котороя идет дальше. а какую информацию вы даете в поиске? какую информацию описыает слово «Поиск»?.. Я вам дал ссылку на спецификацию, там есть пример, посмотрите и поймете как надо использовать элементы заголовков.
A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
Еще по верстки маета. У вас после элемента body идет div в который вы поместили всю страницу — зачем это нужно, чем вас body не устраивает?
Потом менюшка… список тоже запихнули в div — зачем?
Не кажется ли вам что в вашем коде слишком много id и class и это перегружает код?
в блока «поиск» можно дать выбор области сайта, в которой производится поиск.
body меня не устраивает потому, что где то в глубинах моей памяти хранится инфа о том, что свойства для этого тега некоторыми браузерами трактуются слегка по-разному.
ID дива навигации — для возможного включения в этот логический блок «хлебных крошек» и других функциональных блоков.
обилие идентификаторов и классов свитаю вполне уместным. но Вы заставили меня задуматься и в следующей версии я обязательно уделю этому много внимания, постараюсь минимизировать HTML.
спасибо.
body меня не устраивает потому, что где то в глубинах моей памяти хранится инфа о том, что свойства для этого тега некоторыми браузерами трактуются слегка по-разному.
ID дива навигации — для возможного включения в этот логический блок «хлебных крошек» и других функциональных блоков.
обилие идентификаторов и классов свитаю вполне уместным. но Вы заставили меня задуматься и в следующей версии я обязательно уделю этому много внимания, постараюсь минимизировать HTML.
спасибо.
Про ваш CSS…
hr { display: none; }
font { color: inherit! important; font: inherit! important; }
Зачем это нужно??? оба эти элемента устарелы и их использоать не стоит, есть более эфективные и современные стредства решение задач.
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
у ссылок по умолчанию нету рамок — зачем их выключать тогда ???!!!??
* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex { font: inherit; font-size: 1em; }
сначало задаете для всех элементов (*) свойство font-size: 1em; а потом то-же самое для отдельных эелементов ???!!!??
у вас куча правил для table, а в html нету ни одной таблицы…
hr { display: none; }
font { color: inherit! important; font: inherit! important; }
Зачем это нужно??? оба эти элемента устарелы и их использоать не стоит, есть более эфективные и современные стредства решение задач.
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
у ссылок по умолчанию нету рамок — зачем их выключать тогда ???!!!??
* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex { font: inherit; font-size: 1em; }
сначало задаете для всех элементов (*) свойство font-size: 1em; а потом то-же самое для отдельных эелементов ???!!!??
у вас куча правил для table, а в html нету ни одной таблицы…
hr и font — теги, в изобилии использующиеся старыми движками и веб-мастерами (особенно выросшими из программистов) со старыми мозгами — от этого никуда не деться. если я решу следующий макет делать в xHTML Strict, то тега font — точно не будет :)
>>> a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
>>у ссылок по умолчанию нету рамок — зачем их выключать тогда ???!!!??
наследие Tripoli, пока не исправленное :)
тоже самое — с двойным правилом о размере шрифта.
в моем HTML была и есть таблица, дайте себе труд ее найти. :)
>>> a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
>>у ссылок по умолчанию нету рамок — зачем их выключать тогда ???!!!??
наследие Tripoli, пока не исправленное :)
тоже самое — с двойным правилом о размере шрифта.
в моем HTML была и есть таблица, дайте себе труд ее найти. :)
Каждый макет сайта уникален, как и верстка к нему. Поетому фреймворк тут просто не уместен.
ерунда.
блоги, форумы, галереи, новостные сайты и пр. — достаточно типичный набор как функциональных блоков (дизайна), так и рациональных принципов верстки.
блоги, форумы, галереи, новостные сайты и пр. — достаточно типичный набор как функциональных блоков (дизайна), так и рациональных принципов верстки.
Вы от рациональной верстки далеко — как Земля от Марса — перегруженый HTML и CSS этому доказательство. Хотите щамповать сайты, ваше дело.
«в глубинах моей памяти хранится инфа о том, что свойства для этого тега некоторыми браузерами трактуются слегка по-разному» — метод работы «глубине памяти» не очень удачный.
«hr и font — теги, в изобилии использующиеся старыми движками и веб-мастерами (особенно выросшими из программистов) со старыми мозгами — от этого никуда не деться» — не надо работать со старыми движками и со старыми мозгами.
короче: зайдите на w3c.org почитайте спецификации, почитайте про HTML — Моли Хойцшлаг, почитайте про CSS Ерика Майера, почитайте про Java-Script Фленегана и потом беритесь фреймворки делать и статьий писать, по тому что вы показываете ваши знания не полны и устарелы и вам надо обновлятся :)
Удачи!
«в глубинах моей памяти хранится инфа о том, что свойства для этого тега некоторыми браузерами трактуются слегка по-разному» — метод работы «глубине памяти» не очень удачный.
«hr и font — теги, в изобилии использующиеся старыми движками и веб-мастерами (особенно выросшими из программистов) со старыми мозгами — от этого никуда не деться» — не надо работать со старыми движками и со старыми мозгами.
короче: зайдите на w3c.org почитайте спецификации, почитайте про HTML — Моли Хойцшлаг, почитайте про CSS Ерика Майера, почитайте про Java-Script Фленегана и потом беритесь фреймворки делать и статьий писать, по тому что вы показываете ваши знания не полны и устарелы и вам надо обновлятся :)
Удачи!
мне жаль Вас.
даже не буду объяснять, сколь Вы смешны — не поймете.
даже не буду объяснять, сколь Вы смешны — не поймете.
беру свои слова назад.
пошел обновляться :)
пошел обновляться :)
Ваше дело. И не горячитесь по повуду DIV-вов. Свойство float в CSS, предназначено для обтекания а не для позиционирования. Всем противникам верстки на таблицах даю только два примера: яндекс и амазон — самые посещяемые сайты, пренадлежащие богатым компаниям, соответно сделаны лутчшеми специалистами — Табличная верстка — на данный момент самая практичная. Пока IE не начнет поддерживать display: table-cell, так и останется.
Ну а если вы с этим не согласны — задумайтесь — правда ли разработчики этих ресурсов ошиблись или… вас кто-то заблудил :)
Ну а если вы с этим не согласны — задумайтесь — правда ли разработчики этих ресурсов ошиблись или… вас кто-то заблудил :)
смешное поведение при выключенном скрипте
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
HTML-CSS фреймворк «NTH»