SEO верстка

Guuurd · February 5, 2010

Здравствуйте, есть двухколоночный макет с прижатым футером

<!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">

html, body {margin:5;height:100%;}
#wrapper {
	height:auto !important;
	height:100%;
	min-height:100%;
	min-width:800px;
}
#header {
	height:200px;
}
#left {
	float:left;
	width:200px;
}
#right {
	top: 0px;
	margin-left:200px;
}
#spacer {
	height:100px;
}

#footer {
	height:100px;
	margin-top:-100px;
}
.clear {clear:both;}

</style>
</head>
<body>
<div id='wrapper'>
	<div id='header'>
	<!-- Содержимое хэдэра -->
	</div>
	<div id='container'>

		<div id='left'><!-- Меню -->
				</div>
		<div id='right'><!-- Основной контент -->
		</div>
	</div>
	<div class='clear'></div>
	<div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>

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

		<div id='right'><!-- Основной контент -->
		</div>		
		<div id='left'><!-- Меню -->
				</div>

Спасибо

Mavrun · February 5, 2010

поиграйся с float:right

по сути можешь взять пример http://www.pagecolumn.com/2_col_generator.htm и просто проставить колонкам флоат-райт

psywalker · February 5, 2010

<div id='right'> поставь overflow:hidden;

<div id='left'> любой флоат

Guuurd · February 5, 2010

Ребята, спасибо, то что надо, кому интересно вот код который надо поменять

#left {
	overflow:hidden;
	width:200px;
}
#right {
	float:right;
	top: 0px;
	margin-left:200px;
}

psywalker · February 5, 2010

Ребята, спасибо, то что надо, кому интересно вот код который надо поменять
#left {
	overflow:hidden;
	width:200px;
}
#right {
	float:right;
	top: 0px;
	margin-left:200px;
}

Нахрена ты блоку #right поставил левый отступ? Поставь ему ширину просто и всё. И вот это top: 0px; вообще ни к чему. Кстати у #left убери ширину.

Guuurd · February 5, 2010

Нахрена ты блоку #right поставил левый отступ? Поставь ему ширину просто и всё. И вот это top: 0px; вообще ни к чему. Кстати у #left убери ширину.

top: 0px; -- согласен ни к чему, а без "#right поставил левый отступ" и "#left убери ширину" макет разваливается.

Сейчас у меня появился новый вопрос в левой колонке у меня сделано выпадающее вертикальное меню на css, но из-за overflow:hidden, который пришлось прописать в свойствах левой колонки оно обрезается, есть ли другое решение, как можно overflow:hidden обойти?

psywalker · February 5, 2010

top: 0px; -- согласен ни к чему, а без "#right поставил левый отступ" и "#left убери ширину" макет разваливается.
Сейчас у меня появился новый вопрос в левой колонке у меня сделано выпадающее вертикальное меню на css, но из-за overflow:hidden, который пришлось прописать в свойствах левой колонки оно обрезается, есть ли другое решение, как можно overflow:hidden обойти?

попробуй поставить overflow: auto;

shvv · February 5, 2010

Сейчас у меня появился новый вопрос в левой колонке у меня сделано выпадающее вертикальное меню на css, но из-за overflow:hidden, который пришлось прописать в свойствах левой колонки оно обрезается, есть ли другое решение, как можно overflow:hidden обойти?

http://forum.htmlbook.ru/index.php?showtop...st&p=134466

Guuurd · February 5, 2010

overflow: auto; -- добавляет в блоке скролинг, сами понимаете неприемлемо

пробовал различные варианты из приведенного выше топика, но без overflow:hidden левая колонка становиться под правую

Sign In

SEO верстка

Question

Guuurd

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Mavrun

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Guuurd

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Guuurd

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

shvv

Link to comment

Share on other sites

Guuurd

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information