Заметки PHP

Когда я верстал таблицами, я жутко мучился от большого объема кода таблиц, от выравнивания стилями высот ячеек, дабы например разместить логотип, или быстрые ссылки «домой, карта сайта, обратная связь».
На дивах, при более менее простом и легком дизайне, это делается элементарно.

Вот пример сайта, который я переделывал не так давно, верстка не моя, но сайт удачно сделан по дизайну, в плане демонстрации размещения блоков:

Имеются блоки, выделенные красной линией, их расположение (хотя бы части из них) можно задать просто координатами, т.е имеем HTML код (сразу скажу, что мой HTML код не будет совпадать с исходным кодом сайта примера):

<div class="logo"><A href="#"><img src="image" width="xxx" height="xxx" alt="«></a></div>

нам надо разместить данный блок как логотип, со смещением от начала верстки на 30 по ширине и 40 по высоте от начала верстки (верстка у нас статичная, и ширина сайта примерна 1000 пикселей) , делаем следующим образом:

div.logo {
position: absolute;
margin-left: 30px;
margin-top: 40px;
}

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

Если бы мы задали именно параметрами LEFT и TOP:

div.logo {
position: absolute;
left: 30px;
top: 40px;
}

наш логотип оказался бы на пустом фоне отдельно от всего дизайна, т.к. LEFT И TOP указывают координаты от левого-верхнего угла браузера его документа

таким образом, можно спозиционировать блок поиска:

div.search {
position: absolute;
margin-left: 650px;
top: 80px;
}

и другие блоки.

Но учтите, такой способ выбивает блоки из общего потока отображения блоков, т.е. задавая параметр POSITION: ABSOLUTE блок как бы начинает парить над всем остальным контентом, а все блоки, что были за ним в последовательности, просто напросто спрячутся под ним.

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

  <div class=»main">
	<div class="header"></div>
	<div class="left">
		<div class="block">привет</div>
		<div class="block"> пока </div>
	</div>
	<div class="right"></div>
	<div class="clear"></div>
	<div class="footer"></div>
  </div>

и код CSS

  .block {background: #fff; border: 1px solid black; margin: 20px; height: 150px}

видим что получилось:

блоки расположены друг за другом, но если добавить в первый блок стиль style="position: absolute", получим следующее:

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

Заметки, Сделай сам, Статьи абсолютное позиционирование, блоки div, верстка на дивах