Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 76
Мне интересно.
Если интерестно, то можете заглянуть сюда — css-framework.
Там вроде бы всё это уже есть.
Там вроде бы всё это уже есть.
Мне тоже интересно и нужно :)
И мне, и мне! =)
Спасибо
Круто и полезно, спасибо ;) А чего не по-русски рыба-то (я так понял, что блог русскоязычный будет) :)? Смотреться будет по-другому.
в избранное ;)
спасибо, лично я использую typogridphy очень удобная штучка.
Спасибо большее, мне это сильно пригодилось.
Хорошо, но все же не без недостатков:
1) Нет sticky footer
2) В HTML-коде все вперемешку, нет например того, что сначала идет контент, потом меню, потом всякие бесполезные дивы (не помню как это называется :( )
3) div#contaner по моему бесполезен, его роль может выполнить body
4) он не резиновый!!!
5) в Ие6 не меняется размер шрифта
6) Если менять размер шрифта в Хроме, меню наезжает на заголовок, и глючно выглядит.
7) В Опере, если посмотреть версию для печати, блоки перепутываются.
Не сочтите за претензию, скорее просто есть направление, куда развиваться))
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; }
что за перепады настроения? :)
PS: улыбнул ксс — h1,h2,h3,h4,h5,h6 {margin-left: 5px; margin: 2px; }
что за перепады настроения? :)
Не без этого. Но думаю, что всё будет поправлено. За тестирование большое спасибо!
А зачем блогу быть резиновым? Чтобы пользователь растянул его на всю ширину своего широкоформатного монитора и читал посты, вытянутые в одну строчку? :)
Чтобы верстальщик установил дополнительно к резиновости max и min-width.
Вы просто не в курсе, что значит «резиновый» (fluid в оригинале). Чтобы блог подстраивался под разрешение экрана пользователя, а не пользователь мучался.
Никто не говорил, что он должен вытягиваться в 1 строчку.
И да, фиксированные макеты делать куда как легче.
Никто не говорил, что он должен вытягиваться в 1 строчку.
И да, фиксированные макеты делать куда как легче.
> 2) В HTML-коде все вперемешку, нет например того, что сначала идет контент, потом меню, потом всякие бесполезные дивы (не помню как это называется :( )
Это называется SEO-оптимизация)
Это называется SEO-оптимизация)
эх, знакомый будет расстроен, когда увидит подобную основу на других блогах :-)
Неплохо, но есть куда расти.
Завязываться на айдишники в макете — это не хорошо. Посмотрите на Blueprint, Yahoo UI и прочих монстров, поизучайте их немного. Так же советую посмотреть презентацию Виталия Харисова c Я.Субботника.
Завязываться на айдишники в макете — это не хорошо. Посмотрите на Blueprint, Yahoo UI и прочих монстров, поизучайте их немного. Так же советую посмотреть презентацию Виталия Харисова c Я.Субботника.
Я объясню почему блоки завязаны на идентификаторах:
допустим блок является сворачиваемым/разворачиваемым (expanded/collapsed) и класс нам не поможет, у блока должен быть ID свой. Некоторые любят делать навигацию по блокам, опять классы нам не в помощь в этом случае. Так что, основа дана.
Если кто-то пользуется только разметкой, заменить ID на CLASS не сложно.
допустим блок является сворачиваемым/разворачиваемым (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">Не надо путать мягкое с теплым. С помощью каскадных таблиц стилей вы определяете визуальное представление документа, а с помощью джаваскрипта вы добавляете динамичискую функциональность. Так вот используйте для второго любую, удобную вам, технику, но стили на идентификаторы не завязывайте.
Посмотрите на Blueprint, Yahoo UI и прочих монстров, поизучайте их немного.
Для меня это действительно монстры, особенно Yahoo UI. Честно говоря мне они не кажутся удобными. Зачастую они используются на 60%-70% максимум, следовательно, куча лишнего кода., в котром тоже надо разобраться. Классы для ИЕ да, замечательно, но всё-таки для скромных целей, типра макета блога, это чуть не то.
В любом случае, спасибо за ссылки. Думаю, людям они полезны и нужны.
У меня ещё клуб на Яру есть. Там уже есть много про вёрстку блоками, позже будет код.
Честно говоря сомнительно отношусь к таким сайтам, рассказывающим о вёрстке. Вот причина почему. Проверьте код (Result: 211 Errors это слишком )
Гы, сына, LOL. Ну провалидируейте эту страницу, где вы пишете.
С ваших слов, вы сомнительно относитесь к своему же контенту, который вы написали в статье.
С ваших слов, вы сомнительно относитесь к своему же контенту, который вы написали в статье.
>>С ваших слов, вы сомнительно относитесь к своему же контенту, который вы написали в статье.
Сомнительно я отношусь к сайтам, рассказывающих о вёрстке и имеющих при валидации html 211 ошибок.
Сомнительно я отношусь к сайтам, рассказывающих о вёрстке и имеющих при валидации html 211 ошибок.
В макете очень мало воздуха.
Правый нижний (третий) блок выглядит некрасиво, так как верхний блок над ним упирается в край.
На реальном сайте это будет выглядеть гораздо интереснее.
Хорошая работа!
Правый нижний (третий) блок выглядит некрасиво, так как верхний блок над ним упирается в край.
На реальном сайте это будет выглядеть гораздо интереснее.
Хорошая работа!
Пользую blueprintcss — доволне.
Поглядел фреймворк — стоящий. Огромный плюс что есть сборка. Да еще сразу с jquery — за такое мега респект )
Не понимаю, зачем там jquery? Заявлено же «базовый css-шаблон».
Ключевое слово «css».
Навернуть функционала можно и потом.
Ключевое слово «css».
Навернуть функционала можно и потом.
А я думал что сборка проводится сшиванием и упаковкой всего что выбрано в своей сборке, а оказалось просто качаешь архив с файлами )))
Короче… сами сделаете выводы )
Короче… сами сделаете выводы )
Вы про Blueprint?
Да, изначально писал о blueprintcss. А о сборке упоминал в отношении фреймворка рассматриваемого здесь.
А о сборке упоминал в отношении фреймворка рассматриваемого здесь.Помилуйте, уважаемый, вы мне льстите-)
Это не претендует ни на фреймворк, ни на сборку. Это скелет страницы с готовыми блоками для простого блога. Есть заготовки, которые часто используются на сайтах (типа верхнего или бокового меню), готовая форма, таблица. Всё, что часто используется на сайтах.
Вот как оформит этот скелет конечный пользователь, дело вкуса и возможностей. Кстати, модульная сетка используется на 80% блогах на WordPress.
а он умеет прижимать футер к низу страницы, когда контента недостаточно много?
Посмотрите эту ссылку. У себя не использовал.
Думаю что нет. Я просто не акцентировал на этом внимание, поэтому 100% гарантии не дам. Но в любом случае можно сделать пару строк своих стилей для нужд.
Удивил — Passed
validator.w3.org/check?uri=http%3A%2F%2Fm57.ru%2Fshared%2Fclear-css%2F&charset=(detect+automatically)&doctype=Inline&group=0
Это уже начинает радовать :)
validator.w3.org/check?uri=http%3A%2F%2Fm57.ru%2Fshared%2Fclear-css%2F&charset=(detect+automatically)&doctype=Inline&group=0
Это уже начинает радовать :)
а ссылки-то не работают, ни одна
и в статье толком ничего не написано о сути ваших гениальных открытий
и в статье толком ничего не написано о сути ваших гениальных открытий
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Базовый css-шаблон