В html колонки: Разбивать в HTML длинный список на колонки, в зависимости от ширины страницы? – Колонки таблицы | htmlbook.ru — Вебджем.рф

Содержание

Колонки таблицы | htmlbook.ru

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

Поскольку формирование таблицы происходит по строкам, а не по колонкам, то для изменения вида колонок приходится задавать стиль практически для каждой ячейки. В этом случае удобно использовать разные классы — один для ячеек четных колонок, а второй — для нечетных. На рис. 1 показана таблица, которая формируется именно таким способом.

Рис. 1. Таблица с выделенными колонками

Цвет нечетных колонок можно задать путем добавления стилевых свойств к селектору TABLE, а для четных колонок введем новый класс, назовем его even. Первая колонка обычно используется для заголовков строк, поэтому для нее имеет смысл задать стиль, отличный от стиля остальных ячеек. В данном случае вводим еще один класс, назовем его lc и для него определим выравнивание по левому краю и цвет текста (пример 1). Остается для ячеек первой колонки добавить к тегу <td> атрибут, а для ячеек четных колонок .

Пример 1. Колонки разного цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border: 2px solid black; /* Рамка вокруг таблицы */
    background: #778899; /* Цвет фона */
    color: white; /* Цвет текста */
   }
   TD, TH {
    text-align: center; /* Выравнивание по центру */
    padding: 3px; /* Поля вокруг текста */
   }
   TH {
    color: white; /* Цвет текста */
    border-bottom: 4px double black; /* Двойная линия снизу */
   }
   .even { /* Стиль для четных колонок */
    background: #ffe4b5; /* Цвет фона */
    color: black; /* Цвет текста */
   }
   .lc { /* Стиль для первой колонки */
    text-align: left; /* Выравнивание по левому краю */
    color: #fffacd; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Чтобы отделить первую строку с заголовком от данных таблицы в примере используется двойная линия. Она получается за счет добавления свойства border-bottom к селектору TH.

Рассмотрим еще один способ формирования вида колонок — не только за счет разного цвета фона, но и применением линий между колонками (рис. 2).

Рис. 2. Выделение колонок с помощью линий и цвета

Структура кода останется практически той же, что была показана в примере 1. А именно, для ячеек четных колонок используем класс even, а для первой колонки — класс lc. Чтобы установить линию между колонками, к селектору TD добавляем свойство border-left, оно создает линию слева от ячейки. Однако при этом возникнет ненужная линия слева в первой колонке, поэтому для класса lc используем border: none, это свойство уберет лишние границы (пример 2).

Пример 2. Линии между колонками

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border: 1px solid black; /* Рамка вокруг таблицы */
   }
   TD, TH {
    text-align: center; /* Выравнивание по центру */
    padding: 3px; /* Поля вокруг текста */
   }
   TH {
    color: white; /* Цвет текста */
    background: #daa520;  /* Цвет фона */
   }
   TD {
    border-left: 1px dashed black; /* Линия слева от ячейки */
   }
   .even { /* Стиль для четных колонок */
    background: #dcdcdc;  /* Цвет фона */
   } 
   .lc { /* Стиль для первой колонки */
    text-align: left; /* Выравнивание по левому краю */
    border: none; /* Нет лишних линий */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
  </body>
</html>

К сожалению, работа с колонками таблицы не так удобна, как хотелось бы. Если применять стили, то фактически все ячейки таблицы пестрят указаниями на определенный стилевой класс. За счет этого снижается удобство по расширению табличных данных и повышается объем кода. Существуют специальные теги <col> и <colgroup> призванные облегчить работу с колонками таблицы. Но их возможности ограничены, да и нужный результат будет отображаться не во всех браузерах. Так что на данном этапе для создания таблиц желаемого вида приходится обращаться к стилям.

Макет из трех колонок | htmlbook.ru

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

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

Ширина колонок в пикселах

Ширина разных колонок зависит от используемого макета — фиксированного или «резинового». При макете фиксированной ширины общая ширина таблицы задается в пикселах и остается постоянной независимо от разрешения монитора и размера окна браузера. При этом ширину отдельных колонок также имеет смысл установить в пикселах. В примере 1 ширина макета задана как 750 пикселов, а колонки соответственно 150, 400 и 200 пикселов.

Пример 1. Фиксированная ширина колонок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
  </style>
 </head>
 <body>
  <table cellpadding="5" cellspacing="0">
   <tr>
    <td>Колонка 1</td>
    <td>Колонка 2</td>
    <td>Колонка 3</td>
   </tr>
  </table>
 </body>
</html>

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

Ширину всех ячеек в подобном случае задавать не обязательно. Так, если не указать ширину одной ячейки, то она будет вычислена автоматически исходя из общей ширины таблицы и ширины остальных ячеек. В других случаях, например, когда не установлена ширина двух ячеек, их размер определяется по содержимому. Поскольку содержимое ячеек варьируется от страницы к странице, то ширина также будет «плавать». Это, по-английски говоря, not good (для тех, кто не понял, нехорошо), поскольку вид документов должен оставаться единым. Так что ширину колонок лучше все-таки задавать.

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

При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта:

ширина всех ячеек задана в процентах;
сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других — в пикселах.

В первом случае вначале устанавливается ширина всей таблицы в процентах, а затем ширина отдельных ячеек (пример 2). Причем в сумме ширина ячеек должна получиться 100%, несмотря на то, что размер таблицы может быть иным. Дело в том, что ширина таблицы вычисляется относительно доступного пространства веб-страницы, а размер ячеек устанавливается относительно всей таблицы в целом.

Пример 2. Ширина колонок в процентах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
   #col1 {
    width: 20%; /* Ширина первой колонки */
    background: #fc0; /* Цвет фона первой колонки */
   }
   #col2 {
    width: 40%; /* Ширина второй колонки */
    background: #f0f0f0; /* Цвет фона второй колонки */
   }
   #col3 {
    width: 40%; /* Ширина третьей колонки */
    background: #fc0; /* Цвет фона третьей колонки */
   }
  </style>
 </head>
 <body>
  <table cellpadding="5" cellspacing="0">
   <tr>
    <td>Колонка 1</td>
    <td>Колонка 2</td>
    <td>Колонка 3</td>
   </tr>
  </table>
 </body>
