Как изменить порядок следования блоков

[alzasr]

Есть два блока, один идет за другим, например

<div id="div1">Контент 1</div><div id="div2">Контент 2</div>

Блок div2 отобразиться под блоком div1. Высоты блоков не известны, вернее они могут быть различны. Есть ли возможность отобразить блок div2 над блоком div1 без использования javascript? Если бы размеры были известны, хотя бы у блока div2, то абсолютное позиционирование и margin-top, но в данном случае не подходит

[Justnewone]

  alzasr said:

Есть два блока, один идет за другим, например

<div id="div1">Контент 1</div><div id="div2">Контент 2</div>

Блок div2 отобразиться под блоком div1. Высоты блоков не известны, вернее они могут быть различны. Есть ли возможность отобразить блок div2 над блоком div1 без использования javascript? Если бы размеры были известны, хотя бы у блока div2, то абсолютное позиционирование и margin-top, но в данном случае не подходит

Диву 1 надо дать флоат и в эту же сторону отрицательный маргин на 100%.

Но прокатит если дивы во всю ширину правильно структурированного родителя, то есть, если "видимая" ширина родителя соответствует отрендеренной браузером.

Ну и колдуйте далее, чтобы последующие элементы тоже не могли попасть под эту же конструкцию, если надо.

[alzasr]

  Justnewone said:

Диву 1 надо дать флоат и в эту же сторону отрицательный маргин на 100%.

Но прокатит если дивы во всю ширину правильно структурированного родителя, то есть, если "видимая" ширина родителя соответствует отрендеренной браузером.

Ну и колдуйте далее, чтобы последующие элементы тоже не могли попасть под эту же конструкцию, если надо.

Видимо для этого приема у меня родительский блок неправильно структурирован. Есть левая и правая колонка, которые тоже флоатнуты. В общем, в моем случае, это не помогло

[Searcher]

Тогда покажите всю структуру

[alzasr]

  Searcher said:

Тогда покажите всю структуру

Структуру показать сложно, верстальщик постарался (((((

Вот ссылка http://www.fitness96.ru/catalog/fitness_clubs/ekaterinburg, на этой странице, ниже перечня фитнес-клубов идет текст. В коде они идут именно в порядке "список клубов" затем "текст", СЕОшники просят, чтобы на этой странице в HTML коде сначала шел текст, а потом список клубов, а отображалось так, как сейчас. Сам придумать не могу, т.к. версткой практически не занимаюсь, и кроме как javascript'ом ничего в голову не идет

Edited October 5, 2010 by alzasr

[psywalker]

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

[alzasr]

  psywalker said:

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

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

[psywalker]

  alzasr said:

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

Ну попробуй конеш, потом отпишись о результате.

[SelenIT]

Можно через display:table для контейнера и table-header-group/table-row-group/table-footer-group для самих элементов (как здесь). Но насколько это оправдано и семантично — каждый решает для себя...

[alzasr]

  SelenIT said:

Можно через display:table для контейнера и table-header-group/table-row-group/table-footer-group для самих элементов (как здесь). Но насколько это оправдано и семантично — каждый решает для себя...

Спасибо, нашел по ссылке то, что нужно. Для упрощения кода буду использовать конструкцию

<table>
  <tbody>
	<tr>
	  <td>
		текст в коде идет первым, отображается вторым
	  </td>
	</tr>
  </tbody>
  <thead>
	<tr>
	  <td>
		текст в коде идет вторым, отображается первым
	  </td>
	</tr>
  </thead>
</table>

Спасибо

Edited October 6, 2010 by alzasr

[neobroker]

Ребята, а как быть если блоков не 2-3, а 6? Неужели в css нет никакой примочки чтобы управлять порядком блоков? или порядком строк в таблице или порядком записей в списке?

  Quote

Можно через display:table для контейнера и table-header-group/table-row-group/table-footer-group для самих элементов (как здесь).

А зачем тут в стилях "height: 1px;" у блоков? что за прикол? убрал - ничего вроде не изменилось.

Edited January 19, 2012 by neobroker

[SelenIT]

Пока нет. Template layouts будут позволять, но когда они будут (если будут) — еще большой вопрос...