, включая область с двумя столбцами. Однако, по- скольку столбцы перемещаемые, они выходят за пределы основания блока вместо того, чтобы расширять границы области. Пример подобной проблемы показан на рис. 13.7, внизу. В этом случае каждое изображение перемещено влево внутри содержащего тега
, в котором задана граница. Поскольку изображения выше, чем их блоки, они выходят за пределы ос- нований блоков. К сожалению, этот пример еще хуже, чем предыдущий, потому что каждый рисунок заставляет нижнее изображение перемещаться вправо, создавая «ступенчатый» эффект.
Глава 13. Разметка страницы на основе плавающих элементов 437 Рис. 13.6. Нижний колонтитул должен оставаться внизу страницы, независимо от перемещаемых элементов. Чтобы добиться этого, используйте свойство clear Рис. 13.7. Перемещаемый элемент может выйти за пределы содержащего его блока. Если в блоке определены фоновый цвет или граница, то выходящие элементы могут выглядеть так, как будто даже не являются частью блока (вверху). Кроме того, перемещаемый элемент может врезаться в другие элементы, создавая «ступенчатый» эффект (внизу)
438 Часть 3. Макет страницы ПРИМЕЧАНИЕ Чтобы получить хорошее объяснение того, почему перемещаемые элементы могут выходить за пределы содержащих их блоков, зайдите на сайт www.complexspiral.com/publications/containing- floats/. Есть много способов избавиться от проблем, возникающих с перемещаемыми элементами. Хорошо, когда под рукой есть не одно, а несколько решений, поэтому перечислю наиболее популярные из них. Добавьте «освобождающий» элемент к основанию блока. Это решение — наи более простое. Нужно лишь добавить тег, определяющий, например, разрыв строки или горизонтальную линию, в качестве последнего элемента в теге
, содержащем перемещаемый элемент (то есть прямо перед закрывающим тегом
). Затем используйте свойство clear , чтобы укрепить этот дополнитель- ный тег под перемещаемыми элементами. Этот метод расширяет блок, выявляя его фон и границу. Вы можете указать разрыв строки — (HTML) или (XHTML) — и добавить к нему класс:
. Затем создайте для него такой стиль: br.clear { clear: both; } Проблема, связанная с этим решением, заключается в добавлении дополнитель- ного кода HTML. Сделайте перемещаемым элемент-контейнер. Более легкий путь состоит в том, чтобы просто сделать перемещаемым тег
, который содержит плавающие элементы. Перемещаемый контейнер
расширяется так, чтобы полностью вмещать любые плавающие элементы. На рис. 13.8, вверху, тег
, содержа- щий заголовок и два плавающих столбца, перемещен в левую сторону страницы. При необходимости вся его область — фон и границы — расширятся, чтобы соответствовать всему, что находится внутри, включая перемещаемые элемен- ты. Это странно, но это так. Если вы выбрали этот путь, убедитесь в том, что добавили свойство clear к лю- бому элементу, который следует за перемещаемым контейнером. Так вы гаран- тируете, что следующий элемент будет находиться под контейнером. Используйте свойство overflow:hidden. Другой распространенный метод со- стоит в добавлении следующих двух свойств к стилю блока-контейнера: overflow: hidden; Свойство overflow:hidden — одно из странностей CSS. Оно принуждает контей- нер расширяться и содержать плавающие элементы. В целом этот метод рабо- тает очень хорошо. Тем не менее, если у вас есть абсолютно расположенные элементы внутри контейнера, они могут не отображаться. Вы можете попасть в такую ситуацию, если у вас есть раскрывающиеся меню внутри другого тега, и, когда появляются раскрывающиеся элементы, кажется, что они находятся за пределами элемента-контейнера. Если это так, применяйте какой-либо дру- гой способ из описанных на этих страницах.
Глава 13. Разметка страницы на основе плавающих элементов 439 Рис. 13.8. Есть несколько способов сохранить плавающие элементы внутри содержащего их блока. Можно сделать плавающим сам блок (вверху) или использовать специальную комбинацию CSS (внизу) Воспользуйтесь методом Micro Clear Fix. Эта технология, созданная Николасом Галлахером, позволяет добавлять к тегу, который содержит плавающие элементы, всего несколько стилей и имя класса. Она является самой новой в длинной эво- люции методов, применяющих псевдокласс :after . Чтобы воспользоваться ею, нужно добавить к таблице стилей два различных стиля, один из которых будет применяться всеми современными браузерами, а другой — Internet Explorer 7 и более ранними версиями. Все это имеет следующий вид: .clear:after {
440 Часть 3. Макет страницы content: " "; display: table; clear: both; } .clear { zoom:1; } Последний стиль заставляет Internet Explorer 6 и 7 «получить разметку», как описано во врезке «Информация для опытных пользователей. Получили раз- метку?» в подразделе «Предотвращение выпадения плавающего элемента с по- мощью свойства box-sizing» данного раздела. Если поддержка этих браузеров вас не интересует, можно удалить этот стиль из своей таблицы стилей. После добавления этих стилей к таблице стилей, к div -элементу, содержащему исчезающие плавающие элементы, нужно просто добавить класс:
ar"> . Если используются элементы секционирования HTML5, например или
Глава 13. Разметка страницы на основе плавающих элементов 441 Тем не менее технология создания нескольких коло нок хорошо подойдет для длинных маркированных списков с короткими пунктами. Вместо одного слиш ком длинного маркированного списка можно будет распределить пункты по странице, расположив их в не скольких колонках, экономя драгоценное вертикаль ное пространство. Основной синтаксис очень прост: для задания количества колонок можно воспользоваться свойством column-count , для задания разрывов меду ними — свойством column-gap , а для рисования ли ний между колонками — свойством column-rule Чтобы установить стиль, размер и цвет линий между колонками, используется точно такой же синтаксис, как и для границ. Эти свойства применяются к тегу, содержащему элемен ты, которые нужно разбить на колонки. Предположим, например, что имеется несколько абзацев текста, рас положенных в теге
. При применении этих свойств к такому div контейнеру абзацы будут простираться на несколько колонок. Если, например, этому контейнеру присвоен класс по имени multicol , то для получения трехколоночной конструкции с разрывом в 1 em и точечными линиями между колонками можно создать следующий стиль: .multicol { column-count: 3; column-gap: 1em; column-rule: 1px dotted black; } Следует напомнить, что Internet Explorer 9 и более ранние версии не разбираются в свойствах задания нескольких колонок. Кроме того, нужно использовать префиксы производителей для Chrome и Safari (-webkit- column-count, -webkit-column-gap и –webkit-column- rule) и для Firefox ( -moz-column-count, -moz-column- gap и -moz-column-rule ). А вот Opera понимает версию этих свойств без префиксов. Существуют и другие свойства для задания нескольких колонок, о которых можно прочитать на официальной странице W3C: www.w3.org/TR/css3-multicol/ . Кроме того, есть простое введение в создание нескольких коло нок по адресу http://dev.opera.com/articles/view/css3- multi-column-layout/ и интерактивное средство для создания и предварительного просмотра нескольких колонок по адресу www.aaronlumsden.com/multicol/ ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Создание столбцов на всю высоту HTML-таблицы не совсем подходят для разметки веб-страницы. Они добавляют много кода, их трудно обновлять, и они не работают так же хорошо в альтернатив- ных браузерах, например тех, что используются в мобильных телефонах. Но, что касается разметок, у таблиц есть один плюс — это возможность создавать столбцы равной высоты. Их применение позволяет добавлять фоновый цвет или графику к отдельному столбцу и делать так, чтобы они заполняли всю высоту страницы. Фоны двух боковых панелей на рис. 13.9, вверху, заполняются на всю высоту экра- на, создавая цельные границы с обеих сторон страницы. Плавающие элементы CSS, с другой стороны, немного недорабатывают в этом отношении. Ячейки таблицы в строке всегда одной и той же высоты, чего не ска- жешь о блоках. Высота плавающего элемента обычно определяется его содержи- мым. Когда содержимого немного, элемент не очень высокий. Поскольку фоновое изображение или фоновый цвет заполняют только плавающий элемент, у вас могут получиться окрашенные столбцы, которые не доходят до основания страницы, как в обведенных овалом областях на рис. 13.9, внизу. ПРИМЕЧАНИЕ Новая гибкая блочная модель решает проблему разной высоты столбцов в строке. К сожалению, поддержка этой модели в браузерах пока что оставляет желать лучшего. Обратите внимание на следующую далее врезку «Информация для опытных пользователей. На подходе более совершен- ные способы разметки».
442 Часть 3. Макет страницы Рис. 13.9. Левая и правая боковые панели (вверху) показывают, как четкие фоновые цвета помогают визуально разделять области страницы. Когда фон боковой панели резко прерывается (внизу), появляется пустое пространство, что выглядит непривлекательно
Глава 13. Разметка страницы на основе плавающих элементов 443 Но, как и у большинства проблем, связанных с CSS, здесь существует несколь- ко обходных путей. Наиболее действенным из них является метод искусственных столбцов, впервые предложенный CSS-гуру Дэном Седерхольмом. Секрет состоит в том, чтобы добавить фоновые изображения к тегу, который включает в себя «при- земистую» боковую панель и другие столбцы на странице. Скажем, в вашем HTML- коде есть два тега
, в которых определяется содержимое для левой боковой панели и главного текста страницы:
Sidebar content here
Main content for page, this column has a lot of text and is much taller than the sidebar.
Тег
боковой панели перемещается к левому краю страницы, и ширина его равна 170 пикселам. Поскольку на боковой панели немного текста, ее содержимое короче, чем основное содержимое. Предположим, что вы задаете этот
-кон- тейнер таким образом:
Sidebar content here
Main content for page, this column has a lot of text and is much taller than the sidebar.
Внешний блок вырастет и станет таким же длинным, как самый высокий эле- мент внутри него, так что, даже если содержимое div -контейнера с классом main очень длинное, охватывающий блок div с классом wrapper будет такой же высоты. В этом все волшебство: создайте стиль для охватывающего тега
с фоновым изображением, ширина которого равна ширине боковой панели, подобрав нуж- ный фоновый цвет. Таким образом, если фоновое изображение повторяется вер- тикально, оно формирует сплошную полосу высотой, равной высоте div -контей- нера (см. рис. 13.9, вверху). .wrapper { background: url (images/col_bg.gif) repeat-y left top; } Браузеры показывают это фоновое изображение прямо под боковой панелью, создавая иллюзию того, что у панели есть фоновый цвет. ПРИМЕЧАНИЕ Вы не ограничены чистыми цветами. Поскольку допускается использовать изображения, можно создать декоративный узор, который будет чередоваться до конца страницы. Применение этого метода для двух столбцов немного сложнее. Нужно добавить два охватывающих блока:
Sidebar content here
Second sidebar
Main content for page, this column has a lot of text and is much taller than the two sidebars.
444 Часть 3. Макет страницы ПРИМЕЧАНИЕ Если «упаковка» и каждый столбец имеют фиксированную ширину, вы можете создать видимость искусственного столбца для левой и правой панели всего с одним изображением и охватывающим блоком. Просто сделайте рисунок таким же широким, как «упаковка», и задайте для левой стороны изображения цвет и ширину левой боковой панели, а для правой стороны — цвет и ширину правой боковой панели. Центральная часть должна соответствовать фоновому цвету центрального столбца. Если первая боковая панель появляется на левой стороне страницы, а вторая боковая панель — на правой стороне, то создаются два стиля. Примените один стиль к первому охватывающему тегу
, чтобы добавить фон к левой боковой панели; другой же стиль примените ко второму охватывающему тегу
, доба- вив фон к правой боковой панели (рис. 13.10, внизу). .wrapper1 { background: url(images/col1_bg.gif) repeat-y left top; } .wrapper2 { background: url(images/col2_bg.gif) repeat-y right top; } Рис. 13.10. Для получения фоновых изображений на всю высоту плавающих столбцов нужно обратиться к некоторым дополнительным тегам
Глава 13. Разметка страницы на основе плавающих элементов 445 При добавлении фонового изображения к правому столбцу убедитесь, что вы размещаете изображение вверху справа во второй «упаковке» так, что оно свобод- но простирается под второй боковой панелью на правой стороне страницы. Основная проблема технологии искусственных столбцов связана с тем, что ее очень трудно заставить работать, когда у всех столбцов ширина задана в процентах. Если ширина боковых панелей задана в процентах от ширины окна браузера, они могут быть уже или шире в зависимости от характеристик монитора посетителя. Технология ис- кусственных столбцов требует помещения графики в элемент, являющийся контей- нером. Эта графика имеет определенную ширину и не будет масштабироваться при изменениях ширины окна браузера, а соответственно, и ширины столбцов. Одним из удачных обходных маневров является использование имеющихся в CSS3 линейных градиентов для добавления градиента к элементу-контейнеру. Градиент становится для столбцов цветом фона внутри элемента-контейнера. Те- перь можно подумать: «Мне, конечно, нравится радуга, но я хочу, чтобы у каждо- го столбца был обычный цвет, а не градиент с цветами, перетекающими от одного к другому». Но можно ведь получить и чистые цвета. Как уже говорилось, линейные градиенты позволяют устанавливать цветовые опорные точки, то есть места, где новый цвет определяется в качестве части гради- ента. Если первая цветовая опорная точка, например, белая и вторая цветовая опор- ная точка белая, градиент будет переходить от белого цвета к белому. То есть цвет не будет изменяться, в результате получится один сплошной цвет. Кроме того, можно установить цветовую опорную точку в том же месте в качестве другой такой точки, позволяющей второму цвету взять начало сразу же после первого без како- го-либо градиентного эффекта. Предположим, что есть конструкция из трех столбцов. Первый столбец имеет ширину 25 %, второй — 50 %, и третий — 25 %. Нужно чтобы у первого столбца фоновым цветом был красный, у второго — белый, а у третьего — синий. Для этого сделайте следующее. 1. Заключите все три столбца в элемент-контейнер:
… сюда помещается содержимое …
… сюда помещается содержимое …
… сюда помещается содержимое …
Контейнер является тем самым элементом, к которому добавляется градиент. Кроме того, если все три столбца внутри контейнера являются плавающими, то для содержания всех этих плавающих элементов нужно будет воспользоваться одним из методов, рассмотренных ранее в разделе «Решение проблем плаваю- щих элементов». 2. Добавьте линейный градиент с цветовыми опорными точками, соответству- ющими ширине столбцов: .wrapper { background-image: linear-gradient(left, red 0%, red 25%, white 25%,
446 Часть 3. Макет страницы white 75%, blue 75%, blue 100%); } Красный цвет займет пространство от 0 (от левого края контейнера) до 25 %. Так как используется один и тот же цвет, градиента не будет. Затем на отметке 25 %, там же, где закончился красный цвет, начинается белый цвет, поэтому градиента опять не будет. Белый цвет займет пространство до 75 % отметки и будет просто сплошным белым цветом. Затем точно там же, где заканчивает- ся белый цвет, начнется синий цвет, который займет пространство до 100 % отметки (до правого края контейнера). То есть получатся три столбца со сплош- ными фоновыми цветами, ширина которых будет изменяться по мере измене- ния ширины окна браузера. Отлично. Разумеется, нужно включить также и версии свойств с префиксами производи- телей. 3. Добавьте версии свойств с префиксами производителей: .wrapper { background-image: -webkit-linear-gradient(left, red 0%, red 25%, white 25%, white 75%, blue 75%, blue 100%); background-image: -moz-linear-gradient(left, red 0%, red 25%, white 25%, white 75%, blue 75%, blue 100%); background-image: -o-linear-gradient(left, red 0%, red 25%, white 25%, white 75%, blue 75%, blue 100%); background-image: linear-gradient(left, red 0%, red 25%, white 25%, white 75%, blue 75%, blue 100%); }
Глава 13. Разметка страницы на основе плавающих элементов 447 Недостаток использования линейного градиента заключается в том, что он ра- ботает только с чистыми цветами (и, разумеется, с градиентами, если вы того по- желаете), поэтому вы не можете применять в качестве фона графику или границы вокруг каждого столбца. Кроме того, Internet Explorer 9 и более ранние версии вообще не понимают, что такое градиенты. ПРИМЕЧАНИЕ Есть еще несколько способов заставить столбцы появляться с одинаковой высотой. Обзор различ- ных технологий можно найти в блоге CSS-эксперта Криса Койера по адресу http://css-tricks.com/ fluid-widthequal-height-columns/. Его рассуждения насчет метода гибких блоков не следует прини- мать во внимание, поскольку статья о них была написана до того, как консорциум W3C выпустил финальную версию синтаксиса flexbox. ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ На подходе более совершенные способы разметки В CSS3 включен ряд многообещающих новых мето дов управления потоком содержимого вебстраницы. В большинстве браузеров (за исключением Internet Explorer 9 и более ранних версий) уже можно исполь зовать модуль многоколоночной разметки, направляя текст по нескольким колонкам, как в газетных и жур нальных полосах (см. предыдущую врезку «Информация для опытных пользователей. Простой способ создания нескольких колонок»). Кроме этого, новый модуль гибких блоков flexible box предлагает способы реализации большинства тех задач, попытка решения которых связывалась с при менением плавающих элементов, например создание смежных столбцов разной ширины. Но flexbox (как часто называют этот модуль) способен на большее, включая управление порядком отображения столб цов независимо от их порядка следования в HTML или изменение их отображения со «слева направо» на «справа налево». Flexbox имеет довольно простой синтаксис, предоставляя множество средств для управления разметкой. Этот модуль даже поддержи вается большинством браузеров. К сожалению, рабочая группа CSS внесла в синтаксис flexbox существенные изменения. Были изменены на звания свойств и добавлены новые свойства, поэтому реализация модуля в браузерах на момент написания данной книги полностью устарела и использование ста рого синтаксиса не рекомендуется. Предсказывалось, что даже Internet Explorer 10, который при написании этих строк еще не был выпущен, поддерживает старый, вышедший из употребления синтаксис flexbox. То есть для надежного применения flexbox на вебсайтах должно пройти какоето время. Для получения до полнительной информации о модуле flexbox нужно обратиться к источнику по адресу http://www.w3.org/ TR/css3-flexbox/. Следует также избегать любых руко водств по flexbox, написанных до 2012 года, поскольку во всех них используется старый синтаксис. Чтобы на учиться определять разницу между старым и новым flexbox, прочитайте статью по адресу http://css-tricks. com/old-flexbox-and-new-flexbox/ Кроме того, на горизонте уже появился довольно сложный модуль разметки grid (www.w3.org/TR/ css3-grid-layout/) . Он призван упростить процесс определения исходной структуры строк и столбцов, по которой можно выравнивать элементы страницы. Хотя на создание этого модуля был затрачен большой объем работы, на конец 2012 года модуль еще не был готов и браузеры его не поддерживают. И наконец, некоторые улучшения текстовой размет ки были предложены компанией Adobe (http://html. adobe.com/webstandards/). Предотвращение выпадений плавающих элементов Может случиться так, что внезапно один из столбцов просто опустится под други- ми (рис. 13.11, вверху). Видно, что есть много места для всех столбцов, чтобы они
448 Часть 3. Макет страницы отлично сосуществовали бок о бок, но этого не получается. Можно сказать, что произошло выпадение плавающего элемента. Рис. 13.11. Когда ширина плавающих элементов хоть на волосок шире содержащего их блока, последний элемент опускается ниже других (вверху). Отрегулировав все элементы путем удаления небольших значений ширины, отступов или полей, вы можете решить проблему (внизу) Плавающий столбец опускается вниз, потому что недостаточно места, которое бы ему соответствовало. Будьте осторожны, если вы устанавливаете ширину для каждого столбца. Если ширина доступного места в окне браузера (или содержаще- го блока в дизайне с фиксированной шириной) меньше общей ширины столбцов, то плавающий элемент может опуститься вниз. Кроме того, не забывайте о блочной модели в CSS: как обсуждалось в подразделе «Вычисление фактических размеров блочных элементов» раздела «Определение параметров высоты и ширины» гл. 7, ширина элемента, отображаемого в окне браузера, не определяется лишь значени- ем его свойства width . Отображаемая ширина любого элемента — это комбинация его ширины, размеров левой и правой границ, левого и правого отступов, а также левого и правого полей. Для соответствия столбцам окно браузера (или содержа- щего блока) должно подстроиться под общую ширину. Возьмем, например, простую разметку с тремя столбцами, представленную на рис. 13.11. Как вы можете видеть на верхнем изображении, эти три столбца не со- гласуются. Рассмотрим, из чего состоят элементы приведенной страницы.
Глава 13. Разметка страницы на основе плавающих элементов 449 Охватывающий блок. Охватывающий тег
с фиксированной шириной за- ключает в себе весь дизайн. Его ширина равна 760 пикселам, таким образом, все три столбца не могут быть в сумме шире, чем это значение. Первая боковая панель (с левой стороны). Ее ширина — 150 пикселов, но у нее также есть отступы по 10 пикселов, что делает общую ширину панели равной 170 пикселам (150 пикселов ширины панели + 10 пикселов левого от- ступа + 10 пикселов правого отступа). Главное содержимое. Имеет ширину 390 пикселов, а также включает по 1 пик- селу обеих границ и по 15 пикселов левого и правого полей, что делает полную ширину равной 422 пикселам (390 пикселов ширины содержимого + 1 пиксел левой границы + 1 пиксел правой границы + 15 пикселов левого поля + 15 пик- селов правого поля). Вторая боковая панель (с правой стороны). Ширина этого элемента равна 150 пикселам. Он также включает в себя по 10 пикселов левого и правого от- ступов; в результате получается 170 пикселов, как и для первой боковой па- нели. Фактическая ширина всех добавленных элементов составляет 762 пиксела. Это на 2 пиксела больше, чем ширина охватывающего тега
. На рис. 13.11, посередине, показана рамка вокруг тега
для главного содержимого, которая обозначает его полную ширину вместе с полями. Всего двух лишних пикселов ширины (обведены кружком) достаточно для того, чтобы заставить столбец опуститься вниз. Решение заключается в удалении области размером 2 пиксела из любого элемен- та. Для этого измените левое и правое поля главного содержимого с 15 до 14 пиксе- лов, что даст вам дополнительное место, необходимое для размещения всех трех столбцов, которые теперь будут находиться рядом. Подведем итог: выпадение плавающих элементов вызывается недостатком ме- ста для содержания всех столбцов. Другой способ облегчения данных математических вычислений заключается в от- казе от установки границ или отступов для div -контейнеров или элементов, содержа- щих столбцы. Тогда при установке трех столбцов на 20, 60 и 20 % ширины соответс- твенно вы будете знать, что они поместятся рядом друг с другом, поскольку вместе они составляют 100 % и нарушающие это положение отступы или границы отсутс- твуют. Если нужно применить отступы, их можно просто добавить к элементам, на- ходящимся внутри столбцов: например, дать одинаковые левые и правые отступы заголовкам, абзацам и другим элементам внутри div -контейнера. Это потребует до- полнительной работы, но предотвратит потенциальное выпадение плавающих эле- ментов, вызванное превышением суммарной ширины столб цов значения 100 % . Если нужны еще и границы, можно применить другую технологию вложенных div -контейнеров:
… сюда помещается содержимое…
Затем задается ширина внешнего div -контейнера, в данном случае с классом column1 , и добавляются отступы и границы к внутреннему div -контейнеру, который
450 Часть 3. Макет страницы в показанном выше коде имеет класс innerColumn . Устанавливать ширину внутрен- него div -контейнера не нужно, он заполнит всю ширину внешнего столбца автома- тически. Предотвращение выпадения плавающего элемента с помощью свойства box-sizing Основной причиной выпадения плавающих элементов является странный способ, который используется браузерами для вычисления фактической экранной ширины элемента. Например, вы устанавливаете ширину 100 пикселов, но браузер рисует элемент, занимая ширину 122 пиксела, потому что вы добавили также 10 пикселов на левый и правый отступы и однопиксельную границу вокруг всего элемента. К сча- стью, есть CSS-свойство, которое позволяет избавиться от столь неприятного спо- соба расчета. CSS-свойство box-sizing позволяет заставить браузер применить другую модель расчета фактической экранной ширины элемента. Этому свойству можно задать одно из трех значений. content-box — приводит к обычной работе браузера: ширина элемента склады- вается из толщины левой и правой границ, левого и правого отступов и значе- ния CSS-свойства width box-sizing: content-box; padding-box — заставляет браузер включать левый и правый отступ в общий рас- чет ширины элемента. То есть экранная ширина элемента складывается из зна- чения CSS-свойства width , а также из левого и правого отступов. Любые грани- цы вокруг элемента в нее не включаются. box-sizing: padding-box; border-box — включает отступы, границы и значение CSS-свойства width . В об- щем, это то, что вам нужно. При задании этого значения расчеты упрощаются, что помогает избежать выпадения плавающих элементов, особенно при исполь- зовании ширины, заданной в процентном отношении в сочетании с пиксельны- ми единицами измерения толщины границ и отступов: box-sizing: border-box; Приятно также, что такую схему поддерживает большинство браузеров, включая Internet Explorer 8. Для Firefox понадобится префикс производителя — -moz-box- sizing , — но все остальные браузеры способны принимать обычную версию без пре- фикса. Это свойство можно смело применять для подавляющего большинства интер- нет-пользователей. Этим инструкциям не будут следовать только Internet Explorer 7 и более ранние версии. Они прибегают к определению визуальной ширины так, как это делается в браузерах в обычных условиях, поэтому в Internet Explorer 7 будут получаться более широкие элементы, что, возможно, при использовании плавающей разметки приведет к выпадению плавающих элементов. Чтобы понять, нужно ли вам беспокоиться о поддержке Internet Explorer 7, прочитайте врезку «Часто задаваемые вопросы. Стоит ли волноваться насчет Internet Explorer 6, 7 или 8?» в разделе «Важ- ность doctype» гл. 1.
Глава 13. Разметка страницы на основе плавающих элементов 451 Некоторые веб-разработчики предлагают устанавливать для всех элементов значение border-box , чтобы все теги измерялись одинаково. Для этого использует- ся селектор * , выбирающий каждый элемент на странице, который нужно поме- стить в верхней части таблицы стилей вместе с перезапуском CSS: * { -moz-box-sizing: border-box; box-sizing: border-box; } ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Получили разметку? Как вы уже, вероятно, поняли, в Internet Explorer 6 и 7 про является много ошибок при отображении страниц, создан ных с помощью CSS. Некий базовый CSSстиль, который прекрасно выглядит в Internet Explorer 8, Firefox или Safari, разрушается в Internet Explorer версий 6 и ниже. К счастью, популярность Internet Explorer 6 и 7 уменьшается и они быстро предаются забвению. Но если их все же нужно под держивать, пригодится следующая уловка. Оказывается, от многих недостатков браузеров Internet Explorer можно избавиться путем включения специального, присущего только Internet Explorer свойства, известного как layout (разметка). Оно не относится непосредственно к CSS и при этом ничего не делает с правилами HTML. Это просто кон цепция, встроенная проектировщиками в Internet Explorer (версии 7 и более ранних). При необходимости браузер определяет, нужна элементу страницы разметка или нет. В Internet Explorer перемещаемые элементы, пункты списка и абсолютно позиционированные элементы отображаются поразному в зависимости от того, есть ли у них разметка. Например, чтобы гарантировать, что внутри элемента находятся только плавающие элементы, к CSS можно добавить следующий стиль: .clear { zoom: 1; } Затем добавьте этот класс к любому элементу, содержа щему плавающие элементы. Суть в том, что этот стиль не приводит к реальному масштабированию тех эле ментов, на которые он ссылается. Хотя присущее толь ко Internet Explorer свойство zoom позволяет изменять масштаб элемента страницы (используя JavaScript), оно также включает разметку в Internet Explorer 6 и 7. По причинам, известным только Microsoft, включение разметки заставляет Internet Explorer 6 и 7 содержать внутри тегаконтейнера любые плавающие элементы. Помимо zoom , есть несколько других CSSсвойств, так же включающих разметку в Internet Explorer: position: absolute;, float: left;, float: right;, display: inline-table;, любое значение width и height. Свойство zoom хорошо тем, что не влияет на то, как элемент выглядит в любом другом браузере, в отличие от реальных свойств CSS, таких как width и height , поэтому Safari, Firefox и другие браузе ры благополучно не замечают его. Это значит, что вы можете использовать свойство zoom везде, где нужно устранить ошибку Internet Explorer, «добавляя разметку» к элементу и при этом не опасаясь за пор чу страницы в других браузерах. Обратная сторона применения этого свойства состоит в том, что для CSS оно некорректно и не будет признано правиль ным W3C (см. врезку «Информация для новичков. Проверяйте правильность кода вебстраниц» в раз деле «Важность doctype» гл. 1). Обучающий урок. Многоколоночная разметка В этом обучающем уроке мы рассмотрим, как создавать разметку на несколько столбцов, основанную на плавающих элементах. Кроме того, вы научитесь созда- вать свободный дизайн на три столбца, дизайн с фиксированной шириной, а также применять некоторые другие методы достижения аналогичного результата.
452 Часть 3. Макет страницы Чтобы приступить, загрузите файлы с сайта www.sawmac.com/css3/ . Как это сде- лать, описано в конце гл. 2. Файлы для этого урока находятся в папке 13 Структурирование HTML Первый шаг в создании разметки, основанной на CSS, — идентификация различ- ных элементов на странице. Вы делаете это, «упаковывая» части HTML-кода в теги
, каждый из которых представляет отдельный элемент страницы. 1. Откройте файл start.html в текстовом редакторе и установите курсор на пустой строке после HTML-комментария: Как вы можете видеть, часть работы в HTML уже сделана: на данный момент описаны баннер и нижний колонтитул. Перед тем как создавать какие-нибудь стили, вы должны добавить структуру и содержимое для страницы. Затем вы добавите тег
для левой боковой панели. 2. Добавьте открывающий тег
Скачать 20.28 Mb.