</html>

Для удобства изменения вида колонок параметры в данном примере перенесены в стили.

Процентная запись для таблиц имеет ряд преимуществ — используется все свободное пространство веб-страницы, а сам макет подстраивается под ширину окна браузера. Вместе с тем каждая таблица имеет некоторый минимальный размер, при достижении которого таблица уже не уменьшается и начинает отображаться горизонтальная полоса прокрутки. Такой минимальный размер зависит от содержимого таблицы. Если, например, в каждую из трех ячеек поместить по рисунку шириной 200 пикселов, то общая ширина таблицы не может быть меньше 600 пикселов плюс значения полей вокруг изображений.

Сочетание процентов и пикселов

Рассмотрим два основных варианта, когда для задания ширины колонок одновременно применяются проценты и пикселы. Первый вариант состоит в том, что размер крайних колонок устанавливается в пикселах, а ширина средней колонки вычисляется автоматически, исходя из заданной ширины таблицы (рис. 1).

Рис. 1. Ширина средней колонки определяется браузером

Для создания подобного макета понадобится таблица с тремя ячейками. Ширину первой и третьей ячейки устанавливаем в пикселах, а ширину средней ячейки намеренно не задаем (пример 3). При этом обязательно следует определить общую ширину всей таблицы.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
   }
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
   #col1 {
    width: 150px; /* Ширина первой колонки */
    background: #fc0; /* Цвет фона первой колонки */
   }
   #col2 {
    background: #afccdb; /* Цвет фона второй колонки */
   }
   #col3 {
    width: 200px; /* Ширина третьей колонки */
    background: #fc0; /* Цвет фона третьей колонки */
   }
  </style>
 </head>
 <body>
  <table cellpadding="5" cellspacing="0">
  <tr>
   <td>Колонка 1</td>
   <td>Колонка 2</td>
   <td>Колонка 3</td>
  </tr>
  </table>
 </body>
</html>

Во втором варианте ширина двух колонок устанавливается в процентах, а третьей — в пикселах. В подобном случае обойтись одной таблицей не удастся. Сами посудите, если ширина всей таблицы равна 100%, первой колонки — 200 пикселов, а оставшихся колонок по 20%, то простое вычисление показывает, что размер первой колонки получается равным 60%. Поэтому заданное значение в пикселах браузером будет проигнорировано, а размер установлен в процентах.

На рис. 2 показана схема расположения вложенных таблиц относительно друг друга.

Рис. 2. Применение вложенных таблиц

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

Пример 4. Вложенные таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблиц */
   }
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
   #col1 {
    width: 150px; /* Ширина первой колонки */
    background: #fc0; /* Цвет фона первой колонки */
   }
   #col2 {
    width: 60%;
    background: #afccdb; /* Цвет фона второй колонки */
   }
   #col3 {
    width: 40%; /* Ширина третьей колонки */
    background: #fc0; /* Цвет фона третьей колонки */
   }
   #col1, #col2, #col3 {
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <table cellpadding="0" cellspacing="0">
   <tr>
    <td>Колонка 1</td>
    <td>
     <table cellpadding="0" cellspacing="0">
      <tr>
       <td>Колонка 2</td>
       <td>Колонка 3</td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
 </body>
</html>

При создании подобного макета следует принимать во внимание следующие моменты.

Ширина внутренней таблицы должна быть задана как 100%, чтобы эта таблица занимала все свободное пространство.
Для того чтобы ячейки плотно прилегали друг к другу, для внешней таблицы необходимо обнулить значение атрибутов cellpadding и cellspacing. Поля можно устанавливать через свойство padding, как показано в данном примере.
Ширина второй и третьей колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом. Поэтому значение 60% в примере следует расценивать не как ширину колонки относительно всего макета, а лишь как ширину относительно внутренней таблицы.

4 метода создания колонок одинаковой высоты

Оригинал: http://www.vanseodesign.com/css/equal-height-columns/

Перевод: Влад Мержевич

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

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

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

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

Фиктивные колонки

Фиктивные колонки существуют уже долгое время. С 2004 года, если быть точным. За это время они были и, возможно, всё ещё остаются методом де-факто для создания колонок одинаковой высоты.

Этот простой трюк использует фоновое изображение которое повторяется по вертикали. Пример такого изображения показан ниже. Я увеличил высоту для наглядности.

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

HTML

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

<div>
  <div>
   <p>Боковая панель</p>
  </div>
  <div>
   <p>Основной контент</p>
  </div> 
</div>

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

CSS

#container {
  width:960px;
  margin:0 auto;
  background: url("faux-columns.png") repeat-y;
  overflow: hidden;
}
#sidebar {
  float:left;
  width:340px;
}
#content {
  float:left;
  width:620px;
}

CSS довольно прост. Настройка width и float для #sidebar и #content уже должны быть вам знакомы, также как настройка width и margin для #container. Новым здесь является добавление фонового изображения и применение overflow: hidden для контейнера. Нам нужно установить свойство overflow, чтобы контейнер div не схлопнулся и раскрыть обратно всё внутри плавающих элементов.

Контейнер будет той же высоты, что и самая высокая из колонок, а фоновое изображение создаёт эффект, словно короткая колонка имеет аналогичную высоту.

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

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

Плюсы

Легко настраивать.
Работает независимо от того, какой столбец выше или ниже.

Минусы

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

Псевдоколонки

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

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

HTML

Мы используем тот же HTML, что и в методе фиктивных колонок выше.

<div>
  <div>
   <p>Боковая панель</p>
  </div>
  <div>
   <p>Основной контент</p>
  </div> 
</div>

CSS

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

#container {
  background: #555;
  overflow: hidden
}
#content {
  float:left;
  width:75%;
  background:#eee;
}
#sidebar {
  float:left;
  width:25%;
  background:#555;
}

Кроме использования % вместо px заметьте, что я задал цвет фона для #content и #sidebar. Вам остается только установить его для любой колонки, которая будет выше, но здесь я специально задал цвет для двух колонок.

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

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

Плюсы

Просто настроить.
Легко обслуживать.

