В шапке блога написано, что он посвящен программированию и веб-разработке. Программирование тут уже было, а вот до веба я еще не добрался. Эта статья будет первой. Русский интернет (уже наконец) вовсю осваивает "дизайн через CSS", но многие все равно не понимают, почему именно надо дизайнить так, а не по-старому, через ...
Перед тем, как начинать распространяться о том, как CSS'ом раскладывать на экране части веб-страницы, я хочу обязтельно рассказать, из чего состоит базовая экранная единица, которой оперирует CSS — бокс. Сущность бокса Все элементы веб-страницы — фактически все, что ограничено какими-либо тегами — представляется в CSS прямоугольными областями, которые как раз ...
В CSS существует, по большому счету, четыре способа раскладывать боксы по странице: прямой поток, позиционирование, float'ы и таблицы. К сожалению, ни один из них не дает полного набора средств, которыми можно было бы сверстать что-нибудь реальное. Поэтому используются они обычно все вместе, да еще и с изрядной долей хаков для ...
В предыдущей статье я уже пару раз помянул прямой поток - тот порядок, в котором располагаются боксы, если им не давать какого-то специального позиционирования. И порядок этот, надо сказать, не такой уж и простой. Типы боксов Боксы, участвующие в потоке, бывают двух принципиально разных типов: строчные и блочные ("inline" и ...
Через день после написания статьи про поток я вдруг обнаружил, что совершенно бессовестным образом позабыл написать там о том, как он работает с точки зрения именно раскладки. Забыл, то есть, самую суть :-). Исправляю это упущение! Даем место Очень часто при раскладке страницы возникает задача вынуть что-то из общего потока ...
Длинная эпопея с написанием статьи о свойстве "float" завершена. Пусть времени ушло много, но мне думается, что мне удалось максимально доходчиво свести все многообразие поведений этого мощного и несколько странного свойства в одну общую систему. Кроме того, эта статья содержит рекордное количество иллюстраций среди всего "Учебника" :-) Судьба свойства "float" ...
Настало время после долгой нудной теории верстки CSS'ом наконец уже что-нибудь осмысленное сверстать. В этой статье я покажу от начала до конца один из вариантов верстки трехколоночной страницы. Пример опирается на предыдущие статьи "Учебника", и если в этой статье будут какие-то неясности, ответы надо искать в них. И хотя пример ...
Один из самых частых вопросов в процессе знакомства с новыми стандартами — в чем разница между атрибутами HTML-элементов "id" и "class". Ведь эффект, вроде бы, одинаковый. Одинаковый эффект у них только в самых простых случаях использования в CSS. На самом деле отличий полно. Суть id уникальное собственное имя элемента на ...
После статьи с примером раскладки очень многие спрашивали, как сделать ее тянущейся. Надо сказать, я изначально не планировал с ней делать что-то подобное. Во-первых, Учебник, все же, не коллекция кода для копирования, а описание сути вещей. Во-вторых же, несмотря на удивительную популярность колоночных раскладок, CSS на них просто не расчитан. ...
Много времени утекло с первого варианта дизайна "Мегакорпорации", настало время... ребрендинга! На примере которого я хочу показать еще один способ CSS-раскладки — позиционирование. В предыдущих статьях я пару раз упоминал, что хоть float'ы и самый распространенный инструмент CSS-верстки, тем не менее для нее никогда не задумывались, и поэтому эта верстка ...