CSS

Равномерное выравнивание блоков по ширине

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

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

(далее…)

Flexbox умер, да здравствует Flexbox!

(перевод заметки из блога Тэба Эткинса, участника рабочей группы CSS в W3C, редактора ряда спецификаций)

Я вот уже месяц собираюсь написать этот пост. Плоховато у меня с планированием времени.

Если вы следили за моим блогом в последний год или около того, вы наверняка в курсе, что я — основной редактор спецификации CSS Flexbox. Я взялся за эту спецификацию, потому что посчитал, что исходная спецификация была слишком буквально "слизана" с XUL, и что мы можем сделать лучше. В частности, я надеялся переписать спецификацию так, чтобы можно было использовать обычные свойства боксовой модели (ширину, высоту, отступы, поля), придавая им гибкость напрямую. Покопавшись в моих архивах, вы найдете несколько попыток переписать ее в таком ключе.

(далее…)

«Загадочные отступы» между инлайн-элементами

Каждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы.

В этой статье мы попытаемся понять, что же из себя представляют эти загадочные "Отступы", что это за звери и с чем их едят. Так же рассмотрим, что такое inline-block, и почему после себя он ставит эти непонятные интервалы. Ну, и, самое главное, мы увидим несколько универсальных решений данного вопроса и ,конечно же, обсудим все их стороны.

(далее…)

Абсолютное позиционирование в ячейках таблицы, в Firefox

Многие верстальщики наверняка сталкивались с неприятной особенностью, которая касается абсолютного позиционирования в ячейках таблицы, в Firefox. Неприятность заключается в том, что в браузерах Firefox, вплоть до последней версии (Firefox-9 на данный момент) нет поддержки position : absolute как в таблице, так и в самих её ячейках. Т.е. мы, например, не сможем позиционировать какой нибудь блок или элемент, относительно <table> или <td>, ну или любых других элементов таблицы, типа <tr>, <tbody> и т.д.

По моим наблюдениям, на форумах, часто задают вопрос с просьбой помочь в решении этой проблемы. Да, и мне порой, эта неприятность доставляет массу неудобств, подталкивая к изобретению обходных путей и прочих костылей . В этой статье, я предлагаю всё же выяснить, что это на самом деле, баг или фича, и можно ли считать Firefox неправым в данной ситуации? А так же найти наконец решение этой проблемы.
(далее…)