Grid Design или вёрстка с Сеткой.

[blind]

по-моему очень нужная ссылка - http://code.google.com/p/blueprintcss/ , отличный css-фреймворк построенный как раз на grid-модели. в его дистрибутиве есть также ruby-script позволяющий задать параметры ширины колонок, сетки в целом, etc, если вы хотите что-либо отличающееся от умолчальных настроек.

[npFly]

Я знаю. Но этот отдельный рассказ ;) Я планирую написать о Blueprint CSS и о его возможностях.

[235]

не откладывай только, очень даже интересная тема, ждем.

[quard]

фишка в том, что вы код повыдирали из blueprintcss :) с .clearfix это очень заметно :)

[npFly]

Перед тем как написать статью я изучил много Grid Systems и почти везде используется clearfix.

[ATimofeev]

clearfix, мягко говоря, не самое универсальное и удачное решение...

[nicothin]

мотивируйте, пожалуйста.

[ZeLeBoBa]

Мотивация уже лейтмотив всего Хабра :-)

[archonoff]

Не написали еще?:)

[npFly]

Жутко раздражают название правил - doc hd bg pd. Я бы из всей YUI отметил бы инструмент для расчёта Сетки.

[blind]

Да, но его лучше использовать в больших проектах. В этом проект похож на EXTjs - хороший, функциональный, но жирный)

[Kavu]

А ещё я бы отметил YAML: Yet Another Multicolumn Layout - http://www.yaml.de/
Но как мне показалось - не такой удобный как BlueprintCSS

[Fade]

у YAML можно использовать резиновый дизайн, что, IMHO лучше

[telememo]

у YAML лицензия неподходящая, надо бэклинк ставить или баксы дать

[npFly]

В Blueprint CSS резиновый дизайн в разработке и вполне возможно что войдёт в следующий релиз.

[takkmoil]

Чтобы чистить плавающие блоки, достаточно родителю указать { overflow:hidden;width:100%; } (т.е., любую ширину, но это обязательно). И не надо никаких клирфиксов. Это прошлый век :)

[npFly]

Согласен, но именно для Сетки больше подходит такой подход. Так как контейнер может содержать не только колонки но и другие плавающие блочные элементы. Для данной реализаций .clearfix вообще можно избежать, веди .column и так содержит свойство overflow: hidden и имеет фиксированную ширину. Просто как всегда не повредит.

[takkmoil]

Такой подход избыточен. Не стоит плодить сущности сверх необходимости.

[npFly]

Только если это не библиотека.

[takkmoil]

Мы из разных религий, да. Я-то думал, библиотека — это набор нужных вещей, а не всё-что-только-можно-да-побольше-побольше.
Вот здесь, кстати, довольно внятно рассказывается про очистку.

[npFly]

.clearfix полезная вещь. К томуже в моём примере он не засоряет разметку.

[takkmoil]

Не вижу его пользы, когда есть более простое решение, работающее везде и, к тому же, не использующее хаки.

[npFly]

В любом случае здесь речь идёт о Сетке и как она реализована не имеет значения, значения имеет сама концепция. Я согласен с вами что этот способ очистки блоков гораздо проще. Просто речь здесь идёт о библиотеки, clearfix правило которое в ней используется, применять его или нет ваше - решение ;)

[takkmoil]

В данном случае вы предлагаете реализацию концепции в виде библиотеки. Строить библиотеку на устаревших и неверных решениях — плохой подход.

[npFly]

Назовите хотя бы одну причину почему clearfix хуже?!

[takkmoil]

1. Использует хак

[npFly]

Ну ка давайте раскажите в каком месте это хак, то он делает не так?

[takkmoil]

Вот здесь:
content: ".";
И здесь:
/* Hides from IE-mac \*/

[neJa]

как уже ответил private_face, есть случаи когда невозможно задать для блока "width: 100%, overflow: hidden" например, если есть dropdown меню. Всегда в таких случаях использую content "." и для ИЕ height: 1%. Можно ставить zoom: 1, но оно не валидно...

[takkmoil]

Ширину можно указывать и в пикселях, и в em.

[monsterzz]

content: "." использовать для всех браузеров.
Для ie через conditional comment можно подключать отдельный стиль с zoom: 1;

height: 1% - выглядит ужасно :(

[takkmoil]

Zoom тоже можно. Width — это привычка :)

[an9eldust]

Кстати, насколько я помню, "zoom: 1" не работает в IE 5.01 (насчет 5.5 — не уверен).

Про «к целевому блоку нельзя применять "overflow: hidden"» — +1

[vithar]

И получить проблемы с overflow: hidden, когда переполнение скрывается, когда это не надо (например, если есть абсолютно позиционируемые блоки). Easy Clearing надёжнее.

[Timon_Omsk]

Как раз буквально вчера наткнулся вот на такую штуку http://960.gs/

[npFly]

Тоже неплохая Grid System. ;)

[Smerig]

Друзья говорят - семантическая верстка

[my_own_parasite]

поменьше хамства, парень, коли сам уж не знаешь спецификаций.
никаких столбцов и колонок с контентом в таблице нет. есть ряды и ячейки.

[my_own_parasite]

если это одно и то же, то зачем ты их перечисляешь, с таким умным видом? :))

ну а если ты не понимаешь, чем табличные столбцы отличаются от модульной сетки, то именно тебе надо постичь азы вёрстки прежде чем кого-либо тут учить

[bobrob]

А ты знаешь, чем табличные столбцы отличаются от модульной сетки ?

[bobrob]

my_own_parasite, Нашел вобще что сравнивать, столбцы и модульную сетку... Очередной некомпетентный аматьор на хабре ...

[chromice]

Модульная сетка не несёт никакого смысла (она лишь помогает упорядочить визуальное представление информации). Поэтому используя таблицы, вы привносите в документ ненужный смысл.

[bassdrum]

ммм, как-то ничего нового не узнал ;)
а почему верстка монгоколоночного сайта стала теперь отдельной религией? -))

кстати, вы могли бы упомянуть, в качестве теоретического бонуса, о концепции модульных сеток пришедших в веб из книжного, газетного и журнального дизайна и, в свою очередь, породивших потребность вот в таком подходе со стороны верстальщиков. я думаю не все знают истоков.

p.s. не хотел задеть, просто положительное настроение с утра -)

[npFly]

Если честно мне и так пришлось урезать статью больше чем на половину и оставить на мой взгляд самое главное. Про Сетку можно писать и писать...

P.S. написал статью прежде всего из-за того что во всём рунете не нашёл ничего про Сетку.

[bassdrum]

а что для вас - азы верстки?
если говорим о html,css-верстке - то человек владеет предметом, это видно.

p.s. наверное все-таки "азы верстки", Азов - это город такой -)

[bassdrum]

к чему бы это?
но где вы все-таки усмотрели, что топикстартер не знает те самые азы?

[npFly]

Откуда ты знаешь откуда что я узнал? Я о сетке узнал ещё за долго до того как начал верстать. Я занимался 3D пять лет и там тема сетке раскрыта от и до - хочеш расскажу про UV Mapping?

[blind]

это говорит человек написавший выше эдакий шедевр про "это таблица колонки и все такое" )

[kostos]

а собственно таблицы это не азы? Все верстальщики начинают разметку делать на таблицах, а уже потом, когда начинают понимать некоторые тонкости, переходят на верстку дивами.

[tenshi]

отучаемся говорить за всех.

[kostos]

вы вот наверное сразу как узнали что существует хтмл, начали верстать дивами без использования таблиц, кросбраузерно и хорошо?
Я в этом сильно сомневаюсь — что бы начать понимать как это работает и видеть подводные камни нужно не один сайт сверстать и методом проб и ошибок выйти уже на уровень дивов, хотя я не приверженец.
Так что не рассказывайте мне сказки.

[sonyblack]

Я лично начал свое знакомство с верстанием с книги "XHTML b CSS 2"

[kostos]

И что вы сразу строили сложные интерфейсы при помощи только дивов и не делали каркас для первых сайтов на таблицах?

И почему у многих складывается мнение что в спецификации xhtml не может быть таблиц?

[sonyblack]

С первых страниц автор меня погрузил в стандарты и правила. Я сидел днями и учился делать колонки на дивах, таблицы только для вывода табличных данных.
Сейчас я уже сразу смотря на макет вижу кучу дивов, я даже не могу себе представить как это на таблице делается, ведь тогда идет просто захламление кода. Как в анекдоте про верстальщика в поезде "td td td td"

[kostos]

Стандарты — это хорошо, но что нестандартного в таблице и что есть табличные данные? Изображения и текст не являются ими? А ведь из них и строится сайт
Я например предпочитаю верстать смешанным методом, хотя могу и только дивами.
А по поводу захламленности кода с таблицами, то это не всегда, иногда больше хлама дают дивы.

[sonyblack]

Совету проникнуться XHTML ибо я смотрю не понимаете вы всех вкусностей. Не надо забывать и об XML...

[kostos]

Вы не правы. Верстаю только xhtml, так как давно проникся, я говорю о том что xhtml это не только дивы — это тот же html но более строгий.
Кстати вы лукавите говоря о том что с самых первых проектов верстаете без таблиц. Заглянул в ваш жж и увидел "ваш второй сайт" и там используются таблицы, кстати в том случае очень просто обойтись без них.

[dmx]

Ну а XML как исключает <table>?

Вы в общем-то умные вещи говорите, но немного преувеличено и пытаетесь уже просто оперировать терминами.

[kostos]

xml — исключает, но это совсем не одно и тоже что xhtml и нужен он немного для другого

[dmx]

Я это все понимаю. Мы же говорим в контексте верстки страниц.

[npFly]

XHTML это и есть XML. В чистом виде XML вообще ничего не исключает так как ничего и не знает о элементах которые в нём содержатся, до тех пор пока мы не применим DTD или Schema к документу.

[kostos]

С тем что xml ничего не знает — согласен. А вот с тем, что xml и xhtml одно и то же нет. xhtml - расширеный html, с более строгими правилами по поводу вложенности тегов и их закрытия (я про 1.0), тоесть соответствие стуктуре xml.

[npFly]

Не с более строгими правилами, а с правилами XML! И в каком месте XHTML расширенный? Там больше элементов? Или может он всё таки расширяет HTML 4? А как он расширяет?

[kostos]

Расширенный — расширенный правилами. html он не расширяет.По поводу правил xml мы говорим об одном и том же, только разными словами.

[npFly]

Я вот с HTML познакомился через Fireworks. Рисуешь - режешь, а он тебе генерирует HTML на таблицах. И везде работает именно так как нарисовал. Давно это было конечно. А сейчас со мной работают два парня по 18 лет и они вообще не понимают как можно было верстать на таблицах :)

[tenshi]

да, представь себе. мой первый сайт был на дивай и ифреймах. правда там была одна таблица - главное меню в соответствии с моей "гениальной" дизайнерской задумкой на дивах кроссбраузерно было не сверстать.

[kira]

да что вы говорите; я научилась верстать дивами раньше чем вообще узнала теги табличной разметки, видимо преподаватель грамотный попался

[kostos]

Верстка сеткой конечно интересная методика, но обоснованное ее применение — очень уж редко встречается.

[kostos]

вот-вот, и я о том же

[bassdrum]

кхе, если мы уж совсем оторвемся от способов реализации, то совсем не важно каким кодом будут верстаться колонки на сайте.
грамотный верстальщик сам определит табличками ему верстать либо дивами, либо смешанным способом.

p.s. вы какой-то озлобленный ортодокс.

[bassdrum]

не вижу в топике противоречия здравому смыслу.
вижу только ваши нервы, нервные клетки не восстанавливаются.

[bassdrum]

хамите парниша (с)

[diamant]

здравым смыслом фанатики, как правило, пренебрегают :)

[homm]

> если мы уж совсем оторвемся от способов реализации, то совсем не важно каким кодом будут верстаться колонки на сайте.

Просто реализации на дивах уделено половина статьи. Я тоже пративник таких извращений.

ЗЫ. Хамишь пока толко ты, «парниша».

[ATimofeev]

Может я чего не понимаю, но зачем вытаскивать лишний код ради универсализации? Такое решение подойдет для какого-нибудь CSS фреймворка или большого проекта с общим файлом стилей.

[vithar]

Макетная сетка может быть виртуальной: http://harisov.livejournal.com/70420.htm…

[Over]

Я уже очень давно делаю всё на колонках, это как само собой разумеющееся.
А набор готовых классов считаю делать неразумным. Только если в очень уникальных случаях.

[supersasha]

А как быть с тем, что страница не «тянется»?

[npFly]

Можно реализовать чтобы тянулась. Почитай у Марка Балтона ссылка в конце топика.

[akzhan]

как раз недавно за полчаса применил Blueprint как основы простой темы к Друпалу.

http://akzhan-mdev.mhost.ru/.masterflow/release-1.1

P.S.: сейчас гляну, какие есть сетки для резинового лэйаута.

[diamant]

реализация таблицы на дивах :)

[npFly]

Реализация Сетки на дивах ;)

[jeezy]

Grid and Design — лучшее средство для верстки по сетке.

[sofi]

хм.. по поводу целесообразности использование Сетки у меня есть возражение: как часто вы видете макет нарисованный по сетке? чаще всего встречаю нарисованный от балды дизайн