нужно грамотно сверстать блоки, когда один расширяется, левый блок опускаетсяниже, как в youtube

relax · April 14, 2010

Здравствуйте.

Такая задача:

если посмотреть на Youtube, там блок видео может расширятся на ширину сайта, а сайд бар соответственно опускается ниже. Сверстать такое совсем не является проблемой, например так:

http://www.jankoatwarpspeed.com/post/2009/...css-jquery.aspx

структура только получается вот такая

<div id="header"></div>
<div id="main">
	<div id="video"></div>
	<div id="sidebar"></div>
	<div id="content"></div>
</div>
<div id="footer"></div>

но у меня проблема в том, что нужно (для SEO), чтобы блок #content был сразу за блоком #video, и затем следовал #sidebar. Если я так размещаю блоки, то не получается поднять $sidebar на уровень с #video, когда он в уменьшенном варианте, как можно грамотно это решить?

relax · April 14, 2010

я непонятно тему описал? никто даже не заглянул в нее

Great Rash · April 14, 2010

Да, непонятно. Сделайте тестовую страницу и покажите код того что у вас получается.

Justnewone · April 14, 2010

я непонятно тему описал? никто даже не заглянул в нее

Можно вот так:

<div id="content"> тря-ля-ля <div id="sidebar"></div></div>

CSS, полагаю, понятен?

а иначе контенту придется указывать ширину и флоат, ну или же флоат влево и отриц. правый маргин 100% + полож. паддинг размером с сайтбар. Можно обрести очень неприятные последствия с общим обрамлением. Короче - извращение, если сразу не получица - легче таблицей и не парица.

relax · April 14, 2010

Да, непонятно. Сделайте тестовую страницу и покажите код того что у вас получается.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Insert title here</title>
	<style>
		#header {
			width: 960px;
			height: 100px;
			background-color: #AAA;
			margin: 0 auto;
		}

		#main {
			width: 960px;
			margin: 0 auto;
		}

		#video {
			margin: 5px 0;
			width: 640px;
			height: 360px;
			background-color: #AAA;
			float: left;
		}

		#content {
			width: 640px;
			height: 500px;
			margin: 5px 0;
			background-color: #AAA;
			float: left;
		}

		#sidebar {
			float: right;
			width: 300px;
			height: 900px;

			margin: 5px 0;
			background-color: #AAA;
		}
	</style>

	<script type="text/javascript">
		function aaa() {
			document.getElementById('video').style.width = '960px';
		}
	</script>
</head>

<body>
<div id="header"></div>
<div id="main">
	<div id="video">
		<button onclick="aaa();">Expand</button>
	</div>
	<div id="sidebar"></div>
	<div id="content"></div>
</div>
<div id="footer"></div>
</body>
</html>

так вот, он работает, но мне нужно чтобы блок #content был выше блока #sidebar, когда я их меняю сеставми смотрите что выходит

Justnewone, вы наверное меня не поняли, так точно не получится

Justnewone · April 14, 2010

Давайте 2 картинки, как есть и как хотелось бы. Я полагаю, что понял Вас правильно. Если по коду собираетесь середину поднять выше боковух(-и) - то поступайте как я описал. Можно еще бок спозиционировать абсолютно, но тогда высота перестанет за него цепляться. В общем, примеров в сети полно.

Я точно Вам все описал, наверное Вы меня не поняли.

relax · April 14, 2010

Давайте 2 картинки, как есть и как хотелось бы. Я полагаю, что понял Вас правильно. Если по коду собираетесь середину поднять выше боковух(-и) - то поступайте как я описал. Можно еще бок спозиционировать абсолютно, но тогда высота перестанет за него цепляться. В общем, примеров в сети полно.
Я точно Вам все описал, наверное Вы меня не поняли.

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

Justnewone · April 14, 2010

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

Вы так и не привели картинку ) Но, например, #сатбар{флоат:лефт/райт; маргин-топ: -360px;}

relax · April 14, 2010

Вы так и не привели картинку ) Но, например, #сатбар{флоат:лефт/райт; маргин-топ: -360px;}

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

Justnewone · April 14, 2010

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

Ну ващет высота у него намертво прошита ))) Судя по вашим постам.

Great Rash · April 14, 2010

Ширина страницы фиксированная?

relax · April 14, 2010

ширина не фиксированная.

то был просто пример, показать в чем проблема

Justnewone · April 14, 2010

ширина не фиксированная.
то был просто пример, показать в чем проблема

если все резиновое во все стороны - пишите скрипт, который будет считать высоты (ширины) и назначать соотв. маригины (паддинги). А надо ли? Точно исчерпаны возможности заголовком стронгов и семантики вкупе с отсутствием ошибок парсинга?

Great Rash · April 14, 2010

http://www.cssmaster.ru/node/48

Sign In

нужно грамотно сверстать блоки, когда один расширяется, левый блок опускаетсяниже, как в youtube

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information