Блочная верстка многоколоночного резинового сайта

Скачать материалы:

Скачать 11 видеоурок по CSS Размер: 42.95 MB, скачали: 749 раз.
Скачать исходники к 11 видеоуроку по CSS Размер: 153.08 kB, скачали: 781 раз.

Как запустить видеоурок:

1. Разархивировать скачанный файл.
2. Открыть папку index.
3. Запустить файл index.html в браузере.

• не все решения, подходящие для IE6 подходят для IE5.5. Поэтому создается лишний код для IE5.5. Код становится громоздким и вес его увеличивается.
• Браузером IE5.5 пользуются очень мало людей. Если IE6 используют десятая доля процента (0.1%) людей в русскоязычном интернете, то IE5.5 — одна сотая (0.01%), если не меньше.

Поэтому мы отказываемся от поддержки IE5.5, но под IE6 будем подстраиваться.

Подготовка к работе

Давайте перейдем в папку нашего сайта и удалим файл, которые мы использовали для IE5.5: iepngfix.htc. Теперь нужно удалить код из page.html и переписать условные комментарии:

<!--[if lt IE 7]>

Мы написали, что если версия браузера ниже, чем IE7, то применять нижеприведенные правила.

Далее по всему коду убираем класс png. Сохраняем и забываем про IE5.5.

Блочная верстка многоколоночного сайта

Давайте перейдем в браузер и разберемся с тем, что у нас должно получиться. Во-первых, посмотрим, что мы имеем. Мы имеем одноколоночный макет с header'ом и footer'ом, а также с изображениями, которые выровнены с помощью float. Теперь посмотрим, что мы должны получить. Мы должны получить левое меню и правое меню. Это означает, что у нас будет три колонки одинаковой высоты. Оболочка wrapper должна быть резиновой и иметь минимальную и максимальную ширину.

Создание правого меню

Итак, давайте приступим и создадим правое меню. Переходим в код и перед блоком контента добавляем блок right_menu.

<div id="right_menu">
<p>Правое меню</p>
</div>

Блок содержит абзац с двумя словами: «Правое меню». Мы добавили этот блок выше блока контента, потому что именно этому блоку мы будем задавать свойство float со значением right. Тем самым, контент будет обтекать наше правое меню. Сохраняем и переходим в таблицу стилей. Задаем свойства для right_menu:

#right_menu{
background-color:#CCC;
float: right;
width: 50px;
}

Задали фоновый цвет, обтекание и ширину в 50 пикселей.
Сохраняем. Смотрим, что получилось. Мы видим, что у нас действительно появился блок, выровненный по правому краю, шириной в 50 пикселей. Его текст вылезает за пределы блока, и контент его обтекает. Нам нужно решить эти две проблемы.

Решение проблем с блоком меню

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

#right_menu{
background-color:#CCC;
float: right;
width: 50px;
overflow: auto | hidden |scroll | visible;
}

• visible — стоит по умолчанию. Означает, что даже если содержимое выходит за пределы блока, то оно будет отображаться.
• auto -  если содержимое выходит за пределы блока, то оно приобретает полосы прокрутки. Давайте сохраним и посмотрим. Мы видим, что у нас появилась горизонтальная полоса прокрутки и с помощью нее мы можем прочитать текст.
• scroll — добавляет полосы прокрутки в любом случае — нужны они или нет. Применив это значение, мы видим, что у нас появилась как горизонтальная, так и вертикальная полоса прокрутки, которая нам вовсе не нужна.
• hidden – если содержимое блока выходит за пределы, то оно прячется. Что получилось, вы видите на своих экранах.

Давайте увеличим ширину правого меню и разберемся с проблемой обтекания его контентом.

#right_menu{
background-color:#CCC;
float: right;
width: 120px;
overflow: auto | hidden |scroll | visible;
}

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

#content{
background-color: #fff;
margin-right: 120px;
}

Сохраняем. Смотрим. Отлично, только правая колонка не выглядит, как колонка. Хотелось бы, чтобы она продолжалась до footer'а, как и content. Способов создания колонок равной высоты достаточно много. Я приведу лишь некоторые из них. По этой ссылке вы можете прочитать четыре способа: http://habrahabr.ru/blogs/css/64173. По следующей ссылке вы можете прочитать пятый способ: http://habrahabr.ru/blogs/css/64242. Мы воспользуемся вторым. Это способ с использованием java-script.
Копируем код в новый файл, который сохраняем с расширением .js. Затем нам пригодится второй файл — это библиотека jquery. Скачать ее можно с википедии : http://ru.wikipedia.org/wiki/Jquery. Желательно скачивать в сжатом виде — по ссылке «мин.». Я скачиваю последнюю версию. Чтобы скопировать всё, нужно нажать сочетание клавиш Ctrl+A , Ctrl+C и Ctrl+V в блокноте, после чего сохранить под именем «jquery-1.6.2.min.js».Если у вас браузер — не опера, то, скорее всего, вам будет достаточно просто нажать правой клавишей мыши и выбрать пункт «сохранить как». В любом случае я прикладываю эти файлы в дополнительных материалах. После сохранения, файлы нужно добавить в папку js нашего сайта. Первый файл — height_col (высота колонок), второй — jquery-1.6.2 (библиотека jquery версии 1.6.2). После того, как вы поместили их в папку, вам нужно открыть height_col в новой вкладке notepad, а также подключить их к документу page.html. Подключаю я их после подключения таблицы стилей, добавив следующий код:

