26 января 2010, 18:56

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 — кажись не надо ;) но пускай полежат.

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

Regent
А 900px на 16 фонт вариант?
Vitaliy Bogdanets
как вариант ;)
зы: новый диз верстаешь уже?
Sherif
но проблемы могут возникнут при многострочном тексте :(
Vitaliy Bogdanets
Какие проблемы :) ? Вот живые примеры:
http://learnrussiankiev.com/
Regent
Неа, ещё не верстаю, пока прорисовываем)
Но сайдбар точно выкину)
Vitaliy Bogdanets
минус в юзабилити чувак ;) хотя смотря как организуешь шапку ;)
зы: http://italiano.kiev.ua/ — тут нет сайдбаров, важные моменты на летающих по краям картинках и в верхнем-нижнем менюхах ;)

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter