как сделать подобную верстку

[marcouk]

Помогите пожалуйста.

Нашел сайт pack-tradesk[точка]com[точка]ua

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

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

[swetlana]

Ссылку вы неудобно даёте. Это зря. Чтобы посмотреть, надо лишние действия совершать. А неохота.

О каком приёме речь?

О том, чтобы текст и меню по колонкам распихать?

google://вёрстка+в+две+колонки.

Текст в один блок заворачиваете, меню — в другой. И float'ами их расставляете.

[marcouk]

Нашел следующую информацию

код css

<style type="text/css">

.container{width:980px; margin-bottom:0; margin-top:0; margin-left:auto; margin-right:auto;}

.content{float:right;width:700px;margin-left:-250px;}

#sidebar{float:left;width:250px;margin-left:10px;}

</style>

html код

<div class="container">

<div class="content"><h1>Заголовок</h1> текст </div>

<div id="sidebar"><h2>Заголовок</h2>текст</div><br />

Здесь дополнительная информация

</div>

дополнительная информация наезжает на колонки

Edited February 18, 2011 by marcouk

[swetlana]

ну всё правильно.

В вашем примере эта дополнительная информация непонятно к чему относится. Она где-то вне раскладки.

[marcouk]

пример стиль с Подвал при просмотре получается шириной с колонку sidebar так как колонка content выше каким образом это побороть.

<style type="text/css">

.container{width:980px; margin-bottom:0; margin-top:0; margin-left:auto; margin-right:auto;}

.content{float:right;width:700px;}

#sidebar{float:left;width:250px;}

</style>

<div class="container">

<div style="width: 980px; height:140px;">Шапка сайта</div>

<div class="content"><h1>Заголовок</h1><p>текст</p><p>текст</p><p>текст</p><p>текст</p></div>

<div id="sidebar"><h2>Заголовок</h2>текст</div><div class="clr"></div>

<div style="clear: left"></div>

<div style="width:980pxp; height:40px;">Подвал</div>

</div>

Все вроде вышло через <div class="clr"></div>

Интересно такая верстка лучше для поисковиков или им безразлично что первое читать меню а потом текст или текст а потом меню в коде

Edited February 18, 2011 by marcouk

[swetlana]

насчёт поисковиков есть разные мнения. Как на самом деле — возможно, некоторые из разработчиков поисковиков и догадываются.

Ваша достаточно серьёзная ошибка в том, что не любите вы код. Позволяете себе его замусоривать.

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

Не следует использовать атрибут style без особой необходимости.

Не следует без особой необходимости использовать пустые элементы.

В вашем случае даже намёка на такую необходимость нет.

<style> 
  .container { width: 980px; margin: auto; }
  .header { height: 140px; }
  .content { float: right; width: 700px; }
  #sidebar { float: left; width: 250px; } 
  .footer { height: 40px; }
</style>

<div class="container">
  <div class="header">Шапка сайта</div> 
  <div class="content">
	<h1>Заголовок</h1>
	<p>текст</p><p>текст</p><p>текст</p><p>текст</p>
  </div>
  <div id="sidebar">
	<h2>Заголовок</h2>
	текст
  </div>
  <div class="footer">Подвал</div>
</div>

всё.