Deerua about Coding -> CSS: СЕО-колонка :) @ deer.org.ua

Январь 2010

26 января 2010, 18:56 более 6-и месяцев назад

CSS: СЕО-колонка :)

SEO-колонка спросите вы? Ничего тут страшного нет. Это просто колонка которая идёт за контентом. По сути контент поисковик видит сразу, и сайт более СЕО-дружен ;)

<html>
	<head>
		<title>Column page</title>
	</head>
	<body>
		<div class="wrapper">
			<div class="content">
				<span>text</span>
			</div>
			<div class="sidebar">
				<span>text</span>
			</div>
		</div>
	</body>
</html>

Как же сделать колонку?

указываем длину текстового блока (для чтения рекомендовано не больше 600px на 14й фонт)
указываем блоку маржин с нужной стороны в длину колонки
оба летают слева, а у колонки левый маржин 100%

В цсс всё выглядит вот так

.wrapper {
	width: 960px;
	margin: 0 auto;
	clear: both;
	position: relative;
	zoom: 1;
}
.wrapper span{
	display: block;
	margin: 30px;
}
	.content{
		float: left;
		margin-left: 230px;
		width: 730px;
		position: relative;
	}
	
	.sidebar{
		margin-left: -100%;
		width: 230px;
		float: left;
		}

Работает даже в ИЕ, проблем нет (нужно только добавить доктайп), а для правой колонки:

колонка: маржин справа -длина колонки
контент: маржин справа длина колонки

.rightcolumn 
	.content{
		margin-left: 0;
		margin-right: 230px;
	}
.rightcolumn 
	.sidebar{
		margin-left: -230px;
	}

Посмотреть Пример

ps: всё просто и не сложно ;) Релейтивы и зум 1 — кажись не надо ;) но пускай полежат.

Адрес для трекбеков: http://deer.org.ua/2010/01/26/1/ping/

3 комментария

Теги: css

CSS: outline такой outline — или делаем равномерный фон для текста		Утилиток нужных пост: CSS и JS уменьшаторы (minifier)
←	Ctrl	→
CSS: СЕО-колонка :)

Deerua about Coding -> CSS: СЕО-колонка :)

Блог о кодинге, автор Deerua

coding, javascript, css, html, php, jquery, mysql, deerua

Deerua about Coding

CSS: СЕО-колонка :)