Как стать автором
Обновить

Комментарии 76

Мне интересно.
Если интерестно, то можете заглянуть сюда — css-framework.
Там вроде бы всё это уже есть.
Мне тоже интересно и нужно :)
И мне, и мне! =)
и я, и я, и я того же мнения :D
Круто и полезно, спасибо ;) А чего не по-русски рыба-то (я так понял, что блог русскоязычный будет) :)? Смотреться будет по-другому.
Это не тема для блога, а основа для создания шаблона
И?
НЛО прилетело и опубликовало эту надпись здесь
Я подумаю над вашим предложением :-)
вот не понимаю — зачем резиновость на современных разрешениях?
10-11 слов в строке (как у меня сейчас на этой странице в статье) — вполне комфортная ширина. больше — будет сложно читать. нет?
В большинстве случаев комфортно читать с мониторов 17" и 19". Вот вам и резиновая вёрстка со значениями: max-width: 1200px; min-width: 998px;
это только колонка с текстом?!?!??!!?
Страница по ширине конечно. -)
в избранное ;)
спасибо, лично я использую typogridphy очень удобная штучка.
НЛО прилетело и опубликовало эту надпись здесь
Спасибо большее, мне это сильно пригодилось.
Хорошо, но все же не без недостатков:

1) Нет sticky footer
2) В HTML-коде все вперемешку, нет например того, что сначала идет контент, потом меню, потом всякие бесполезные дивы (не помню как это называется :( )
3) div#contaner по моему бесполезен, его роль может выполнить body
4) он не резиновый!!!
5) в Ие6 не меняется размер шрифта
6) Если менять размер шрифта в Хроме, меню наезжает на заголовок, и глючно выглядит.
7) В Опере, если посмотреть версию для печати, блоки перепутываются.

Не сочтите за претензию, скорее просто есть направление, куда развиваться))
Да вы тестер!
Это очевидные вещи в принципе :)
над шаблоном работать и работать ещё…

PS: улыбнул ксс — h1,h2,h3,h4,h5,h6 {margin-left: 5px; margin: 2px; }
что за перепады настроения? :)
Не без этого. Но думаю, что всё будет поправлено. За тестирование большое спасибо!
А зачем блогу быть резиновым? Чтобы пользователь растянул его на всю ширину своего широкоформатного монитора и читал посты, вытянутые в одну строчку? :)
Чтобы верстальщик установил дополнительно к резиновости max и min-width.
Плюс вам. Думаю, последний вариант таким и будет
Вы просто не в курсе, что значит «резиновый» (fluid в оригинале). Чтобы блог подстраивался под разрешение экрана пользователя, а не пользователь мучался.

Никто не говорил, что он должен вытягиваться в 1 строчку.

И да, фиксированные макеты делать куда как легче.
> 2) В HTML-коде все вперемешку, нет например того, что сначала идет контент, потом меню, потом всякие бесполезные дивы (не помню как это называется :( )

Это называется SEO-оптимизация)
У вас представления о SEO примерно 5-7 летней давности.
эх, знакомый будет расстроен, когда увидит подобную основу на других блогах :-)
Это было неоплачиваемым занятием, к тому же, вот в какое продолжение вылилось.
Неплохо, но есть куда расти.
Завязываться на айдишники в макете — это не хорошо. Посмотрите на Blueprint, Yahoo UI и прочих монстров, поизучайте их немного. Так же советую посмотреть презентацию Виталия Харисова c Я.Субботника.
Я объясню почему блоки завязаны на идентификаторах:
допустим блок является сворачиваемым/разворачиваемым (expanded/collapsed) и класс нам не поможет, у блока должен быть ID свой. Некоторые любят делать навигацию по блокам, опять классы нам не в помощь в этом случае. Так что, основа дана.
Если кто-то пользуется только разметкой, заменить ID на CLASS не сложно.
А какая связь между тем, что блок должен быть сворачиваемым и тем, что у него должен быть id?
Вот пример, чтобы не ходить далеко
Я понимаю что блоки могут быть сворачиваемыми, только для этого необязательно чтобы у блока был id. И уж, тем более, не нужно завязывать на эти такие id верстку.
Вообще у блока может быть и id и class. Можно цепляться за кастомные атрибуты и хранить в них состояние блока.
Не нужно никаких кастомных атрибутов, состояние открытости/закрытости прекрасно укладывается в дополнительный css-класс.
Не для ИЕ6!
Ну ie6 не настолько плох, чтобы не понимать несколько css-классов
Он их понимает в HTML (группирует CSS-свойства), но не позволяет обращаться к ним из CSS в группах: class1.class2.class3 — сработает только class3.
Для решаемой задачи это не является необходимым: <div class="block block-opened">
Хорошо, я не спорю, что часть задач решается именно классами, а не идентификаторами. Всё-таки вёрстка именно под блог сугубо индивидуальна: где-то классы, где-то идентификаторы блоков (к примеру, регистрация сайдбаров в WordPress.).
Еще раз — у блоков может быть id (в том числе и для «регистрации сайдбаров»), но не надо привязывать к ним так жестко визуальное оформление.
Не надо путать мягкое с теплым. С помощью каскадных таблиц стилей вы определяете визуальное представление документа, а с помощью джаваскрипта вы добавляете динамичискую функциональность. Так вот используйте для второго любую, удобную вам, технику, но стили на идентификаторы не завязывайте.
Посмотрите на Blueprint, Yahoo UI и прочих монстров, поизучайте их немного.

