HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Еще один способ верстки колоночного макета

Ранее я приводил способ верстки двух и трех колоночного макета. Сейчас я хочу привести еще один способ верстки сайта с боковыми колонками.

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

Трех колоночный макет

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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{padding:0;margin:0;}
.colLeft{
	float:left;
	width:200px;
	margin-left:-100%;
	background:#CCC;
	position:relative;
	z-index:1;
}
.colRight{
	float:right;
	width:200px;
	margin-left:-200px;
	background:#CCC;
}
.colCenterBlock{
	float:left;
	width:100%;
}
.colCenter{
	margin:0 220px;
}
 
</style>
</head>
<body>
	<div class="colCenterBlock">
		<div class="colCenter">
			А ведь Минздрав предупреждал. Центральная колонка – это выбранное, это судьба, так сложилось. Никуда уже назад не отыграешь. 
			<div style="clear:both">Проверяем, если внутри поставить блок с ckear:both, уедут ли вниз колонки</div>
			Поздно пить боржом, когда до Центральная колонка дошел. Вспоминаются стихи: «Идем по небесному телу Земля из точки рождения «А» в точку «Центральная колонка». Блуждаем по свету во тьме, пока нас не сцапает Центральная колонка. *** Хоть кажется, что это небыль, но по Земле ведет нас Центральная колонка». Настоящий мужчина не боится Центральная колонка. Что мешает футболистам начать выигрывать? Думаю, что им мешает Центральная колонка. 21-летний дизайнер из Бруклина Матрик Поберг увидел в воскресенье вечером в поезде Центральная колонка. Поезд был переполнен, и он потерял Центральная колонка из виду. Как обычно заканчиваются такие ситуации? Выходят из поезда и забывают. Вот такая романтическая история. Ежедневно Центральная колонка доставляет людям массу веселья. И сегодняшний день – не исключение. Проживёт человечество и без Центральная колонка. Но с Центральная колонка – лучше. Запретить Центральная колонка? Следующим шагом, наверное, будет запрет всего, чем можно утолить голод. Чертовски полезная в хозяйстве вешь: устройство для скачивания Центральная колонка через интернет. Кстати, прошу обратить внимание, качает через Wi-Fi, и скорость скачивания вполне приличная. А вот «Акнолок яаньлартнец» – это Центральная колонка наоборот.
		</div>
	</div>
 
	<div class="colLeft">
		Левая колонка – это абсолютно естественное желание. Прежде, чем делать какие-то выводы, мы должны понять, для чего нам Левая колонка. Весь мир – это Левая колонка. А люди в нем актеры. Глупый и мудрец, смотря на одну Левая колонка, видят два разных Левая колонка. Вообще, думаю, что Левая колонка – это аллегория. Выпуски новостей по ящику – уже давно постановки и сочинения на тему, как бюджетники рады своим зарплатам, старики пенсиям, президент показал пиндосам фигу и т.п. Так почему бы для разнообразия не показать сюжет про ктулху-похитителя Левая колонка, который тырит Левая колонка у зазевавшихся буржуев. Секрет создания Левая колонка всегда строго хранился и передавался от мастера к ученику. Левая колонка есть у каждого из нас, но обычно мы этого не замечаем. При изучении Левая колонка есть такое понятие как – начитанность, то есть не стоит ждать от человека прочитавшего букварь, что он поймет «Войну и мир». Пусть Левая колонка сияет здоровьем. А вот «Акнолок яавел» – это Левая колонка наоборот.
	</div>	
	<div class="colRight">
		Когда наблюдатель регистрирует яркое свечение в воздухе, это не обязательно НЛО. Это – Правая колонка. Примерно два месяца назад была собрана команда, которая занялась воплощением мечты Правая колонка в реальность. А как прекрасен электросварщик в маске электросварщика, озаряемый отсветами Правая колонка. Всё хватит, звоню Правая колонка. Правая колонка. Честное пионерское, хочу просто поделиться красотищей. Если у Правая колонка сильная светлая энергия, которая уравновешивает ее «черную дыру», она становится для вас настоящей Правая колонка – другом, помощником, медсестрой и домохозяйкой. Если есть Правая колонка, то должна быть и ПротивоПравая колонка. Правая колонка – это мина замедленного действия для семьи. Правая колонка – только не надо путать подлинный продукт с тем, что продается в магазинах. Дорога в будущее ведет нас прямо к Правая колонка. А вот «Акнолок яаварп» – это Правая колонка наоборот.
	</div>	
</body>
</html>

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

Скачать пример

Двух колоночный макет

Из выше представленного примера легко делаются двух колоночные макеты. Рассмотрим пример с колонкой слева, а основным контентом справа:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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{padding:0;margin:0;}
.colLeft{
	float:left;
	width:200px;
	margin-left:-100%;
	background:#CCC;
	position:relative;
	z-index:1;
}
.colCenterBlock{
	float:left;
	width:100%;
}
.colCenter{
	margin:0 20px 0 220px;
}
 
</style>
</head>
<body>
	<div class="colCenterBlock">
		<div class="colCenter">
			А ведь Минздрав предупреждал. Центральная колонка – это выбранное, это судьба, так сложилось. Никуда уже назад не отыграешь. 
			<div style="clear:both">Проверяем, если внутри поставить блок с ckear:both, уедут ли вниз колонки</div>
			Поздно пить боржом, когда до Центральная колонка дошел. Вспоминаются стихи: «Идем по небесному телу Земля из точки рождения «А» в точку «Центральная колонка». Блуждаем по свету во тьме, пока нас не сцапает Центральная колонка. *** Хоть кажется, что это небыль, но по Земле ведет нас Центральная колонка». Настоящий мужчина не боится Центральная колонка. Что мешает футболистам начать выигрывать? Думаю, что им мешает Центральная колонка. 21-летний дизайнер из Бруклина Матрик Поберг увидел в воскресенье вечером в поезде Центральная колонка. Поезд был переполнен, и он потерял Центральная колонка из виду. Как обычно заканчиваются такие ситуации? Выходят из поезда и забывают. Вот такая романтическая история. Ежедневно Центральная колонка доставляет людям массу веселья. И сегодняшний день – не исключение. Проживёт человечество и без Центральная колонка. Но с Центральная колонка – лучше. Запретить Центральная колонка? Следующим шагом, наверное, будет запрет всего, чем можно утолить голод. Чертовски полезная в хозяйстве вешь: устройство для скачивания Центральная колонка через интернет. Кстати, прошу обратить внимание, качает через Wi-Fi, и скорость скачивания вполне приличная. А вот «Акнолок яаньлартнец» – это Центральная колонка наоборот.
		</div>
	</div>
 
	<div class="colLeft">
		Левая колонка – это абсолютно естественное желание. Прежде, чем делать какие-то выводы, мы должны понять, для чего нам Левая колонка. Весь мир – это Левая колонка. А люди в нем актеры. Глупый и мудрец, смотря на одну Левая колонка, видят два разных Левая колонка. Вообще, думаю, что Левая колонка – это аллегория. Выпуски новостей по ящику – уже давно постановки и сочинения на тему, как бюджетники рады своим зарплатам, старики пенсиям, президент показал пиндосам фигу и т.п. Так почему бы для разнообразия не показать сюжет про ктулху-похитителя Левая колонка, который тырит Левая колонка у зазевавшихся буржуев. Секрет создания Левая колонка всегда строго хранился и передавался от мастера к ученику. Левая колонка есть у каждого из нас, но обычно мы этого не замечаем. При изучении Левая колонка есть такое понятие как – начитанность, то есть не стоит ждать от человека прочитавшего букварь, что он поймет «Войну и мир». Пусть Левая колонка сияет здоровьем. А вот «Акнолок яавел» – это Левая колонка наоборот.
	</div>	