Минусы

Сложнее реализовать для трёх и более колонок.
Требуется заранее знать высоту колонок.
Не работает, когда колонки выше или короче на разных страницах.

Этот метод далёк от совершенства, но вы удивитесь, насколько часто он может применяться на практике.

Границы и отрицательные отступы

На этот метод я наткнулся не так давно на Smashing Magazine в статье Тьерри Кобленца, хотя позже нашёл статью Алана Пирса на A List Apart, написанную несколько лет назад об этом же методе. Используются границы и отрицательные отступы, чтобы создать видимость колонок равной высоты.

HTML

Ничего нового в HTML нет по сравнению с тем, что мы видели выше. В своей статье Тьерри применяет в качестве контейнера body, но я буду придерживаться использования контейнера div как делаю это обычно.

<div>
  <div>
   <p>Боковая панель</p>
  </div>
  <div>
   <p>Основной контент</p>
  </div> 
</div>

CSS

В CSS начинается самое интересное. Контейнер просто используется для фиксации ширины и выравнивания макета по центру. Интересное происходит с #content и #sidebar.

#container {
  width:960px;
  margin: 0 auto;
}
#content {
  float:left;
  width:700px;
  border-left: 260px solid #555;
}
#sidebar {
  float: left;
  width:260px;
  margin-right: -260px;
  position: relative;
}

Все фоновые цвета в этом методе устанавливаются для колонки #content. Мы задаём фон как обычно, а затем добавляем левую границу равную ширине боковой панели. Цвет границы совпадает с фоном боковой панели.

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

Вначале дадим боковой панели отрицательный правый margin равный её ширине (или ширине левой границы контента, они одинаковы). Это вернёт боковую панель туда, куда мы и хотим, но она по-прежнему не видна. Проблема в порядке наложения двух дивов. #content располагается поверх #sidebar, так что мы должны переместить #sidebar на передний план. Сделаем это путём добавления position: relative для боковой панели и теперь его содержание становится видно.

Плюсы

Работает независимо от того, какая колонка выше или короче.
Простая настройка, после того как вы понимаете, как это работает.
Легко обслуживать.

Минусы

Ширина боковой панели должна быть фиксирована, поскольку border-width понимает только абсолютные значения.
Отрицательные margin потенциально могут привести к ошибке в некоторых старых версиях IE.

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

Смещение колонок и контейнера

Последний метод создал Мэтью Джеймс Тейлор. Из всех методов представленных здесь, на этот раз он будет работать в самых разных случаях использования.

Я оставил его на конец, так как метод немного сложный и вам, возможно, придётся прочитать несколько раз для понимания как он работает.

HTML

HTML похож на то, что мы видели выше, хотя вы заметите дополнительный контейнер div.

<div>
  <div>
    <div>
     <p>Боковая панель</p>
    </div>
    <div>
     <p>Основной контент</p>
    </div>
  </div>
</div>

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

CSS

В CSS происходит несколько больше, чем мы видели до этого момента. Для #sidebar и #content задаётся float со значением left и устанавливается ширина, всё остальное помимо этого является новым.

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

#container-outer {
  float:left;
  overflow: hidden;
  background: #eee;
}
#container-inner {
  float:left;
  background: #555;
  position: relative;
  right:75%;
}
#sidebar {
  float: left;
  width: 25%;
  position: relative;
  left: 75%;
}
#content {
  float: left;
  width: 75%;
  position: relative;
  left: 75%;
}

Первый шаг — добавить float к колонкам и контейнерам. Я применяю значение left, но направление в данном случае не важно. Используйте направление необходимое для вашего макета. Следующим шагом является установка фонов для двух контейнеров div. Я ставлю фон для #container-inner чтобы получить желаемое для боковой панели и фон для #container-outer чтобы получить желаемое для основного контента.

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

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

#container-inner {
  position: relative;
  right: 75%;
}

Позиционируем внутреннюю колонку и устанавливаем значение right на 75%, оно такое же, как ширина колонки с контентом.

Фоны на месте, но содержимое обоих колонок также сдвигается на 75% влево. Нам нужно сдвинуть их на место.

#sidebar {
  position: relative;
  left:75%;
}
#content {
  position: relative;
  left:75%;
}

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

Плюсы

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

Минусы

Немного сложно для первого понимания.
Требуются дополнительные несемантичные дивы.

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

В статье Мэтью идёт макет из трёх колонок и у него также есть демонстрация для четырёх и пяти колонок. Я решил показать макет из двух колонок в надежде что это сделает идею проще для понимания.

Дополнительные ресурсы

Это ни в коем случае не единственные методы создания колонок одинаковой высоты. Крис Койер некоторое время назад поделился несколькими другими методами на CSS Tricks, которые вы можете предпочесть представленным здесь.

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

Резюме

Колонки одинаковой высоты являются желательной чертой дизайна, но их не всегда легко сделать с помощью CSS-макетов. В идеале мы должны были бы использовать что-то вроде height: 100% и на этом всё, но сейчас мы можем применять любой из методов, упомянутых выше.

Фиктивные колонки просты в настройке, но нужен дополнительный HTTP-запрос для изображения, а любое изменение макета требует новой картинки.

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

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

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

Со временем я ожидаю более простого стандартного решения, но пока этих четырёх методов должно быть достаточно для вашего проекта.

Насколько часто вы делаете дизайн макета с колонками одинаковой высоты? Какой метод создания колонок вы при этом используете?

Фиксированная ширина, три колонки | htmlbook.ru

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

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

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

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

<div>
 <div>Левая колонка</div>
 <div>Правая колонка</div>
 <div>Центральная колонка</div>
</div>

Положение слоев формируется через стили: для левой колонки устанавливается ширина (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. Трехколоночный макет

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Трехколоночный макет</title>
  <style type="text/css">
   body {
    font: 0.8em Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
    background: #D7E1F2; /* Цвет фона */
    color: #ffe; /* Цвет текста */
   }
   a { color: #008BCE; /* Цвет ссылок */ }
   #container {
    width: 500px; /* Ширина макета */
    margin: 0 auto; /* Выравниваем по центру */
    background: #FCE600; /* Цвет колонок */
   }
   #header { 
    font-size: 2.2em; /* Размер текста */
    text-align: center; /* Выравнивание по центру */
    padding: 5px; /* Отступы вокруг текста */
    background: #D71920; /* Цвет фона шапки */
   }
   #nav, #aside {
    float: left; width: 110px; padding: 5px;
   }
   #content {
    background: #54B948;
    margin: 0 120px; /* Ширина колонок */
    padding: 10px;
   }
   #aside {
    float: right; color: #000;
   }
   h3 { margin: 0 0 1em; }
   #footer { 
    clear: both; /* Отменяем действие float */
    padding: 5px; /* Отступы вокруг текста */
    background: #D71920; /* Цвет фона подвала */
   }
  </style>
 </head>
 <body>
  <div>
   <div>Исторический турнир</div>
   <div>
    <p><a href="stat.html">Статистика турнира</a></p>
    <p><a href="interview.html">Интервью с главным судьей</a></p>
    <p><a href="ask.html">Конкурсные вопросы</a></p>
   </div>
   <div>
    <h4>Статистика</h4>
    <p>одиннадцать человек дошли до финала;</p>
    <p>один человек правильно указал в каком стиле писал Диего Веласкес;</p>
    <p>только один человек знал, кто изобрел пароход;</p>
   </div> 
   <div> 
   <h3>Опрос общественного мнения показал</h3>
    <ul>
     <li>что пароход изобретен: Петром I, А. Эйнштейном и А. Поповым;</li>
     <li>Диего Веласкес писал свои полотна в стиле: империализма, кубизма 
     и империосионизма;</li>
     <li>Фаросский маяк находится в Фаросе;</li>
     <li>конфуцианство возникло в: Италии, Корее и Франции;</li>
     <li>богами торговли и воровства в Древней Греции были: Марс, Меркурий 
     и Дионис;</li>
     <li>Франция – это город;</li>
     <li>богами загробного мира в Египте были: Аид, Анубис и Ассирис;</li>
     <li>столица Золотой Орды — Монголия;</li>
     <li>главные противники Александра Македонского: татаро-монголы, Дедал 
     и Цезарь;</li>
    </ul>
   </div>
   <div>&copy; Влад Мержевич</div>
  </div>
 </body>
</html>

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

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

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

Две колонки, навигация слева | htmlbook.ru

Одним из наиболее популярных вариантов верстки веб-страниц выступает двухколонный макет, где в левой колонке располагаются ссылки, а в правой колонке — основной контент. Такая схема достаточно традиционна и привычна для пользователей, поэтому также пользуется признанием среди разработчиков (рис. 1).

Рис. 1. Двухколонный макет с навигацией слева

Создание двух колонок происходит с помощью стилевого свойства float со значением left, которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).

Пример 1. Создание двух колонок

#leftcol { /* Левая колонка */
  float: left; /* Обтекание справа */
  width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
  margin-left: 225px; /* Отступ слева */
}

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

Пример 2. Ширина колонки в процентах

#leftcol { /* Левая колонка */
  float: left; /* Обтекание справа */
  width: 20%; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
  margin-left: 21%; /* Отступ слева */
}

Окончательный вариант создания макета приведен в примере 3.

Пример 3. Полный листинг

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Байки из склепа</title>
  <style type="text/css">
   body {
    font-family: Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
    margin: 0; /* Обнуляем отступы браузера */
   }
   h2 {
    font-size: 36px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    margin: 0; /* Убираем отступы */
    color: #fc6; /* Цвет текста */
   }
   h3 {
    margin-top: 0; /* Убираем отступ сверху */
   }
   #head { /* Верхний блок */
    background: #0080c0; /* Цвет фона */
    padding: 10px; /* Поля вокруг */
   }
   #menu { /* Левая колонка */
    float: left; /* Обтекание справа */
    border: 1px solid #333; /* Параметры рамки вокруг */
    width: 200px; /* Ширина колонки */
    padding: 5px; /* Поля вокруг текста */
    margin: 10px 10px 20px 5px; /* Значения отступов */
   }
   #menu div {
    padding: 2px; /* Поля вокруг ссылок */
   }
   #menu a { 
    display: block; /* Отображать ссылку как блок */
    padding: 2px; /* Поля вокруг ссылок */
    margin: 1px; /* Отступы вокруг */
    font-size: 0.9em; /* Размер текста */
    text-decoration: none; /* Убираем подчеркивание текста */
   }
   #menu a:hover { 
    background: #faf3d2; /* Цвет фона */
    border: 1px dashed #634f36; /* Добавление пунктирной рамки */
    margin: 0; /* Убираем поля */
   }
   #content { /* Правая колонка */
    margin: 10px 5px 20px 225px; /* Значения отступов */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
   .line {
    border-bottom: 1px groove #333; /* Линия между ссылками */
   }
   #foot { /* Нижний блок */
    background: #333; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
    clear: both; /* Отменяем обтекание */
   }
  </style>
 </head>
 <body>
  <div>
   <h2>Байки из склепа</h2>
  </div>
  <div>
   <div><a href="1.html">Все байки</a></div>
   <div><a href="2.html">Байки по автору</a></div>
   <div><a href="3.html">Байки по теме</a></div>
   <div></div>
   <div><a href="4.html">Популярные разделы</a></div>
   <div><a href="text.html">Последние байки</a></div>
  </div>
  <div>
   <h3>Алтарь демона </h3>
   <p>Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно,
   как планировалось, а даже наоборот. От свечей остались одни потёки, «кровь»
   смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо
   сохранились только рисунки мелом, но и они были скорее прикольные, чем злые
   и загадочные. Дети с неподдельным интересом разглядывали изображения, но
   без тени тех чувств, которые испытали взрослые ночью при луне.</p>
   <p>Тем не менее, оказался один человек, на которого работа произвела
   большое впечатление, - сторож лагеря. Днём он подошёл к автору &laquo;алтаря&raquo;.</p>
   <p>- Ваша работа? - начал сторож, кивая в сторону площади.<br />
   - А что такое?  <br />
   - Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные
   нарисованы..., а у вас всё же дети маленькие, они испугаться могут...</p>
  </div>
  <div>
   Copyright &copy; Влад Мержевич 
  </div>
 </body>
</html>

При использовании отступов и полей помним, что браузер устанавливает ширину слоя с учетом свойств width, border, padding и margin.

Как сделать список li и ul в две колонки CSS

Если у вас на сайте прописаны элементы списка li и ul, где нужно вывести в 2 колонки, то все можно вывести через стиль CSS стилизацию. Рассмотрим все на примере одной функций, что можно встреть на ресурсах в материале, это Похожие материалы. На них как раз все создавал и все отлично получилось. Также не забываем, что когда изменение произойдет, то нужно корректно все вписать в основной дизайн, где отлично справятся свойства margin и padding, что к стилям прикрепить можно и потом по пикселям и процентам все вывести по центру или сделать одинаковые отступы.

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

Сделать HTML список UL LI в две колонки при помощи CSS

Берем за основу стандартный и безусловно самый актуальный список.

Код

<ul>
  <li>Сайт ZORNET.RU</li>
  <li>Скрипты сайта</li>
  <li>Шаблоны сайта</li>
  <li>Дизайн портала</li>
  <li>Скрипты и шаблоны</li>
  <li>Все для сайта uCoz</li>
</ul>

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

Код

.zornet_ru li {display:block;width:49%;float:left;}

Чтоб понятно было, все проверил на работоспособность.

По умолчанию идет:

При добавление стиля и правкой свойствами свойставя margin и padding все стало совершенно по другому.

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

Две колонки, навигация справа | htmlbook.ru

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

Рис. 1. Веб-страница с навигацией в правой колонке

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

Пример 1. Двухколонный макет

<style type="text/css">
 #leftcol {
  margin-right: 211px; /* Отступ справа */
 }
 #rightcol {
  position: absolute; /* Абсолютное позиционирование */
  right: 0; /* Положение от правого края окна */
  top: 30px; /* Положение от верхнего края */
  width: 200px; /* Ширина колонки */
 } 
</style>
<div>Левая колонка</div> 
<div>Правая колонка</div>

Для левой колонки задаем отступ слева через свойство margin-right, оно включает в себя ширину правой колонки, ее положение от правого края окна браузера плюс расстояние между колонками. Для правой колонки устанавливаем абсолютное позиционирование с помощью свойства position: absolute, а положение самого слоя управляется через right и top. Их значения подбираются опытным путем в зависимости от вида макета и желания разработчика.

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

Рис. 2. Картинка для создания закругления внизу колонки

Ширина изображения должна быть несколько больше ширины колонки, это связано с тем, что в разных браузерах ширина колонки может незначительно различаться. Поэтому и требуется сделать небольшой «запас».

Прозрачность, помеченная на рисунке шахматным полем, необходима для быстрого и удобного изменения цвета фона колонки. Зеленым цветом на данном рисунке обозначен цвет фона веб-страницы. Чтобы на границе совмещения цветов не возникал паразитный оттенок, рекомендуется отключить сглаживание и установить только два цвета — прозрачный и фона. За счет этого получается характерная «лесенка», которая хорошо заметна при увеличении изображения (рис. 3).

Рис. 3. Увеличенный фрагмент картинки

В примере 2 приведен стиль для добавления рисунка к нижней части колонки.

Пример 2. Рисунок в качестве фона

#rightcol {
 background: #edeed5 url(images/col-bg.gif) bottom right no-repeat; /* Параметры фона */
 padding: 5px; /* Поля вокруг содержимого слоя */
 padding-bottom: 35px; /* Отступ снизу */
}

За счет того, что в рисунке использовалась прозрачность, цвет колонки легко менять через универсальный атрибут background. С помощью него же задается путь к изображению и его положение относительно края слоя. По умолчанию фон повторяется по вертикали и горизонтали, так что требуется отключить эту возможность через аргумент no-repeat. К нижнему краю текста колонки также необходимо добавить отступ паpaметром padding-bottom, ведь нижняя граница скругленная и текст не должен на нее «наступать».

Окончательный код для создания двухколонного макета, показанного на рис. 1, приведен в примере 3.

