Jump to content
  • 0

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


relax
 Share

Question

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

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

если посмотреть на 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, когда он в уменьшенном варианте, как можно грамотно это решить?

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

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

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

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

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

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

Link to comment
Share on other sites

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

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

<!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, вы наверное меня не поняли, так точно не получится

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy