Есть шапка из нее вылезают слои, как их установить правильно?

Question

[Олег Бабяк]

Здравствуйте, есть psd шаблон со слоями, и макет. Нужно сделать хедер как на скрине, чтобы елементы перекрывались. prntscr.com/6fu77y Знаю что можно сделать это методом в css z-index.
Вопрос: в шаблоне под цифрами 5 и 2 есть код все прописано, как прописать для картинок других чтобы они там появились и задать им такие свойства. Очень надо, посоветуйте.

Answer 1

[SerzN1]

0. в таких чудесных случаях когда не нужна резина - вырезают просто jpg и кладут в фон
1. в случаях резины - режешь png и позиционируешь абсолютно в % (или left:50% и margin-left:) каждый слой отдельно, а по верху пускаешь интерактивные элементы (ссылки, hover) иногда возможно дублирование элемента (1н отвечает за функционал - ссылка с лого, другой за красоту - картинка лого)

Comments

[SerzN1]

могу сделать - не бесплатно :)

[Олег Бабяк]

спасибо, сам делаю.

Answer 2

[Дмитрий Б]

Сделай два изображения облаков, левые и правые, хотя можно и одним. С помощью position: absolute размести их в шапке

Comments

[Олег Бабяк]

Отдельно изображения вырезал, как из задать, задавал их кодом в header


.timedata img {
position:relative;
top:20px;
left:250px
width:200px;
hidht:50px;
}

Но ничего не работает.

[Олег Бабяк]

На данный момент все выгледит так: prntscr.com/6fubjz

[Дмитрий Б]

Правильно было бы сделать div с фонов в виде картинки, но скажу более простой вариант.
Присвой шапке position: relative;
Вставь в шапку картнику с облаком и присвой класс cloud-1
В css пропиши
.cloud-1 {
position: absolute;
top: 0;
left: 0;
}

[Олег Бабяк]

Ничего не происходит, сделал как говорили. Вставил картинку с класом в
html и прописал css, обновил, молчит.

Answer 3

[Ilya Korablev]

Вы изображение лучше сюда загрузили, а то не видно в чем проблема.

Answer 4

[Олег Бабяк]

Comments

[Олег Бабяк]

'Элементы с номерами 1 - это корона и желтая повязка "October" уже есть на странице, как сделать остальные?