Размещение контента наверху (после <body>), а визуально в центре

Lime · March 5, 2011

Сопровождаю сайт с табличной версткой.

Естественно что код с меню (с большим количеством ссылок - 15-20) и header находятся выше контента; хоть я и спрятал все детали оформления под CSS (остались только <td> и <tr>), но хотелось бы еще упростить жизнь поисковым роботам. Где-то вычитал, что при верстке слоями есть возможность расположить код с контентом выше всего остального, хоть визуально текст будет находится в середине странички, окруженный меню, хедером и футером.

Подскажите пожалуйста, как вот в этом примере расположить код слоя с контентом поверх всего остального, но визуально оставить в центре.

Если не трудно приведить пожалуйста несколько примеров такого расположения контента.

Спасибо!

P.S. тэги position:absolute и z-index ?

В процессе знакомства со слоями нигде не видел, что б код с контентом таки распологали выше меню и хедера; интересно, это делают по причине отсутствия времени или же в этом просто нету особой надобности и поисковым ботам большие меню не мешают ?

Edited March 5, 2011 by Lime

psywalker · March 5, 2011

Лови дружище

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
	*{ margin:0; padding: 0;}
		body { min-width: 500px;}
		div.head { height: 100px; background: blue;}
		div.right {
				float:left; 
				width: 200px;
				margin-left: -200px;; 
				background: red;
				display: inline;
		}
		div.wrap { float:left; width:100%;}
		div.content{ margin: 0 200px; background: #FF9; }
		div.sidebar{ 
			float:left; 
			width: 200px;
			margin-left:-100%; 
			background: red;
			display: inline;
		}

		div.foot { background: blue; height: 100px; clear: both;}

		p { padding: 10px;}



	</style>
		<!--[if lte IE 7]>
	<style type="text/css">
*html body { width:expression(document.documentElement.clientWidth < 600 ? "600px" : "auto");

	</style>
	<![endif]-->
</head>

<body>

	<div class="head">Header</div>

		<div class="wrap">
			<div class="content">
			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>

			</div>
		</div>
		<div class="sidebar">
			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
		</div>
		<div class="right">
				<p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>

		</div>
		<div class="foot">Footer</div>


</body>
</html>

Lime · March 5, 2011

Лови дружище

Спасибо! Буду изучать

psywalker · March 5, 2011

Спасибо! Буду изучать

Пральна

mishka · March 5, 2011

Макс, в своем репертуаре - не полностью или невнимательно прочел тему и поспешил выложить код.

Человек спрашивает как хедер опустить ниже контента.

Если высота хедера фиксированна, то его можно на абсолют повесить, задавши контенту верхний паддинг как высота футера.

Или, так как тут задействованна табличная верстка - display: table-footer-group; и display: table-header-group; - тебе в помощь.

psywalker · March 5, 2011

Макс, в своем репертуаре - не полностью или невнимательно прочел тему и поспешил выложить код.
Человек спрашивает как хедер опустить ниже контента.
Если высота хедера фиксированна, то его можно на абсолют повесить, задавши контенту верхний паддинг как высота футера.
Или, так как тут задействованна табличная верстка - display: table-footer-group; и display: table-header-group; - тебе в помощь.

Прошу прощения. Но тогда твой вариант в купе с моим даст хороший результат.

Lime · March 5, 2011

Если высота хедера фиксированна, то его можно на абсолют повесить, задавши контенту верхний паддинг как высота футера.
Или, так как тут задействованна табличная верстка - display: table-footer-group; и display: table-header-group; - тебе в помощь.

Очень полезно, Спасибо!

Вот спустя несколько часов копания стало получатся почти то что надо. В связи с этим возник вопрос - если можно все так удобно для поисковых ботов организовать то почему этим мало кто пользуется ? (вполне возможно что я плохо искал)

К примеру - задал в Гугле и Яндексе запрос "пластиковые ПВХ окна" (мне кажется это поле должно быть достаточно конкурентным) и среди двух десятков сайтов, в выдаче обоих поисковиков, есть только один - два сайта с таким (или подобным) расположением контента; более того - половина сайтов создана таблицами со всем оформлением "наружу".

Значит ли это, что такая помощь поисковым ботам не сильно нужна ? Я понимаю, что всем этим сайтам из моего примера очень сильно помогают ссылки с каталогов, различных статей, первых страниц сайтов с высоким рейтингом, может быть даже дорвеев, и конечно!-же правельно написаный контент, но имеет-ли какое-то влияние на "мнение" поисковых роботов структура сайта ?

Vlad · March 6, 2011

Вы сами практически ответили на свой вопрос. В топе Яндекса находятся сайты, у которых "традиционное" расположение контента. Соответственно, зачем так изгаляться с кодом, если поисковик прекрасно их индексирует.

Sign In

Размещение контента наверху (после <body>), а визуально в центре

Question

Lime

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Lime

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Lime

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information