Колонки одинаковой высоты через CSS3 - «CSS3» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
29-03-2016, 12:05
Колонки одинаковой высоты через CSS3 - «CSS3»
Рейтинг:
Категория: Самоучитель CSS / CSS3

Существует несколько методов создания колонок равной высоты. Один из самых популярных и простых заключается в имитации колонок с помощью фонового рисунка. Код HTML при этом остаётся исходным, а в стилях добавляется только свойство background. Естественно, колонки будут иметь разную высоту, которая зависит от их содержимого, но за счёт одного фона создаётся иллюзия одинаковых по высоте колонок.

Легче всего работать с фиксированным макетом, когда заранее известна ширина всех колонок. Например, для макета шириной 900 пикселов готовим картинку размером 900х50 пикселов. Высота рисунка особой роли не играет и начинается от 20-30 пикселов, меньше делать нет смысла, иначе браузеру предстоит дополнительная работа, которая может быть визуально заметна. Пример подобной картинки продемонстрирован на рис. 1. Правая часть показана не полностью, её ширина равна ширине колонки.

Рис. 1. Фоновая картинка для создания колонок

Картинка добавляется к контейнеру, внутри которого располагаются колонки и повторяется по вертикали (пример 1).

Пример 1. Использование картинки

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Колонки</title>
  <style>
   .layer {
    background: url(images/faux-cols.png) repeat-y;  /* Параметры фона */
    width: 600px; /* Ширина макета */
    margin: auto; /* Выравниваем по центру */
    min-height: 200px; /* Минимальная высота */
    color: #fff; /* Цвет текста */
   }
   .left_col {
    width: 160px; /* Ширина левой колонки */
    float: left; 
   }
   .right_col {
    margin-left: 160px;  /* Отступ на ширину колонки */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   <div class="left_col">Левая колонка</div>
   <div class="right_col">Правая колонка</div>
  </div>
 </body>
</html>

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

Теперь, когда стали понятны теоретические основы данного метода имитации колонок, перечислю его недостатки.

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

В целом, минусы не очень существенны и многие разработчики готовы с ними мириться. Но есть решение изящнее — использовать CSS3, в частности, градиенты. Хотя никаких градиентов в нашем примере не видно, они подходят как нельзя лучше из-за того, что позволяют делать не только плавные, но и резкие переходы цветов.

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

Пример 2. Градиенты

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Колонки</title>
  <style>
   .layer {
    background: url(images/faux-cols.png) repeat-y; /* Для старых браузеров */
    background: -moz-linear-gradient(left, #ffc836, #ffc836 160px, #a1429d 160px, #a1429d);
    background: -webkit-linear-gradient(left, #ffc836, #ffc836 160px, #a1429d 160px, #a1429d);
    background: -o-linear-gradient(left, #ffc836, #ffc836 160px, #a1429d 160px, #a1429d);
    background: linear-gradient(to right, #ffc836, #ffc836 160px, #a1429d 160px, #a1429d);
    width: 600px; margin: auto;
    min-height: 200px; color: #fff;
   }
   .left_col { width: 160px; float: left; }
   .right_col { margin-left: 160px;}
  </style>
 </head>
 <body>
  <div class="layer">
   <div class="left_col">Левая колонка</div>
   <div class="right_col">Правая колонка</div>
  </div>
 </body>
</html>

Строку с картинкой я оставил для корректного отображения макета в старых браузерах. Современные браузеры её проигнорируют и не будут загружать изображение.

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

red 0, red 200px, green 200px, green 400px, blue 400px, blue 100%

Или в сокращённом виде.

red 200px, green 200px, green 400px, blue 400px, blue

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

red 0, red 200px, green 200px, green 75%, blue 75%, blue 100%

Небольшие недостатки у метода с градиентами тоже имеются — это избыточный код для поддержания разных версий браузеров. И всё же на сегодняшний день это один из самых современных и удобных способов создания фиктивных колонок одинаковой высоты.


Существует несколько методов создания колонок равной высоты. Один из самых популярных и простых заключается в имитации колонок с помощью фонового рисунка. Код HTML при этом остаётся исходным, а в стилях добавляется только свойство background. Естественно, колонки будут иметь разную высоту, которая зависит от их содержимого, но за счёт одного фона создаётся иллюзия одинаковых по высоте колонок. Легче всего работать с фиксированным макетом, когда заранее известна ширина всех колонок. Например, для макета шириной 900 пикселов готовим картинку размером 900х50 пикселов. Высота рисунка особой роли не играет и начинается от 20-30 пикселов, меньше делать нет смысла, иначе браузеру предстоит дополнительная работа, которая может быть визуально заметна. Пример подобной картинки продемонстрирован на рис.
Просмотров: 2 845
Комментариев: 0:   29-03-2016, 12:05
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle