Тема ещё актуальна.
В общем, сделал пока так.
блоки header, content в обычном потоке, а цветок позиционировал с помощью
absolute, указав left, height/width (не 100%, а по размеру картинки), z-index.
Как расположить почти такой же цветок после блока текста? Проблема в том, что высота блока с текстом может быть разной.
Хотел написать вопросом, но пока писал возникла идея, как решить эту проблему
Поэтому просто поделюсь с Вами.
Нужно вспомнить то что абсолютное позиционирование отсчитывается не от края браузера, а от края блока, в который заключён элемент.
Я просто сделал такой класс для картинки:
Код:
.flower_left {
position:absolute;
left:195px;
margin-top:-32px;
}
Т.е. мне нужен был отступ от левого края блока-контейнера (внешнего). И затем мне нужно было "втянуть" этот рисунок снизу внутрь этого контейнера. Я сделал отрицательный отступ, чтобы картинка не отступала, а наоборот заходила внутрь родительского объекта.
выводишь основной контент с отступом от верха (marging'ом) по высоте шапки.. шаку выводишь в самом конце, единственным дивом с absolute позиционированием, top и left - 0, width:100%, height - сколько надо.. все элементы внутри раскидываешь в нем опять же абсолютным позиционированием (куст тоже - див по размеру с фоном куста, чтоб пустого квадрата во время загрузки картинки небыло).. для оформления формы удобнее будет использовать таблицу.. иконки "поиск", "домой" и "почта" лучше собрать на одной картинке и ставить позиционированным фоном в соответствующую ссылку (display:block; width и height - размер иконки)..