Создание семантических HTML + CSS шаблонов на 2 и 3 колонки

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

В этой статье мы рассмотрим различные способы создания мульти колоночных шаблонов с помощью HTML и CSS. Вы узнаете как создавать шаблоны используя обтекание и прямое позиционирование. Большинство сайтов используют 2 или 3 колонки, поэтому этот факт взят за основу. При создании будем соблюдать семантику кода.

Абсолютно позиционированные фиксированные колонки

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

<div class="container">
  <div id="left">
    left col.
  </div>

  <div id="content"> <h1>here is some main text.</h1>
  <p>here is a brief paragraph with some elongated text. we can see if it will break the lines and where the columns begin to appear.</p>

  <p>Isn't this a neat little trick?</p>
  </div>

  <div id="right">
    right col.
  </div>
</div>

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

html { background: #f06; background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; }
div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.container { display: block; position: relative; max-width: 1000px; min-width: 550px; margin: 0 auto; }

#left { width: 220px; background:#c9c; position: absolute; left: 0; top: 0; height: 100%; }
#content { width: 100%; background: #fff; padding: 0px 220px; }
#right { width: 220px; background: #a4a; position: absolute; right: 0; top: 0; height: 100%; }

 

Обтекающие колонки

Еще одно решение для 3 колоночного шаблона. Ничего сложного, просто выровняем блоки в одну линию с помощью float свойства. В HTML коде практически ничего не меняется, кроме того что левый и правый блок должны быть сестринскими элементами к центральному. Смотрите пример:

<div id="wrapper">
<div class="container">
  <div id="right">
    right col.
    <p>here is a line.</p>
    <p> and nother</p>
    <p> and nother!!</p>
    <p> gonna keep going.</p>
    <p>heyoo</p>
    <p>heyooooo</p>
  </div>

  <div id="left">
    left col.
  </div>

  <div id="content"> 

  <h1>here is some main text.</h1>
  <p>here is a brief paragraph with some elongated text. we can see if it will break the lines and where the columns begin to appear.</p>
  <h2>here is more big text and will this break the bank?? will it?? i dont really know to be honest.</h2>
  <p>but let's find out folks.</p>
  </div>
</div>
</div>

Прекрасная семантика кода, все читабельно и понятно. Единственная проблема в том, что боковые колонки не будут выравнены по высоте, если не будут заполнены контентом. Для этого случая есть прекрасные решения в статье: 4 способа растянуть div колонки по высоте.

html { background: #f06; background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; }
div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#wrapper { max-width: 1000px; min-width:750px; margin: 0 auto; }
.container { height: 100%; float: left; background: #fff; }

#left { width: 220px; height: 100%; background:#c9c; float: left; }
#content {width: 100%; height: 100%; padding: 0 220px; background: #fff;  }
#right { width: 220px;  height: 100%; background: #a4a; float: right; }

.container { display: inline-block; }
.container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.container {
    display: block;
}

Вот как этот шаблон выглядит на данном этапе:

 

Резиновые равные по высоте колонки

Очень интересная техника, которая позволяет создать колонки которые обтекают друг друга, при этом они будут иметь 100% высоту фона. Эта техника требует добавления дополнительного div контейнера к каждой из колонок. Смотрим HTML код:

<div id="wrapper">
  <div id="container3">
    <div id="container2">
        <div id="container1">
          <div id="col1">
            <h1>this is the right col</h1>
            <p>i am just saying that this is crazy folks. just super crazy!!!!!!!</p>
          </div>
          <div id="col2">Column 2</div>
          <div id="col3">Column 3</div>
        </div>
    </div>
  </div>
</div>

HTML слишком сложный для понимания. Понятнее станет когда рассмотрим CSS код. Сначала мы обворачиваем правым блоком остальные колонки, после с помощью относительного позиционирования  размещаем остальные. Это значит, что реальная высота каждого из блоков 100%, но мы выводим только часть колонки. Остальная часть скрывается с помощью свойства overflow.

html { background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; padding-top: 55px; }

#wrapper { display: block; max-width: 1100px; min-width: 700px; margin: 0 auto; }

#container3 { float: left; width: 100%; background: green; overflow: hidden; position: relative; }
#container2 { float: left; width: 100%; background: yellow; position: relative; right: 30%; }
#container1 { float: left; width: 100%; background: red; position: relative; right: 40%; }
#col1 { float: left; width: 26%;  position: relative; left: 72%; overflow: hidden; }
#col2 { float: left; width: 36%; position: relative; left: 76%; overflow: hidden; }
#col3 { float: left; width: 26%; position: relative; left: 80%; overflow: hidden; }

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

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

 

Резиново-фиксированная-фиксированная колонки

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

<div id="wrapper">
  <div id="contentwrapper">
    <div id="contentcolumn">
      <div class="innertube">
        <b>Content Column: <em>Fluid</em></b>
      </div>
    </div>
  </div>

  <div id="leftcolumn">
    <div class="innertube">
      <b>Left Column: <em>220px</em></b>
    </div>
  </div>

  <div id="rightcolumn">
    <div class="innertube">
      <b>Right Column: <em>220px</em></b>
    </div>
  </div>

  <footer>
    <a href="http://www.google.com/">Googies</a>
  </footer>
</div>

Как видите встроен маленький элемент подвала сайта, для большей наглядности. Здесь мы имеем левый блок, который резиновый. Далее идут два сайдбара по 220 пикселей, которые не имеют отношения к размеру окна (они фиксированные).

html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; }

body { padding-top: 85px; }
#wrapper { margin: 0 auto; max-width: 1100px; min-width: 650px; background: #fff; }

#contentwrapper{float: left; width: 100%; margin-left: -220px; }

#contentcolumn { margin: 0 190px 0 220px; }
#leftcolumn { float: left; width: 220px; margin-left: -220px; background: #C8FC98;}
#rightcolumn { float: left; width: 220px; background: #FDE95E;}

footer { clear: left; width: 100%; background: black;color: #FFF;text-align: center;padding: 4px 0;}
footer a { color: #FFFF80;}

.innertube {margin: 10px; margin-top: 0; }

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

 

В заключение

Надеюсь, Вам понравились эти техники создания HTML/CSS шаблонов. Если этот материал был вам полезен, не поленитесь поделиться им в социальных сетях! Также, предлагаю расширить свои знания в области разработки дизайна и верстки сайтов.

Источник материала ...

Дальше: Никогда не останавливайтесь наращивать ссылочную массу!