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

В этом видеоуроке мы разберем:

  • Как сверстать мноколоночный сайт блоками (блочная верстка)?
  • Свойство overflow — спрячь ненужное.
  • Как сделать колонки одинаковой высоты?
  • Как сделать сайт резиновым и назначить ему минимальную и максимальную ширину?
  • Как решить все проблемы в IE6?
  • Как решить проблему, возникающую в браузерах Google Chrome и Safari?
  • Необычное свойство hasLayout и где про него прочитать.

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

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

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

  • не все решения, подходящие для 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 — минимальная и максимальная высота. Спасибо за внимание. До встречи в следующем видеоуроке, в котором вы познакомитесь с очень увлекательной темой под названием «Позиционирование»!

Подпишись на info-line:

Получать новые уроки на e-mail:

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

  1. Антон 1 октября 2011 в 12:38 #

    Спасибо за уроки.

    Если в качестве шапки используется картинка, как сделать её ссылкой ч-з css? Я добавил картинку в header с помощью свойства background, но как мне теперь вставить ссылку «/» и обязательно ли это?

    И ещё, у вас в контенте несколько абзацев. Если оставить один, то footer оказывается на середине страницы. Как пригвоздить его к нижнему краю страницы и сделать так, чтобы белый столбик контента оставался от header до footer, даже будучи полупустым?

    • Олег Зубцов 29 октября 2011 в 21:16 #

      Спасибо за уроки.

      Всегда пожалуйста! =)

      Если в качестве шапки используется картинка, как сделать её ссылкой ч-з css? Я добавил картинку в header с помощью свойства background, но как мне теперь вставить ссылку «/» и обязательно ли это?

      Нет. Это не обязательно.

      Фон в CSS ссылкой сделать нельзя. CSS — это только оформление. А ссылки — это HTML. Этим я хочу сказать, что ссылки мы делаем с помощью HTML, а уже потом можем дать им фон, например так:

      1. Фон задается для самого тега ссылки

      <a style="background-image: url('');" href="">Ссылка</a>

      2. Фон задается для элемента, который находит в теге ссылки

      <a href=""><em style="background-image: url('');">Ссылка</em></a>

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

      Самый лучший и самый простой вариант — просто сделать изображение ссылкой с помощью HTML. Здесь оно действительно становится ссылкой. Если ваша цель — сделать хедер ссылкой, то просто уберите в фон в CSS и добавьте изображение в HTML. Зачем что-то придумывать еще?!

      <a href=""><img src="" alt="изображение"></a>

      Ссылка на видеоурок о том, как сделать изображение ссылкой: info-line.net/html/videok...html-ssylki.html

      Чаще всего делают в хедере два изображение. Одного фоновое (указывается как background в CSS), а другое — логотип (указывается как img в HTML). В этом варианте именно логотип делают ссылкой на главную страницу.

      Каким способом воспользоваться — выбирать Вам.

      И ещё, у вас в контенте несколько абзацев. Если оставить один, то footer оказывается на середине страницы. Как пригвоздить его к нижнему краю страницы и сделать так, чтобы белый столбик контента оставался от header до footer, даже будучи полупустым?

      На этот вопрос, я скорее всего отвечу в следующих видеоуроках. В любом случае, если этот вопрос не будет рассмотрен в видеоуроках, то я напишу решение в комментариях или новой статье. *THUMBS UP*

  2. Антон 1 октября 2011 в 12:40 #

    Упас! Писал вопрос к прошлому уроку одноколоночного сайта

  3. Надежда 7 января 2012 в 13:44 #

    Олег, взяла шаблон из доп.материалов к Вашему уроку, чтобы были сразу колонки одинаковые. Мой макет содержит 2 колонки: меню (фикс.ширина) и контент (резиновый). Если загруженную страницу сужать окном браузера по ширине, контент сжимается и уходит по длине дальше вниз, исчезает из видимости оформление нижней части текстового блока. То же самое в колонке меню: когда несколько разделов меню разворачиваются (применила сворачивающиеся и разворачивающиеся меню) после загрузки пользователем, страница как бы удлиняется, и нижние меню уходят под футер, т.е. не возникает дополнительного пространства снизу под увеличившуюся длину колонки.

    Что бы это было и как исправить, сохранив для колонок одинаковую длину?

    • Надежда 7 января 2012 в 14:00 #

      Опера 11.60, ФФ 3.6 — проблема одинаковая.

    • Надежда 7 января 2012 в 17:21 #

      Олег, у меня код громоздкий, не могл бы ты посмотреть «вживую» — www.adelgeim2010.narod.ru ?

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

      И еще вопрос по кодировкам — narod.ru требует для загрузки файлов указания в кодировке windows-1251. Пока сайт не готов, покупать хостинг рано, загружаю и тренируюсь на бесплатном хостинге. Написала в коде charset=windows-1251, а когда работала с кодом файлов, выбирала как в твоих уроках — «преобразовать в UTF-8» и «сохранить». В итоге если офф-лайн вижу слова по-русски (нужно, чтобы в браузере стояла windows-1251), то в он-лайн отображается абракадабра (нужно в браузере менять кодировку на UTF-8 вручную); и наоборот — если читабельно открылась в инете, на локалхосте — абракадабра.

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

      • Олег Зубцов 7 января 2012 в 21:43 #

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

        Я об этой проблеме по-моему упомянул в видеоуроке. Это самое оптимальное решение для колонок одинаковой высоты, но оно за собой несет эту жертву.

        Чтобы было понятно, объясню как работает скрипт при загрузке страницы:

        1. Скрипт смотрит данные ему колонки и выбирает колонку, которая имеет максимальную высоту.

        2. Он делает эту высоту эталоном и задает эту высоту всем колонкам.

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

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

        Вывод: Скрипт работает при обновлении страницы, большинство пользователей не заметят этого бага. Меньшинство заметят, но сайт скорее всего не покинут.

        И еще вопрос по кодировкам — narod.ru требует для загрузки файлов указания в кодировке windows-1251. Пока сайт не готов, покупать хостинг рано, загружаю и тренируюсь на бесплатном хостинге. Написала в коде charset=windows-1251, а когда работала с кодом файлов, выбирала как в твоих уроках — «преобразовать в UTF-8» и «сохранить». В итоге если офф-лайн вижу слова по-русски (нужно, чтобы в браузере стояла windows-1251), то в он-лайн отображается абракадабра (нужно в браузере менять кодировку на UTF-8 вручную); и наоборот — если читабельно открылась в инете, на локалхосте — абракадабра.

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

        Преобразовывать в UTF-8 нужно только тогда, если в charset вы прописали UTF-8. Для windows-1251 используйте ANSI.

        Чтобы в онлайне отображалось без проблем, ставьте кодировку такую, какую требует хостинг. То есть windows-1251.

        • Надежда 11 января 2012 в 20:46 #

          Спасибо, Олег.

          По кодировкам — исправила.

          Как работает использованный вид скрипта поняла. Эта проблема будет со всеми способами оформления равной длины колонок или есть способы этот баг устранить?

          Если я вызываю меню из внешнего файла, насколько хорошо будет индексироваться такая страница?

          • Олег Зубцов 12 января 2012 в 0:21 #

            Эта проблема будет со всеми способами оформления равной длины колонок или есть способы этот баг устранить?

            Нет, вы можете попробовать другие способы создания колонок равной высоты, но в них могут возникнуть другие проблемы (например, способ не будет работать для IE).

            Если я вызываю меню из внешнего файла, насколько хорошо будет индексироваться такая страница?

            Как обычно.

        • Надежда 17 января 2012 в 2:15 #

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

          В коде файла равной длины колонок в строку

          tallestcolumn = currentHeight ;

          добавила + 1px:

          tallestcolumn = currentHeight + 1px;

          сколько пикселей там добавить — оказалось не важно, работает одинаково с разными значениями. (Почему работает — не знаю, но работает! Проверила в Опере, ФФ и ИЕ-тестере.)

          Добавка отодвигает низ содержимого обеих колонок от футера, добавляя нужное пространство для разворачивающихся вниз элементов.

          • Олег Зубцов 17 января 2012 в 2:57 #

            Спасибо!) Кому-то это решение поможет.

  4. Надежда 12 января 2012 в 20:13 #

    Благодарю.

  5. Александр € 12 июня 2012 в 15:52 #

    А как сделать так, чтобы колона прилипала к контенту, но не находилась под шапкой сайта (справа от неё), и доходила только до футера(если можно), и также находилась справа от него?

    • Олег Зубцов 24 октября 2012 в 21:44 #

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

      Если все-таки не сможешь справиться своими силами — пиши. Тогда возможно сделаю специальный видеоурок-ответ на твой вопрос 🙂

Оставить ответ