<script type = "text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type = "text/javascript" src="js/height_col.js"></script>

Таким образом, сначала подключается библиотека jquery, потом скрипт высоты колонки. Сохраняем, и в скрипт heght_col.js прописываем идентификаторы наших колонок. Левой колонки у нас пока нет, поэтому мы ее удаляем.

setEqualeight($("#content, #right_menu"));

Таким образом, у нас есть идентификатор content и правое меню. Колонки мы хотим, чтобы были одинаковой высоты. Сохраняем. Проверяем в браузере, что получилось.

У нас получилось, что колонка действительно тянется до footer'а, но content у нас почему-то расположился ниже footer'а. Это проблема связана со свойством float. Это свойство достаточно загадочное, поэтому нам нужно добавить области content свойство overflow. Но значение этого свойства должно быть либо auto, либо hidden. Пропишем auto.

#content{
overflow: auto;
background-color: #fff;
margin-right: 120px;

Сохраняем.
Говорят, что чтобы это решение работало в IE6, следует блоку-родителю (в нашем случае — это wrapper) задать значение ширины. Если честно, в IE6 у меня такой проблемы вообще не возникло и мне там не понадобилось даже вставлять свойство overflow. Ну,  ширина у нас задана,  свойство overflow – тоже, и мы можем проверить это в браузере Opera. Проверяем — все отлично. Проверим в IE6. Здесь все тоже отображается нормально. Поэтому, давайте перейдем снова в код.

Можно заметить, что мы задали правому меню (правой колонке) float right. Обычно, чтобы footer не обтекал правую колонку, нам нужно перед footer'ом вставить div с классом clear.

<div class="clear"></div>
<div id = "footer">
<p> &#169; Все права защищены. </p>
</div>

Этот div пустой. Он создан для того, чтобы footer не обтекал правую колонку. Если мы посмотрим, то в контенте мы задавали перенос строки с классом clear. Здесь же мы задаем div с классом clear. Но хочу сказать, что в нашем случае это свойство необязательно, так как колонки у нас будут одинаковой высоты, поэтому footer не будет обтекать правое меню. Но  этот блок с классом clear я оставлю.

Быстрая смена правого меню на левое

Теперь давайте сделаем из правого меню левое. Если бы мы работали с таблицами (табличной версткой), то нам бы пришлось менять очень много кода. Здесь же нам нужно изменить всего несколько значений. Переименовываем right_menu в left_menu.

<div id="left_menu">
<p>Правое меню</p>
</div>

Сохраняем. Переходим в таблицу стилей, меняем  right_menu на left_menu, float задаем left и отступ content'у задаем margin-left.

#left_menu{
background-color:#CCC;
float: left;
width: 120px;
overflow: hidden;
}
#content{
overflow: auto;
background-color: #fff;
margin-left: 120px;

Cохраняем. В скрипте также заменяем right_menu на left_menu.

setEqualeight($("#content, #left_menu"));

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

<div id="left_menu">
<p>Левое меню</p>
</div>

Создаем еще одно меню

И создаем еще один блок <div>.

<div id="right_menu">
<p>Правое меню</p>
</div>

Сохраняем. Переходим в таблицу стилей, прописываем правила для правого меню. Цвет оставляем такой же, float задаем right, ширину давайте зададим в процентах, overflow – hidden.

#left_menu{
background-color:#CCC;
float: right;
width: 15%;
overflow: hidden;
}

Так как мы добавляем еще одну колонку, нам нужно задать отступ контенту: с верхнего края — ноль пикселей, с правого — 15%, снизу — тоже ноль пикселей и слева — 120 пикселей.

#content{
overflow: auto;
background-color: #fff;
margin: 0 15% 0 120px;

Сохраняем и прописываем в скрипте новый идентификатор.

setEqualeight($("#content, #left_menu, #right_menu"));

