Как открыть консоль в сафари на маке. Как активировать инструменты разработчика в Safari. Включение веб-инспектора на iOS

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

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

Сам HTML код структуры:

Шапка

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

Сам контент вместе с сайдбарами, заключен в общий контейнер, который имеет айди - wrapper . Далее контент, который располагается по центру и имеет айди - content , заключается в еще один контейнер с айди - main . Это обязательно, чтобы в будущем получилась адаптивность.

После контента рядом располагаются два сайдбара - левый с айди - left_side и правый с айди - right_side .

Чтобы все правильно отображалось, нужно добавить стили CSS:

Header{ max-width:1170px; margin:0 auto; } footer{ max-width:1170px; margin:10px auto 0; clear:both; } #wrapper{ max-width:1170px; margin: 0 auto; position:relative; height:100%; } #main{ float:left; width:100%; } #left_side{ width:240px; margin-left:-100%; float:left; } #content{ margin:0 440px 0 250px; } #right_side{ float:left; width:430px; margin-left:-430px; }

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

Так же сайдбары имеют фиксированную ширину, а при уменьшении размера окна браузера, уменьшается средняя колонка - контент. Если будете менять ширину сайдбаров, меняйте свойство margin у контента, чтобы задать правильные отступы.

Важным моментом является свойство у подвала - clear:both; . Если его убрать, то подвал подпрыгнет вверх к шапке, а это нам не нужно вообще. Если Вам нужно будет сделать отступ между контентом и подвалом, то можете между ними добавить еще один div-блок и ему прописать свойство clear:both; , а у подвала убрать его и задать отступ. Например:

//Блок

//Стили.clear{clear:both;}

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

У меня указаны параметры для ширины сначала - 950px, потом - 500px.Если Вы будете менять ширину контента или всего контейнера, то можете поменять значения на свои, не забывайте про это и просчитывайте правильно, чтобы потом не возникло проблем.

@media (max-width: 950px){ #left_side{ position:relative; margin:0; width:48%; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } #content{ width:98%; margin:0 auto; position:relative; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } #right_side{ position:relative; float:right; margin:0; width:48%; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease;} } @media(max-width: 500px){ #left_side{width:99%;} #right_side{width:99%;} }

В принципе тут все просто, а основной объем занимает свойство transition. Сделано это для плавной анимации при смене размера окна. Если Вам это не нужно то можете удалить его полностью со всех айди.

Поняв суть того, как это работает, Вы с легкостью будете верстать адаптивные страницы с тремя колонками, которые имеют два сайдбара с контентом посредине.

На этом все, спасибо за внимание. 🙂

Добрвый день! Сегодня поговорим по трех колоночный макет сраницы. В сети есть очень интересный справочник по и , который будет несомненно полезен каждому уважающему себя web-мастеру. Ресурс этот — htmlbook.ru . Там много полезной информации. В данном посте мы рассмотрим макет в три колонки, который предлагается на этом ресурсе.

Ничего сложного в нем нет. Если Вы изучали до этого и то разобраться в нем проще не куда! И так приступим.. Трехколоночный макет часто используется в тех случаях, когда двух колонок уже недостаточно или требуется особым образом разделить материал. Например, одна колонка отдается под контент, вторая под навигационные ссылки, а в третьей публикуются новости сайта или другая информация (рис. 1).

Общий каркас определяется с помощью слоя с именем container, он задает ширину и выравнивание макета. Внутри располагаются колонки, причем их порядок в коде такой: левая (назовем ее nav), правая (aside), центральная (content). Построение слоев показано в примере 1.

Пример 1. Колонки в коде

Положение слоев формируется через стили: для левой колонки устанавливается ширина (width) и обтекание по левому краю (float: left), для правой колонки - ширина и обтекание по правому краю (float: right), для центральной - отступ слева и справа на ширину левой и правой колонки (пример 2).

Пример 2. Стиль для создания колонок

#container { width: 900px; /* Ширина макета */ margin: 0 auto; /* Выравнивание по центру */ } #nav { width: 200px; /* Ширина левой колонки */ float: left; } #aside { width: 300px; /* Ширина правой колонки */ float: right; } #content { margin: 0 300px 0 200px; /* Отступ на ширину левой и правой колонки*/ }

Полный код страницы с учетом этого стиля представлен в примере 3.

Пример 3. Трехколоночный макет

У данной реализации есть несколько особенностей:

• колонки имеют разную высоту, но за счет применения фона создается иллюзия одинаковой высоты у всех трех колонок;
• у левой и правой колонки одинаковый цвет фона, он устанавливается свойством background для слоя container;
• вид колонок сохраняется только в случае, когда высота центральной колонки больше остальных. Если это условие нарушить, пропадет эффект колонок (рис. 2), в остальном макет при этом отображается корректно.

Рис. 2. Правая колонка выше остальных

Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

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

На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.

Наша цель - сделать трехколоночный сайт, блоки которого будут:

1. Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
2. Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
3. Адаптироваться при уменьшении заданных размеров.

Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block . Да-да, свойство float уже не так актуально, но оно нам все же понадобится.

Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main и inline :

Результат:

Размер окна больше 900px

Размер окна меньше 900px

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

Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main.

Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался, добавляем в стили @media запрос:

/* Простой пример @media запроса*/ @media (max-width:600px) { .inline div { display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */ width:100%; /* Задаем на всю ширину экрана */ height:100px; } }

Более подробно можно посмотреть на JS Fiddle -  приветствуется любое изменение кода в лучшую его сторону.

За материал выражаем благодарность нашему подписчику,

19.07.16 2.9K

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

Вступление

Для выполнения заданий этой статьи вы должны иметь навыки написания кода как на HTML , так и на CSS . Если это не так, тогда вам лучше использовать визуальный редактор.

Обратите внимание, что вы вовсе не должны быть экспертом в HTML или CSS . Вам просто нужно иметь базовые знания этих технологий, иначе эта статья будет вам непонятна.

Использование свойства float для создания двух колонок

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

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

Базовый HTML код для сайта с двумя колонками

HTML часть кода довольно проста. Нам нужно только два блока div , по одному для каждого столбца:

Слова «Меню навигации » и «Контент » являются лишь указателями для боковой панели навигации и основного контента. Позже вы удалите эти слова, когда расположите в блоках реальный контент. div «container» — это блок, содержащий два столбца. Его можно использовать, если нужно применить определенные стили к обоим столбцам.

CSS-код для сайта с двумя колонками

Приведенный ниже CSS код использует проценты («%» ) для определения ширины обеих колонок. Так как они измеряются в относительных единицах, то будут расширяться или сжиматься, чтобы заполнить все окно браузера независимо от того, какую ширину оно имеет. Например, если вы измените размер окна браузера, шаблон перестроит столбец так, чтобы он максимально соответствовал границам окна.

Код CSS очень прост:

#content { float: right ; width: 80% ; } #navbar { float: right; width: 20%; }

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

Как приведенный выше код работает на практике, можно увидеть здесь.

Как это работает: пояснения к CSS-коду

Правило «float: right » определяет, как блок DIV выводится из общего потока документа, а также размещается справа от всех других элементов, обтекающих его слева. Первый блок DIV , который встречается на HTML-странице , смещается в первую очередь.

В приведенном выше примере «#content » первым сдвигается вправо и для него задается ширина в 80% от ширины окна браузера. Наше следующее правило также выводит «#navbar » из потока документа и смещает его вправо.

Так как у нас уже есть плавающий элемент в таком положении. Согласно заданным правилам адаптивной верстки, второй блок помещается слева от существующего элемента, если для него есть достаточно пространства. Иначе он будет размещен под первым элементом. С учетом этого сумма сторон обоих блоков должна быть равна 100% или менее, иначе у нас не будет достаточно места, чтобы разместить их рядом.

Как разместить колонку навигации справа

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

#content { float: left ; width: 80% ; } #navbar { float: left ; width: 20% ; }

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

Как корректно изменить ширину

Согласно установленным техническим правилам верстки, приведенные выше стили, задают для боковой колонки ширину в 20% от ширины окна браузера, а для колонки контента — 80%, что в сумме дает 100%.

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

Если одна из колонок смещается ниже другой: как это исправить

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

Это может произойти, даже если вы используете мои значения «20% » и «80% «. Например, если добавить поля, рамки и отступы для одной или обеих колонок. Ширина этих столбцов также увеличится, что приведет к тому, что общая сумма будет превышать 100%.

Кроссбраузерность и правила верстки подразумевают два способа решения этой проблемы:

• Уменьшить значение ширины колонок, пока браузер не выведет их так, как вы хотите. Но помните, что проценты являются относительной единицей измерения. Она привязана к ширине окна браузера пользователя. Поэтому, если вы тестировали макет на своей системе, и обнаружили, что при добавлении к padding-left 10 px к одной из колонок и уменьшении ширины на 1%, все работает прекрасно, то нельзя делать вывод, что 1% = 10 пикселей. Иными словами, 1% от 1024 пикселей отличается от 1% от 1920 пикселей, и так далее. Убедитесь, что вы учитываете различия ширины окна в других браузерах и диагоналях экрана;
• Решение, которое предпочитаю я, заключается в том, чтобы создать внутри блоков «#navbar » и «#content » вложенный DIV , и поместить в него все отступы, поля, рамки и фактический контент. Таким образом, для внешних блоков можно оставить старые 20% и 80%, не заботясь о поправках на поля, отступы и т.д.

Например, в демо-сайте с двумя колонками используется следующий HTML-код для создания вложенного блока DIV :

К написанным ранее стилям CSS добавьте следующие свойства для «#innercontent » и «#innernavbar «:

#innercontent { padding-left: 10px ; padding-right: 10px ; } #innernavbar { padding-left: 5px ; padding-right: 5px ; }

CSS для «#content » и «#navbar » остаются такими же, как описано в первой половине этой статьи.

Так как отступ применяется к внутреннему блоку DIV , размеры наружных блоков остаются неизменными, и у нас сохраняется макет с двумя колонками.

Как добавить шапку и подвал сайта, растягивающиеся на обе колонки

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

Влад Мержевич

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

Рис. 5.17. Трёхколоночные макеты

Здесь символ процентов (%) означает, что ширина колонки задана в процентах от ширины макета, px - ширина колонки указана в пикселах, а знак бесконечности (∞), что колонка занимает оставшееся пространство. Несмотря на обилие разных макетов, принципы их построения остаются одинаковыми и включают два основных способа: позиционирование и плавающие элементы. Также можно воспользоваться таблицами для создания колонок одинаковой высоты.

Использование позиционирования

Для управления положением слоёв относительно родительского элемента необходимо для родителя установить свойство position со значением relative , а дочерним элементам, которые формируют колонки, значение absolute . Структура кода для первых четырёх макетов будет одинаковой и представлена в примере 5.13.

Пример 5.13. Две колонки в пикселах или три в процентах

Здесь колонки пронумерованы по порядку, т.е. колонка 1 располагается слева, колонка 2 по центру, а колонка 3 справа.

У позиционирования есть определённый недостаток, который ограничивает применение этого метода - при добавлении подвала он будет скрыт под колонками. Это связано с тем, что у слоя layout нет высоты как таковой, поэтому он не «толкает» слой с подвалом вниз. Если подвал непременно требуется на странице, следует воспользоваться методом построения колонок, основанным на плавающих элементах. Ещё этот метод не работает в IE6 из-за наличия в нём ошибок.

Для макета № 1, в котором ширина первой колонки резиновая, а остальных фиксирована, стиль будет следующим (пример 5.14).

Пример 5.14. Макет № 1

Header { background: #D5BAE4; } .layout { position: relative; /* Относительное позиционирование */ } .layout DIV { position: absolute; /* Абсолютное позиционирование */ } .col1 { background: #C7E3E4; /* Цвет фона */ left: 0; /* Положение левого края */ right: 300px; /* Положение правого края */ } .col2 { background: #E0D2C7; width: 200px; /* Ширина колонки */ right: 100px; /* Сдвигаем влево на ширину колонки 3 */ } .col3 { background: #ECD5DE; width: 100px; right: 0; }

У колонок с заданной шириной стоит свойство width , а их положение слева или справа задаётся соответственно свойством left или right . Резиновая ширина оставшейся колонки строится после одновременного добавления left и right , значения которых совпадают с шириной фиксированных колонок.

Макеты № 2 (пример 5.15) и № 3 (пример 5.16) построены на том же принципе.

Пример 5.15. Макет № 2

Header { background: #D5BAE4; } .layout { position: relative; } .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; left: 100px; right: 200px;} .col3 { background: #ECD5DE; width: 200px; right: 0; }

Пример 5.16. Макет № 3

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; width: 200px; left: 100px; } .col3 { background: #ECD5DE; left: 300px; right: 0; }

Макет № 4, в котором ширина всех колонок задана в процентах имеет некоторые нюансы. Если требуется одинаковая ширина всех колонок, её можно задать дробно (33.33%), но браузер Opera не умеет работать с дробными значениями процентов, поэтому в нём между колонками появятся «дыры» (рис. 5.18).

Рис. 5.18. Ширина колонок, заданная в дробных процентах

В подобных ситуациях следует перейти на неравные доли, к примеру, 33%, 34%, 33%, как показано в примере 5.17.

Пример 5.17. Макет № 4

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 33%; } .col2 { background: #E0D2C7; left: 33%; width: 34%; } .col3 { background: #ECD5DE; right: 0; width: 33%; }

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

Оставшиеся макеты, в которых две колонки из трёх резиновые, представляют особую группу, потому что их можно трактовать по-разному. Так, ширина одной колонки указывается в пикселах, другой в процентах от ширины макета, а ширина оставшейся вычисляется автоматически. На рис. 5.19 показаны разные подходы к вычислению ширины колонок на примере макета № 5.

Рис. 5.19. Ширина двух резиновых колонок

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

Первый и второй вариант легко реализуется аналогично коду с двумя колонками в пикселах. Только вместо ширины в px указываем %. В примере 5.18 приведён стиль макета № 5 с первой колонкой заданной в процентах.

Пример 5.18. Макет № 5. Ширина второй колонки вычисляемая

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 50%; } .col2 { background: #E0D2C7; left: 50%; right: 200px; } .col3 { background: #ECD5DE; right: 0; width: 200px; }

Стиль макета № 5 с вычисляемой первой колонкой показан в примере 5.19.

Пример 5.19. Макет № 5. Ширина первой колонки вычисляемая

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; left: 0; right: 200px; margin-right: 50%; } .col2 { background: #E0D2C7; width: 50%; right: 200px; } .col3 { background: #ECD5DE; width: 200px; right: 0; }

Первой колонке нельзя задать ограничение справа через свойство right , поскольку значение будет равно 50%+200px, в CSS2 таких вычисляемых значений нет. Поэтому применим фокус - ограничим первый слой справа шириной 200px через right и сдвинем его влево на ширину второй колонки 50% с помощью margin-right . Слой у нас абсолютно позиционированный, поэтому такие махинации никак на ширине не скажутся.

Третий вариант с двумя резиновыми колонками требует наличия дополнительного слоя, назовём его rubber , относительно которого будет задаваться ширина колонок (пример 5.20).

Пример 5.20. Макет № 5. Ширина двух колонок в процентах

Построение макета № 6 аналогично макету № 5, поэтому останавливаться на нём не будем. Что касается макета № 7, то для него существует вариант, который может вызвать трудность. Это касается того случая, когда требуется сделать ширину левой и правой колонки вычисляемыми и равными между собой. Для этого ширину первой и третьей колонки следует сделать равной 50% (рис. 5.20).

Рис. 5.20. Макет № 7 с равными по ширине колонками

Чтобы осталось место под вторую колонку, воспользуемся свойством margin-right для первой колонки и margin-left для третьей. Значением этих свойств будет половина ширины второй колонки. Так, если она равна 200px, то получится margin-right : 100px (пример 5.21).

Пример 5.21. Макет № 7. Ширина резиновых колонок одинакова

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; left: 0; right: 50%; margin-right: 100px; } .col2 { background: #E0D2C7; width: 200px; left: 50%; margin-left: -100px; } .col3 { background: #ECD5DE; left: 50%; right: 0; margin-left: 100px; }

Напрямую свойством width пользоваться нельзя, поскольку добавление margin только увеличит ширину, а не уменьшит, как нам требуется. Поэтому ширина формируется одновременно заданными свойствами left и right . С позиционированием второй колонки возникают сложности в указании значения left или right , поскольку оно будет равно 50%-200px. Так что устанавливаем положение левого края на 50% (left : 50% ), а затем колонку целиком сдвигаем влево на половину её ширины через свойство margin-left (margin-left : -100px ).

Поскольку ширина некоторых колонок вычисляется автоматически, рекомендуется сделать ограничение по минимальной ширине макета, добавив свойство min-width для селектора BODY . Тогда ширина колонок не станет уменьшаться при достижении заданного предела.

BODY { min-width: 800px; /* Минимальная ширина макета */ }

Значение min-width зависит от макета и содержимого страницы и обычно подбирается опытным путём.

Использование плавающих элементов

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

Построение колонок происходит с помощью свойства float в сочетании со свойствами margin и width . В зависимости от выбранного макета меняется и порядок колонок в коде, вначале всегда следуют слои, к которым добавляется float .

Макет № 1. Резиновая первая колонка

Ширина второй и третьей колонки указывается в пикселах, а их положение через свойство float со значением right . Для первой колонки также требуется задать свойство margin-right со значением равным суммарной ширине остальных колонок (пример 5.22).

Пример 5.22. Макет № 1

Макет № 2. Резиновая средняя колонка

Ширина первой и третьей колонки задана в пикселах, а их положение - через свойство float со значением left для первой колонки и right для третьей. Средняя колонка, чтобы она сохраняла свой вид, содержит универсальное свойство margin , задающее отступ слева и справа (пример 5.23).

Пример 5.23. Макет № 2

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет № 3. Резиновая третья колонка

Положение первой и второй колонки указывается через свойство float со значением left , для третьей колонки нужно установить отступ слева (margin-left ) на суммарную ширину остальных колонок (пример 5.24).

Пример 5.24. Макет № 3

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет № 4. Ширина всех колонок задана в процентах

Для построения этого макета подойдёт множество вариантов, основанных на предыдущих макетах, только вместо пикселов следует указать проценты. Ещё один способ показан в примере 5.25, где используется только свойство float и width .

Пример 5.25. Макет № 4

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет № 5. Ширина двух колонок резиновая

На рис. 5.19 было продемонстрировано, что макет № 5, у которого две резиновые колонки, можно трактовать по-разному.

1. Ширина первой колонки указана в процентах от ширины макета, третьей колонки в пикселах, а средняя колонка занимает оставшееся место.
2. Ширина второй колонки указана в процентах от ширины макета, третьей колонки в пикселах, а первая колонка занимает оставшееся место.
3. Суммарная ширина двух резиновых колонок принимается за 100%, и ширина колонок указывается в процентах от этой величины.

Ширина средней колонки вычисляемая

Здесь ширина первой колонки указывается в процентах, а её положение через свойство float со значением left , для третьей колонки ширина задана в пикселах, а значение свойства float как right . Для средней колонки остаётся только установить отступы слева и справа на ширину колонок (пример 5.26).

Пример 5.26. Макет 5.1

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Ширина первой колонки вычисляемая

Это наиболее хитрый макет, поскольку для первой колонки её ширина напрямую не указывается. Но чтобы ограничить контент необходимо для свойства margin-right указать значение совмещающее проценты и пикселы. В CSS2, как уже говорилось, подобное задать нельзя, поэтому добавим внутрь слоя col1 ещё один слой с именем wrap и добавим отступ каждому из этих слоёв. Одному в процентах, другому в пикселах (пример 5.27).

Пример 5.27. Макет 5.2

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Ширина двух колонок в процентах

В этом макете общая ширина резиновых колонок принимается за 100%, поэтому нам потребуется дополнительный слой, относительно которого будет отсчитываться ширина внутренних колонок. Этот слой с именем rubber совместно со слоем col3 работает как двухколоночный макет, а внутренние слои col1 и col2 выстраиваются по горизонтали за счёт применения свойства float (пример 5.28).

Пример 5.28. Макет 5.3

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макеты 6, 7 и их разновидности строятся по тому же принципу, что и макет № 5, за исключением макета № 7, в котором ширина левой и правой колонки резиновая и равна между собой.

Вначале готовим основу, указываем порядок слоёв в HTML-коде.

Col1 { width: 50%; float: left; } .col2 { width: 200px; float: left; } .col3 { width: 50%; float: right; }

Это ещё не всё, слои пока никаких колонок не формируют и выстраиваются совершенно не подходящим для нас способом. Требуется сместить вторую колонку влево на половину её ширины (margin-left : -100px ) и заставить третью колонку встать на своё место. Для этого надо увеличить её ширину так, чтобы она была равна или больше, чем 50%+100px (половина второй колонки). Лучше всего подойдёт свойство margin-left с отрицательным значением, после этого колонки будут созданы. Есть ещё некоторые нюансы. Крайние колонки состыкованы между собой, что хорошо заметно, когда их высота превышает высоту средней колонки (рис. 5.21).

Рис. 5.21. Состыкованные колонки

К тому же в левой колонке текст справа, а в правой колонке текст слева скрывается под фоном центральной колонки. Это будет не заметно, если высота этой колонки большая, но это не всегда возможно. Чтобы преодолеть указанные недостатки, необходимо вложить внутрь крайних колонок ещё по одному слою (в примере он называется wrap ) и уже для них задать цвет фона колонки, необходимые поля и отступы. Окончательный код приведён в примере 5.29.

Пример 5.29. Макет № 7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Поля и границы в трёхколоночном макете

В приведённые примеры макетов намеренно не добавлялось свойство padding , поскольку код служит лишь основой макета, и вы сами должны в конкретных случаях решать, нужны поля в колонках или нет. Добавление полей и границ к блочному элементу увеличивает его ширину, что надо учитывать при вёрстке. Однако ширина вырастает, только если для слоя установлено значение width . Рассмотрим несколько примеров, где ширина будет меняться, а где нет.

Div { /* padding влияет на ширину */ width: 200px; padding: 10px; } div { /* padding не влияет на ширину */ position: absolute; left: 20px; right: 20px; padding: 10px; } div { /* padding влияет на ширину */ float: left; width: 50%; padding: 10px; } div { /* padding не влияет на ширину */ margin-right: 50%; padding: 10px; }

В тех колонках, где padding или border требуется, но их добавление приведёт к «ломке» макета, можно воспользоваться вложенным слоем и установить необходимые свойства для него.

В этом примере ширина слоя заданная как 200 пикселов меняться не будет, но поля и рамка будут добавлены.

Таблица в качестве колонок

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

Пример 5.30. Макет № 1

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Колонка 1

Колонка 2

Колонка 3

Добавление свойства padding к селектору TD отменяет действие атрибута cellpadding тега

и добавляет поля к содержимому ячеек. При этом сама ширина колонок никак не изменится.

Макет № 2

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; } .col3 { background: #ECD5DE; width: 200px; }

Макет № 3

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; width: 200px; } .col3 { background: #ECD5DE; }

Макет № 4

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 33%; } .col2 { background: #E0D2C7; width: 34%; } .col3 { background: #ECD5DE; width: 33%; }

В макете 6.1 ширина первой колонки установлена в пикселах, третьей в процентах, а средняя колонка занимает оставшееся место.

Макет № 6.1

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 200px; } .col2 { background: #E0D2C7; } .col3 { background: #ECD5DE; width: 40%; }

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

Ширина для крайних колонок устанавливается равной 50%, а для средней колонки она задаётся в пикселах. Чтобы все размеры соблюдались к таблице необходимо добавить свойство table-layout со значением fixed .

Layout { width: 100%; table-layout: fixed; } .col1 { width: 50%; } .col2 { width: 200px; } .col3 { width: 50%; }

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

В примере 5.31 приведён полный код макета № 7.

Пример 5.31. Макет № 7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Он встал под дерево и ждет, И вдруг граахнул гром. Летит ужасный бармаглот, И пылкает огнем. Раз-два, раз-два! Горит трава, Взы-взы - стрижает меч, Ува! Ува! И голова Барабардает с плеч. Льюис Кэрролл, перевод Дины Орловой, рисунки Джона Тенниела

Результат примера показан на рис. 5.22.

Рис. 5.22. Колонка по центру макета