Двух колоночная вёрстка — SEO подход

Рассмотрим вариант SEO направленной вёрстки регионами div, которая «подаёт первым блюдом» самую важную информацию в контексте страницы (новости, материалы и т.п.), а блоки (левая и правая информационные колонки навигации, шапка сайта и т.п.) находятся в макете страницы «за» основным содержимым. И «расставляются» с помощью css в браузере пользователя на свои места.

В данной статье представим варианты двух – колоночного макета содержимого с «плавающей» шириной центральной информационной части и левой (правой) колонкой фиксированной ширины. А так – же приведём пример, как сделать двух – колоночный макет фиксированной ширины.

   Примечание автора: полностью кросс браузерный метод, поддерживается даже такими «старичками», как IE 6.0.

Основные блоки, которые нам понадобятся:

• Включающий в себя все элементы дизайна блок – id: wrapper (width: 100%;)
• Шапка сайта – id: header (height: 300px)
• Левая колонка (правая колонка) – id: sidebar (width: 300px)
• Центральная информационная часть страницы – id: content (width: 100%)
• Подвал сайта – id: footer

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

Пример вёрстки двух колоночного макета со 100% шириной и расположением меню слева:

   Результат в Вашем браузере:

Html вёрстка:

<div id="wrapper">
<div id="content">
	<div id="main-content">
	#id: main-content [Центральная информационная часть страницы]
</div>
</div>
<div id="sidebar">
	#id: sidebar [Левая(Правая) колонка]
</div>
<br class="clear" />
<div id="header">
	#id: header [Шапка сайта]
</div>
<div id="footer">
	#id: footer [Подвал сайта]
</div>
</div>

CSS:

body{
        text-align: center;
        width: 100%;
}
#wrapper{
        text-align: left;
        width: 100%;
        margin: 0 auto;
        position: relative;
        min-width: 990px;
}
#content,#header,#footer{
        width: 100%;
}
#header{
        position: absolute;
        top: 0;
        left: 0;
        height: 300px;
}
#content{
        width: 100%;
        float: left;
        margin: 0;
}
#main-content{
        width: auto;
        float: auto;
        margin: 0;
        margin-left: 310px;
}
#sidebar{
        width: 300px;
        float: left;
        margin: 0;
        margin-left: -100%;
}
#content,#sidebar{
        margin-top: 310px;
}
#header,#footer,.clear{
        clear: both;
        float: none;
}
#sidebar,#main-content,#content,#header,#footer,#wrapper{
        overflow: hidden;
}

Как видите, в коде страницы вначале идёт основное информационное уникальное содержимое, после чего правая или левая колонки, потом шапка сайта и подвал. Но с помощью css и абсолютного позиционирования мы «доставляем шапку» сайта в браузере посетителя на место (вверх), а для левой колонки мы освобождаем место в main-content, делая отступ слева, равный ширине левой колонки, самой же колонке задаём -100% отступ и обтекание текстом по левой стороне, и колонка «подтягивается» на место. Для footer а же выставляем отмену обтекания текстом и очищаем поток.

   Примечание: не забываем задавать overflow: hidden для блоков, в которых будет подаваться содержимое, чтобы избежать разрывов содержимого и падения колонок в случае неправильного наполнения.

   Примечание: после содержимого левой колонки ставим br или div с обязательной очисткой потока и отменой обтекания текста, на самом — то деле этот hack нужен лишь для 100% совместимости с IE 6.0. Иначе наблюдается неявное копирование содержимого правой (левой) колонки.

   Совет: если Вам нужны отступы внутри блоков #header, #fooer, #main-content, #sidebar, создайте контейнер div с классом .innerpad с width = auto и назначьте необходимые отступы через margin.

Пример вёрстки двух колоночного макета со 100% шириной и расположением меню справа:

   Результат в Вашем браузере:

Html вёрстка:

Всё та же

CSS:

body{
        text-align: center;
        width: 100%;
}
#wrapper{
        text-align: left;
        width: 100%;
        margin: 0 auto;
        position: relative;
        min-width: 990px;
}
#content,#header,#footer{
        width: 100%;
}
#header{
        position: absolute;
        top: 0;
        left: 0;
        height: 300px;
}
#content{
        width: 100%;
        float: left;
        margin: 0;
}
#main-content{
        width: auto;
        float: auto;
        margin: 0;
        margin-right: 310px;
}
#sidebar{
        width: 300px;
        float: left;
        margin: 0;
        margin-left: -300px;
}
#content,#sidebar{
        margin-top: 310px;
}
#header,#footer,.clear{
        clear: both;
        float: none;
}
#sidebar,#main-content,#content,#header,#footer,#wrapper{
        overflow: hidden;
}

   Совет автора: и всё — таки советуем Вам обратить внимание при создании двух колоночного макета динамической длинны на то, что требуется предусмотреть минимальную ширину макета для разрешения 990 пикселей (1024 пикселя – очень распространённое разрешение среди планшетов и нетбуков). И максимальную ширину сайта, при которой внешний вид страницы будет оставаться читабельным (не будет много пустого места в центральной части). А так же задавать размер шрифтов в относительных единицах, например: em, %.

Здесь нам помогут css свойства min-width и max-width.

А теперь приведём вёрстку двух колоночного макета фиксированной ширины и расположением меню слева (#wrapper: 990px;).

   Результат в Вашем браузере:

Html вёрстка:

Всё та же

CSS:

body{
        text-align: center;
        width: 100%;
}
#wrapper{
        text-align: left;
        width: 990px;
        margin: 0 auto;
        position: relative;
}
#content,#header,#footer{
        width: 100%;
}
#header{
        position: absolute;
        top: 0;
        left: 0;
        height: 300px;
}
#content{
        width: 100%;
        float: left;
        margin: 0;
}
#main-content{
        width: auto;
        float: auto;
        margin: 0;
        margin-left: 310px;
}
#sidebar{
        width: 300px;
        float: left;
        margin: 0;
        margin-left: -100%;
}
#content,#sidebar{
        margin-top: 310px;
}
#header,#footer,.clear{
        clear: both;
        float: none;
}
#sidebar,#main-content,#content,#header,#footer,#wrapper{
        overflow: hidden;
}

Пример вёрстки двух колоночного макета фиксированной длинны и расположением меню справа

   Результат в Вашем браузере:

HTML вёрстка:

Всё та же

CSS:

body{
        text-align: center;
        width: 100%;
}
#wrapper{
        text-align: left;
        width: 990px;
        margin: 0 auto;
        position: relative;
}
#content,#header,#footer{
        width: 100%;
}
#header{
        position: absolute;
        top: 0;
        left: 0;
        height: 300px;
}
#content{
        width: 100%;
        float: left;
        margin: 0;
}
#main-content{
        width: auto;
        float: auto;
        margin: 0;
        margin-right: 310px;
}
#sidebar{
        width: 300px;
        float: left;
        margin: 0;
        margin-left: -300px;
}
#content,#sidebar{
        margin-top: 310px;
}
#header,#footer,.clear{
        clear: both;
        float: none;
}
#sidebar,#main-content,#content,#header,#footer,#wrapper{
        overflow: hidden;
}

Итак, преимущества этого метода в следующем:

• HTML вёрстка во всех случаях остаётся одинаковой, вне зависимости от фиксированной или динамической 100% ширины макета, расположением колонок меню и навигации в левой или в правой части.
• Преподносим самое важное содержимое всегда в начане страницы для поисковых систем (SEO вёрстка)
• Поддержка всех браузеров (и даже очень старых) IE 6.0+, Firefox 2+, Opera 8+, Chrome, Safari

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