Сохраняем и смотрим, что у нас получается. В браузере у нас появилось левое меню и правое меню, колонки одинаковой высоты и нам не составляет труда задать им фоновые изображения. Я прикладываю два фоновых изображения: для левой и правой колонки. Эти файлы я уже положил в папку img. Они называются bg_l_menu и bg_r_menu.

#left_menu{
background-color:#CCC url('img/bg_l_menu.png') repeat;
float: right;
width: 15%;
overflow: hidden;
}
#right_menu{
background-color:#CCC url('img/bg_r_menu.png') repeat;
float: right;
width: 15%;
overflow: hidden;
}

Задали изображения, установили повторения, теперь сохраняем. Проверяем в браузере Opera, что у нас получилось, и видим, что ничего не отображается. Я возвращаюсь в код и вижу, что совершил ошибку: забыл убрать «-color».

#left_menu{
background:#CCC url('img/bg_l_menu.png') repeat;
float: right;
width: 15%;
overflow: hidden;
}
#right_menu{
background:#CCC url('img/bg_r_menu.png') repeat;
float: right;
width: 15%;
overflow: hidden;
}

Сохраняем. Смотрим еще раз. Теперь всё отлично. Давайте проверим в IE. Видим, что в этом браузере страница тоже отображается нормально.

Верстка резинового сайта

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

#wrapper{
width: 80%;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin: 0 auto;
background-color: #fff;
text-align: left;
}

Сохраняем. Посмотрим, что получилось в браузере. Ширина стала действительно 80%. Теперь попробуем уменьшить этот блок. Постепенно будем сужать окно, и мы видим, что блоки стали наезжать друг на друга, появились полосы прокрутки, когда мы задали в overflow значение auto. Как решить такую проблему? Это можно сделать только заданием минимальной ширины. Мы можем задать минимальную ширину либо всей оболочке wrapper, либо content'у. Давайте зададим ее всей оболочке. Минимальная оболочка задается с помощью свойства min-width. Установим значение 600 пикселей.

#wrapper{
width: 80%;
min-width: 600px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin: 0 auto;
background-color: #fff;
text-align: left;
}

Сохраняем, пробуем постепенно уменьшать нашу страницу, и видим, что у нас появляется горизонтальная полоса прокрутки, т.е. ширина нашего окна менее, чем 600 пикселей и блоки друг на друга не налезают, а появляется просто полоса прокрутки. В content'е вы можете увидеть вертикальную полосу прокрутки. Возникла она из-за скрипта. Мы уменьшили окно браузера, и появилась эта полоса. Скрипт срабатывает при загрузке страницы и вычисляет высоту колонок. При уменьшении ширины окна браузера, наш текст сжимается, и получается такая полоса. На мобильных телефонах она появляться не будет, потому что там страница загружается с уже известной шириной. Если мы сейчас обновим страницу, то этой полосы не будет — скрипт снова сработает.

Итак, преимущество минимальной ширины я вам сейчас показал, а теперь давайте зададим максимальную ширину. Мы видим, что чем дальше мы раздвигаем окно, тем область content'а становится шире. И если монитор будет очень большим, то может случиться так, что весь текст будет в несколько строчек, а пользователю будет неудобно смотреть сначала в левую часть экрана, потом в правую часть экрана, потом опять в левую и т. д. Чтобы это предотвратить, нам нужно установить максимальную ширину оболочки. Переходим в код. Максимальную ширину, как вы уже догадываетесь, мы устанавливаем с помощью свойства max-width. Пусть значение будет 1200 пикселей.

#wrapper{
width: 80%;
max-width: 1200px;
min-width: 600px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin: 0 auto;
background-color: #fff;
text-align: left;
}

Максимальную ширину мы сейчас проверить не сможем, потому что у нас достаточно маленький размер видео, но у себя вы сможете проверить. Откроете на весь экран и увидите, что ширина блока не превышает 1200 пикселей, а все пустое пространство заполняется фоном.

Решение проблем в IE6

В принципе это все, и все у нас отлично работает, но в браузере IE6, свойства min-width и max-width, а также min-height и max-height (минимальная и максимальная высота) не поддерживаются. Проверим: уменьшаем область браузера IE6 и видим, что блоки налезают друг на друга. Поэтому, чтобы этого не происходило, мы используем комплексный метод решения. Дело в том, что в IE6 очень много багов. Можно исправлять их поодиночке, то есть, сначала один, потом второй, потом третий, а можно использовать скрипт, который улучшит браузер IE6 до IE7. Это не значит, что у нашего пользователя начнется обновление браузера. Просто все недостатки IE6 будут удалены на нашем сайте. Скачать этот скрипт можно по ссылке на сайте http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html. Если вы знаете английский, вы можете прочитать про все устраненные недостатки. Также можно воспользоваться Google-переводчиком и перевести эту страницу.

После того, как вы скачаете и распакуете архив, вы увидите в нем несколько файлов: в папке src находятся те же файлы, но они в несжатом виде. Потому, вы можете ее либо удалить, либо не обращать на нее внимания. Нам нужны файлы ie7-squish и IE7. Мы их копируем и добавляем в папку js. Теперь нам нужно их подключить. Подключаем их в условных комментариях для браузера IE меньше седьмого с помощью уже использованного нами тега <script>.

<script type = "text/javascript" src="js/ie7.js"></script>
<script type = "text/javascript" src="js/ie7-squish.js"></script>

Сохраняем. Давайте посмотрим, что получается в браузере IE6. Уменьшаем ширину и видим, что появляется полоса прокрутки. Итак, в браузере IE6 у нас все отображается хорошо и в браузере Opera – тоже.

Решение проблемы в Google Chrome и Safari

Теперь давайте проверим, как отображается наш сайт в браузерах Mozilla Firefox, Google Chrome и Safari. Начнем с Mozill'ы. Здесь наш сайт отображается нормально, т.е. как и в Oper'е, и в IE6. Теперь откроем Google Chrome. Здесь мы видим первую и единственную проблему: содержимое блока content располагается не на всю ширину. Вы это и сами видите. Давайте посмотрим, что творится с Safari. Здесь то же самое. Так как все тонкости знать мы не можем, то нам нужно поиграться со свойствами в таблице стилей.

Переходим в таблицу стилей и давайте, для начала, уберем свойство overflow:auto.

#content{
overflow: auto;
background-color: #fff;
margin: 0 15% 0 120px;

Сохраняем и проверяем, что творится в браузере Google Chrome. Я жму клавишу F5 – обновить, и мы видим, что содержимое теперь отображается на положенную ему ширину. Однако после первого очищения (у нас стоял перенос строки с классом clear), весь остальной контент отображается ниже левой и правой колонок. Если мы перейдем в браузер Safari, то увидим, что там происходит то же самое. Переходим снова в код. Восстанавливаем свойство и попробуем убрать свойство margin.

#content{
overflow: auto;
background-color: #fff;

Сохраняем, обновляем. Теперь всё отображается нормально. Если посмотрим в Safari, то и здесь, в принципе, все отображается нормально. Давайте тогда снова проверим другие браузеры. Например, Mozilla Firefox. Здесь тоже все хорошо отображается. Проверим браузер Opera – также всё отлично. Ну и перейдем в браузер IE6. А здесь появляется полоса прокрутки, которая двигает только текст, а изображения не двигает, плюс некоторые изображения вышли ниже footer'a. Значит, такое решение нам не подходит. Тем более, что свойство margin должно присутствовать.

Давайте посмотрим в код, и получается, что два свойства: overflow и margin — конфликтуют между собой в браузерах Google Chrome и Safari. Тогда, наверное, эти свойства нужно разделить. Это можно сделать, создав новый блок. Давайте перейдем в page.html. Создаем новый <div> с id = container.

<div id = "content">
<div id="container">
<…>
</div>
</div>

Таким образом, <div> с id=container  находится внутри блока <div> с id = content. Можно сделать табуляцию. Сохраняем.

Теперь давайте пропишем правила для container'а. Какие правила нам нужно прописать? Раз мы договорились разделить свойства overflow и margin, то свойство overflow из #content нужно переместить в #container.

#container { overflow: auto; }
#content{
background-color: #fff;
margin: 0 15% 0 120px;

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

#container { overflow: auto; width: 100%; }

Сохраняем. Проблема решена.

Если ширина в процентах не устраивает, то можно задать свойство zoom. Его понимает только браузер IE.

#container { overflow: auto; zoom: 1; }

Сохраняем — все нормально. Что это за волшебные свойства? На самом деле ничего волшебного в них нет. Просто в IE6 есть более загадочное свойство – hasLayout. Это свойство может присваиваться любому блоку, и в изначальном положении оно либо есть, либо его нет. Именно с помощью свойства zoom со значением 1 или свойства width со значением 100% мы применяли свойство hasLayout. Таким образом, задав это свойство, мы решили проблему. Подробнее об этом свойстве вы можете прочитать в статье: http://webew.ru/articles/406.webew (перевод). Чтобы увидеть оригинал, достаточно нажать на ссылку «On having Layout» на той же странице. Статья достаточно большая, но, если вас это интересует, то вы можете ее прочитать.

На этом я заканчиваю видеоурок и в качестве домашнего задания я предлагаю вам создать еще несколько колонок, а также поэкспериментировать со свойствами min-height и max-height — минимальная и максимальная высота. Спасибо за внимание. До встречи в следующем видеоуроке, в котором вы познакомитесь с очень увлекательной темой под названием «Позиционирование»!