Для меня это действительно монстры, особенно Yahoo UI. Честно говоря мне они не кажутся удобными. Зачастую они используются на 60%-70% максимум, следовательно, куча лишнего кода., в котром тоже надо разобраться. Классы для ИЕ да, замечательно, но всё-таки для скромных целей, типра макета блога, это чуть не то.
В любом случае, спасибо за ссылки. Думаю, людям они полезны и нужны.
У меня ещё клуб на Яру есть. Там уже есть много про вёрстку блоками, позже будет код.
Честно говоря сомнительно отношусь к таким сайтам, рассказывающим о вёрстке. Вот причина почему. Проверьте код (Result: 211 Errors это слишком )
Гы, сына, LOL. Ну провалидируейте эту страницу, где вы пишете.

С ваших слов, вы сомнительно относитесь к своему же контенту, который вы написали в статье.
>>С ваших слов, вы сомнительно относитесь к своему же контенту, который вы написали в статье.
Сомнительно я отношусь к сайтам, рассказывающих о вёрстке и имеющих при валидации html 211 ошибок.
Если вы не заметили, то этот сайт такая же платформа, как и Хабр.
Какой сайт, какая платформа и при чём тут Хабр? Обычно платформа Это Windows, Linux, Mac.
Напишите конкретно, а то сплошные догадки, о чём вы говорите. Если вы имеете в виду какой-либо фреймворк, так и напишите.
clubs.ya.ru это такая же платформа для публикации контекта, как их Хабр, например. И точно так же, как вы не отвечаете за валидность Хабра, я не отвечаю за валидность clubs.ya.ru.
В макете очень мало воздуха.
Правый нижний (третий) блок выглядит некрасиво, так как верхний блок над ним упирается в край.
На реальном сайте это будет выглядеть гораздо интереснее.
Хорошая работа!
Как исправлю все, на данный момент замеченные ошибки и недочёты, обязательно сделаю вариант с дизайном для демонстрации.
Посмотрите обновлённый вариант. От скриншота в посте и живой демонстрации отличается. Воздуха хватает-)
Пользую blueprintcss — доволне.
Поглядел фреймворк — стоящий. Огромный плюс что есть сборка. Да еще сразу с jquery — за такое мега респект )
Не понимаю, зачем там jquery? Заявлено же «базовый css-шаблон».
Ключевое слово «css».
Навернуть функционала можно и потом.
А я думал что сборка проводится сшиванием и упаковкой всего что выбрано в своей сборке, а оказалось просто качаешь архив с файлами )))

Короче… сами сделаете выводы )
Вы про Blueprint?
Да, изначально писал о blueprintcss. А о сборке упоминал в отношении фреймворка рассматриваемого здесь.
А о сборке упоминал в отношении фреймворка рассматриваемого здесь.
Помилуйте, уважаемый, вы мне льстите-)

Это не претендует ни на фреймворк, ни на сборку. Это скелет страницы с готовыми блоками для простого блога. Есть заготовки, которые часто используются на сайтах (типа верхнего или бокового меню), готовая форма, таблица. Всё, что часто используется на сайтах.

Вот как оформит этот скелет конечный пользователь, дело вкуса и возможностей. Кстати, модульная сетка используется на 80% блогах на WordPress.
Ну и нормально так получилось кстати. )
а он умеет прижимать футер к низу страницы, когда контента недостаточно много?
Посмотрите эту ссылку. У себя не использовал.
да не — интересно только в контексте конкретно взятого фреймворка.
Думаю что нет. Я просто не акцентировал на этом внимание, поэтому 100% гарантии не дам. Но в любом случае можно сделать пару строк своих стилей для нужд.
А разве должно быть как-то по другому?
Странно, вы наверно не читали мои дебаты здесь в прошлом (за что получил кучу минусов).
В среднем так не считают почти 70%

Я считаю, что должна быть стандартизована (верстка и не только).
Вы имете в виду стандарты W3C?
Да.
И не только, стандартизация во всем, чтобы потом проблем было меньше
а ссылки-то не работают, ни одна
и в статье толком ничего не написано о сути ваших гениальных открытий
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.