Пример 3. Двухколонный макет

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Рецепты от Миранды</title>
  <style type="text/css">
   body {
    font-family: Arial, Helvetica, sans-serif;
    background: #fff;
    margin: 0;
   }
   #head {
    background: #8fa09b;
    font-size: 24pt;
    font-weight: bold; 
    color: #edeed5;
    padding: 5px;
    border-bottom: 2px dashed #183533;
   }
   #content {
    margin-right: 211px;
    padding: 10px;
    border-right: 1px dashed #183533;
   }
   h3 {
    font-size: 110%;
    color: #752641;
    margin-bottom: 0;
   }
   #content p {
    margin-top: 0.3em
   }
   #menu {
    position: absolute;
    right: 0;
    top: 30px;
    width: 200px;
    font-size: 90%;
    background: #edeed5 url(images/col-bg.gif) bottom right no-repeat;
    padding: 5px;
    padding-bottom: 35px;
   }
   #foot {
    background: #8fa09b;
    color: #fff;
    padding: 5px;
    border-top: 2px dashed #183533;
   }
  </style>
 </head>
 <body>
 <div>Рецепты от Миранды</div>
 <div>
  <h3>Рома!</h3>
   <p>Очистить от ядрышек 2 кг. грецких орехов. Растолочь скорлупу и смешать с фруктами
   в 2 литрах рома. Употреблять 3&#8211;4 раза в день.</p>  
   <h3>Кровавая Мери</h3>
   <p>Влить в бокал хорошую 100% кровь по лезвию ножа. Влить водку &laquo;Смирновскую&raquo;.
   Пить залпом.</p>
   <h3>Червячное пиво</h3>
   <p>Сварить на медленном огне воду. Положить в нее небольшого червяка,
   лучше живого, но сойдет и так, мелко покрошенное яблоко, крылышко мотылька
   и жабу. Соль и сахар по вкусу. По готовности перелить в бутылки. Хранить в
   прохладном месте.</p>
   <h3>Грог по-рыбацки</h3>
   <p>1 рыбу залить кипятком, через 5 минут процедить и добавить грога. Подавать в чашках.</p>
   <h3>Хвангур</h3>
   <p>Сварить на медленном огне воду. Добавить в нее хлива и хрольва. Довести до кипения.</p>
   <h3>Царская водка</h3>
   <p>Смешать 2 части соляной кислоты и 1 часть азотной со льдом. Слить
   охлажденную смесь в фужер. Пить залпом.</p>
   <h3>HotDog</h3>
   <p>Тщательно промойте косточки и сварите из них бульон. Подавать горячим.</p>
   <h3>Fireball</h3>
   <p>В большой бокал положить лед, вылить на него все компоненты и положить кружок лимона.</p>
  </div>
  <div>
   <a href="1.html">Популярные рецепты</a><br />
   <a href="2.html">Рецепт дня</a><br />
   <a href="3.html">Рецепты на основе яблок</a><br />
   <a href="4.html">Рецепты на основе льда</a><br />
   <a href="text.html">Рецепты из хлива и хрольва</a>
  </div>
  <div>Copyright &copy; Влад Мержевич</div>
 </body>
</html>

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

В html колонки: Разбивать в HTML длинный список на колонки, в зависимости от ширины страницы? – Колонки таблицы | htmlbook.ru

Колонки таблицы | htmlbook.ru

Макет из трех колонок | htmlbook.ru

Ширина колонок в пикселах

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

Сочетание процентов и пикселов

4 метода создания колонок одинаковой высоты

Фиктивные колонки

HTML

CSS

Плюсы

Минусы

Псевдоколонки

HTML

CSS

Плюсы

Минусы

Границы и отрицательные отступы

HTML

CSS

Плюсы

Минусы

Смещение колонок и контейнера

HTML

CSS

Плюсы

Минусы

Дополнительные ресурсы

Резюме

Фиксированная ширина, три колонки | htmlbook.ru

Две колонки, навигация слева | htmlbook.ru

Как сделать список li и ul в две колонки CSS

Сделать HTML список UL LI в две колонки при помощи CSS

Две колонки, навигация справа | htmlbook.ru

Добавить комментарий Отменить ответ

Рубрики