Вывод содержимого внутреннего блока вверх кода html

[efendi]

Уважаемые коллеги!
Нуждаюсь в помощи профи.
Требуется, чтобы в html коде содержимое блока middle-container располагалось в самом верху, то есть перед блоком header.

В блоке middle-container будет размещён основной контент, поэтому в коде он должен идти первым, а потом все остальные блоки: шапка, левый и правый сайдбары, футер.

Буду благодарен за помощь!

 

Код HTML:

<div id="content">    <div id="header"></div>    <div class="wrap">        <div class="right-sidebar"></div>        <div class="left-sidebar"></div>        <div class="middle-container"></div>    <div style="clear:both;"></div>    </div>    <div id="footer"></div></div>

Код CSS:

#content {    margin: 0 auto;    width: 1000px;}#header {    height: 100px;}.wrap {    background: none repeat scroll 0 0 #ffffff;    margin-left: auto;    margin-right: auto;    padding-top: 8px;    width: 1000px;}.right-sidebar {    float: right;    margin-right: 6px;    width: 220px;}.left-sidebar {    float: left;    margin-left: 6px;    width: 220px;}.middle-container {    float: left;    margin: 0 6px;    width: 536px;}#footer {    background: url("../images/footer.jpg") no-repeat scroll 0 0 transparent;    color: #ffffff;    height: 115px;    margin: 0 auto;    padding: 20px;    width: 960px;}

Макет:

Edited October 7, 2014 by efendi

[rus]

только содержимое? не сам блок?

тогда оберни еще в один и отпозиционируй как надо.

[efendi]

только содержимое? не сам блок?

тогда оберни еще в один и отпозиционируй как надо.

 

Сам блок с содержимым.

 

Нужно чтобы в коде было так (без визуальных изменений в макете):

<div id="content"><div class="middle-container"></div>    <div id="header"></div>    <div class="wrap">        <div class="right-sidebar"></div>        <div class="left-sidebar"></div>    <div style="clear:both;"></div>    </div>    <div id="footer"></div></div>

Edited October 7, 2014 by efendi

[rus]

#content {

    margin: 0 auto;

    width: 1000px;

    position: relative; // позиционируем родительский блок

}

.spesial-content {

    position: absolute; // позиционируем дочерний относительно родителя блок

    top: по вкусу;

    left: по вкусу;

}

<div class="middle-container">

    <div class="spesial-content">контент отпозиционированный для верха</div>

</div>

[efendi]

#content {    margin: 0 auto;    width: 1000px;    position: relative; // позиционируем родительский блок}.spesial-content {    position: absolute; // позиционируем дочерний относительно родителя блок    top: по вкусу;    left: по вкусу;}

<div class="middle-container">    <div class="spesial-content">контент отпозиционированный для верха</div></div>

Спасибо, но к сожалению не получается так, как требуется.

Блок выводится в том же месте.

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

[rus]

т.е., вы хотите что бы именно в коде было видно то, что в контенте находится не на своем месте?

а для чего это если не секрет?

хотите xss-ом ударить по кому-нибудь?

[efendi]

т.е., вы хотите что бы именно в коде было видно то, что в контенте находится не на своем месте?

а для чего это если не секрет?

хотите xss-ом ударить по кому-нибудь?

Это нужно для SEO.

Так поисковые роботы быстрей находят основной контент.

Поэтому в коде он должен идти первым.

В случае, когда html вариант натягивается на движок, то основной контент, например в DLE, получается ниже 300 строки и бывает ещё гораздо ниже.

Поэтому и требуется такая последовательность кода HTML: основной контент > левый сайдбар>правый сайдбар>футер.

Кстати, структуру существующего кода html можно изменять. Главное, выдержать макет, который на скриншоте!

Edited October 7, 2014 by efendi

[rus]

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

[efendi]

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

Применил relative к блоку middle-container. Настроил top и left, добавил отрицательный margin.

Дело в том, что блок middle-container - динамический, и при добавлении контента рушится весь дизайн.

Edited October 7, 2014 by efendi

[xzarxzes]

http://jsfiddle.net/s3e9Lfvj/

[efendi]

http://jsfiddle.net/s3e9Lfvj/

Большое спасибо!

Как раз то, что нужно!

[rus]

efendi, вот что значит не верная постановка вопроса!

сравните ваш код:

<div id="content">    <div id="header"></div>    <div class="wrap">        <div class="right-sidebar"></div>        <div class="left-sidebar"></div>        <div class="middle-container"></div>    <div style="clear:both;"></div>    </div>    <div id="footer"></div></div>

далее какой он должен получиться:

<div id="content"><div class="middle-container"></div>    <div id="header"></div>    <div class="wrap">        <div class="right-sidebar"></div>        <div class="left-sidebar"></div>    <div style="clear:both;"></div>    </div>    <div id="footer"></div></div>

при этом ни слова о том, что структура может меняться.

и код xzarxzes:

<div class="container">    <header>header</header>        <div class="wrap">        <div class="middle">            <h1>Динамический Контент</h1>

xzarxzes, вам остается только поставить памятник, за телепатию!

[efendi]

rus, в сообщении 7 я написал, что структура может меняться.

Вы, видимо, это пропустили, а xzarxzes всё заметил!

Для этого не нужно быть телепатом, чтобы понять, что я хотел.

Но тем не менее, спасибо вам за уделённое время и желание помочь!

Edited October 7, 2014 by efendi

[rus]

да, и в правду, не заметил, ссори )))