Верстка header'a. Сложности с position

[To_wave]

Всем доброго.

У меня, как у начинающего верстальщика, есть ряд проблем. и одна из них - свойство css - position; не совсем догоню где и как применять значения absolute, relative и т.д.

 

Сейчас у меня стала проблема в верстке такой (см. картинку) шапки. Для наглядности выделил блоки как я их себе представляю.

 

1. серый блок - растянут на всю ширину стариницы, не имеет никаких отступов ни сверху ни снизу. с этим проблем нет.

2. зеленый контур. имеет ширину в 900px (ширину страницы) располагается по центру. (тут проблем тоже не возникае)

 

а сам проблема возникает при добавлении следующих блоков:

 

3. желтый, синий, зеленый - на которых логотип, форма поиска, логин+кнопки входа\выхода.

 

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

 

Надеюсь суть проблемы описал понятно.

Edited December 18, 2013 by To_wave

[bvvell]

А зачем делать эти блоки абсолютными? можно же сверстать эти элементы и без абсолютного позиционирования. 

[To_wave]

А зачем делать эти блоки абсолютными? можно же сверстать эти элементы и без абсолютного позиционирования. 

Не затруднит подсказать?

[Ludwig Voltman]

http://cssdeck.com/labs/full/9gtebpt6

Как-то так?

[bvvell]

 

А зачем делать эти блоки абсолютными? можно же сверстать эти элементы и без абсолютного позиционирования. 

Не затруднит подсказать?

 

http://jsfiddle.net/bvvell/3kH4v/ ну примерно так 

[chocolate_moles]

http://jsfiddle.net/UHZ2y/

[Светлана Г.]

3. желтый, синий, зеленый - на которых логотип, форма поиска, логин+кнопки входа\выхода.

 

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

 

Зеленый блок - это контейнер для желтого, красного, голубого (синего) . Соответстввенно, он будет являться родительским блоком для всех, находящихся в нем блоков. Поэтому, ему нужно задать свойство position:relative;

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

[To_wave]

Ludwig Voltman, bvvell, chocolate_moles

Премного благодарен

[chocolate_moles]

Ludwig Voltman, bvvell, chocolate_moles

Премного благодарен

http://htmlacademy.ru/courses/45 уроки по позиционированию и вообще отличный сайт