</body>
</html>

Скачать пример

Запись опубликована 16.01.2010 в 17:11 и размещена в рубрике css, html. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (19) на “Еще один способ верстки колоночного макета”

  • kater:
    19.01.2010 в 16:21

    16 января пост вышел, а я только сегодня до него добрался -( Видимо нужно чаще к вам заходить =)

  • Иван:
    24.01.2010 в 12:20

    Эм… ну допустим это понтно, а как сделать, чтобы бэкграунды обеих колонок продолжались до одного и того же уровня при background-repeat: repeat-y;

  • Костя:
    24.01.2010 в 23:40

    можно попробывать это http://html-css.info/2009/07/div-float-height/

  • Сергей:
    10.04.2010 в 16:35

    Спасибо, очень интересный способ, что особенно важно, для поисковиков думаю надо верстать именно так. А z-index, здесь обязателен, убрал вроде и без него срабатывает?

  • Костя:
    10.04.2010 в 18:28

    Без z-index, по-моему, колонки не кликабельные становятся и там не получается выделить текст.

  • KJS:
    16.04.2010 в 16:54

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

  • KJS:
    16.04.2010 в 16:56

    И вообще, зачем это нам «меньшее кол-во дивов» госпада ?

  • Костя:
    16.04.2010 в 17:32

    Меньшее количество дивов значит меньше кода, меньше вес документа, легче поисковому роботу до текста добираться.
    По-поводу «если сжать браузер», то для этого есть min-width.

  • Сергей:
    18.04.2010 в 15:01

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

  • Serlutin:
    16.05.2010 в 12:15

    У меня такой вопрос. Зачем в .colLeft {position: relative} ???

  • Костя:
    16.05.2010 в 14:39

    Там идет хитрое наложение слоев, и в левой колонке не выделяется текст и не кликаются ссылки, и чтобы этого избежать, делают position: relative, чтобы левая колонка как бы «всплыла» над всеми.

  • Serlutin:
    17.05.2010 в 20:17

    А в каком браузере? Я сделал одинковую высоту колонок (с помощью padding-bottom: 5000px;margin-bottom: -5000px). Но из за position: relative у меня неправильно отображался футер в IE6 (Ну это ладно) и в Ie7 (а это уже плохо). Он просто перекрывал его, я убрал position: relative и z-index:1 пока что во всех браузерах отображется нормально (Пробовал в FF, Opera, Google,IE6). Все ссылки кликаются, текст выделяется.
    Теоретически да, .colCenterBlock перекрывает первую колонку, но в нем ничего не содержится (ну если его не трогать, кстати надо попробовать навязать ему картинку, может быть тогда ссылки перестанут работать?), а в .colCenter задан margin, поэтому он не перекрывает колонку. Так что все должно работать

  • Levik:
    11.08.2010 в 11:21

    спасибо за подсказку.. периодически ощущается нехватка таких шпаргалок…

  • Алексей:
    19.01.2011 в 21:24

    Константин, подскажите что не так делаю, слетает третий блок http://gold-jewellery.org.ua/ , хоть на вид и все вроде правильно.

    Заранее благодарен.

    офтоп — жаль что вас нету подписки на комментарии.

  • Костя:
    20.01.2011 в 01:51

    Алексей, например, можно правую колнку поставить выше по коду центральной.

  • Алексей:
    20.01.2011 в 02:12

    Константин, Благодарю!!! Работает!

    хотя всеравно не понял ошибку, почему так сработало, а по старому нет. =)

  • Max:
    16.08.2011 в 20:16

    Может, я что-то глупое скажу… А если вместо этих извращений использовать таблицу?.. Ой… (зажмурился)

  • Сергей:
    24.08.2011 в 02:23

    Тоже так делал раньше. Сейчас делаю намного проще. Пример сделал сам. http://divhack.com/node/18

  • Евгений:
    03.02.2012 в 18:58

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

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

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос