Вопрос по верстке

а щас они как идут?задавайте ширину и высоту и.т.д

ТС, способов много...

Так, как у Вас написано первым идет блок с контентом, а затем шапка...

Есть обычная структура страницы: шапка, основной контент.

В самом хтмл надо сделать так чтобы сначала шел контент а потом описание шапки. Какие нужно задать стили для таких блоков:

<div id="main_content"></div>

<div id="shapka">SHAPKA</diV>

Примерно понял, что Вам надо...

<div style="position:relative;top:100px;">HEADER</div>

<div>CONTENT</div>

Параметр top регулируйте как Вам надо...

А как еще сделать чтобы кроссбраузерность была? Сделал так:

<div id="page" style=" position:relative;top:77px;">MAIN CONTENT</div>

<div id="head" style="height:77px; position:relative;top:-77px;">SHAPKA</div>

В мозилле норм а в ИЕ плывет..

<div id="page" style=" position:relative;top:77px;">MAIN CONTENT</div>

<div id="head" style="height:77px; position:relative;top:-77px;">SHAPKA</div>

Элемент SHAPKA выходит за пределы страницы.

Сделайте top:-27px; и увидите элемент на странице.

<div style="position:relative;top:20px;">MAIN CONTENT</div>

<div style="height:77px;position:relative;top:-20px;">SHAPKA</div>

Вроде нормально отображает: IE, FF, Opera, Chrome.

А почему если добавить бэкграунд, то основной слой куда-то улетает?

<div style="position:relative;top:20px; background:#33CC33">MAIN CONTENT</div>

<div style="height:77px;position:relative;top:-20px; background:#FFFF33">SHAPKA</div>

У Вас элемент SHAPKA имеет высоту 77px и закрывает собой элемент MAIN CONTENT. Сделайте так:

<div style="position:relative;top:20px; background:#33CC33;z-index:2;">MAIN CONTENT</div>

<div style="height:77px;position:relative;top:-20px; background:#FFFF33">SHAPKA</div>

А дл чего в блоке с шапкой top:-20px; ?

Что оно дает ? Что-то никак не могу понять..

Nicca добавил 04.07.2009 в 19:55

И откуда считается отсчет при использовании top ? Типа начало координат..

Ну, во-первых, это Вы поместили в код этот параметр (top:-77px), а я подумал он Вам нужен, только уменьшил значение, чтобы элемент SHAPKA вернулся на страницу, а не был за ее пределами.

Во-вторых, уберите и увидите, что элемент SHAPKA сместится немного вниз и верх страницы будет пустоват. Если глаз мозолит можно и убрать.

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

Пример:

<div style="border:1px solid #000;height:50px;">BLOK1</div>

<div style="border:1px solid #000;height:50px;position:relative;top:300px;">BLOK2</div>

<div style="border:1px solid #000;height:50px;">BLOK3</div>

На примере хорошо видно, что BLOK2 сместился вниз на 300px, а место, где он находился осталось пустым.