Как разместить один рисунок под другим?

[Марат]

Здравствуйте!

 

Вопрос скорее всего простой, но мне уже лень и нет времени разбираться...

 

Как разместить один рисунок под другим (body.png под header.png)?

http://jsfiddle.net/podr5m94/

 

Сразу предупреждаю что ответы типа: "изучай HTML" или "учи Мат.часть" не принимаются. Специально для этого и пишу в ветке "Сделайте мне бесплатно"...

[Vlad]

Уберите абсолютное позиционирование для блоков, да и вообще весь стиль для .parent и картинки сами встанут друг под другом.

http://jsfiddle.net/podr5m94/1/

 

Если такое позиционирование принципиально, то к .parent надо новый класс добавить и для него указать новый top.

[Марат]

Уберите абсолютное позиционирование для блоков, да и вообще весь стиль для .parent и картинки сами встанут друг под другом.

http://jsfiddle.net/podr5m94/1/

 

Если такое позиционирование принципиально, то к .parent надо новый класс добавить и для него указать новый top.

 

Позиционирование наверное принципиально, так как я хочу чтобы эти рисунки всегда были по центру при любых разрешениях, причем картинки должны автоматически уменьшаться с размерами экранов. Исходный код взял из статьи на Хабре http://habrahabr.ru/post/238449/

 

Вопрос для меня все равно не решен...

[ShumNo]

http://jsfiddle.net/podr5m94/2/

[atlanta]

 

Уберите абсолютное позиционирование для блоков, да и вообще весь стиль для .parent и картинки сами встанут друг под другом.

http://jsfiddle.net/podr5m94/1/

 

Если такое позиционирование принципиально, то к .parent надо новый класс добавить и для него указать новый top.

 

Позиционирование наверное принципиально, так как я хочу чтобы эти рисунки всегда были по центру при любых разрешениях, причем картинки должны автоматически уменьшаться с размерами экранов. Исходный код взял из статьи на Хабре http://habrahabr.ru/post/238449/

 

Вопрос для меня все равно не решен...

 

вы ни когда это ни сделаете через absolute - у вас одинаковый adsolute для этих элементов но есть другой способ -

 

http://jsfiddle.net/atlanta/podr5m94/3/

 

http://codepen.io/anon/pen/PPMmjB?editors=110

Edited November 29, 2015 by atlanta

[atlanta]

http://jsfiddle.net/podr5m94/2/

а теперя сожмите экран на jsfiddle - и посмотрите как это выглядит на мобилке - тот отступ в 100рх - это ужос

[Марат]

Спасибо конечно за ваши решения, но все равно какой то отступ большой между картинками...

[ShumNo]

 

http://jsfiddle.net/podr5m94/2/

а теперя сожмите экран на jsfiddle - и посмотрите как это выглядит на мобилке - тот отступ в 100рх - это ужос

 

Надо положить их в один контейнер - этот контейнер позиционировать как угодно

картинки сделать одинаковой ширины без позиционирования внутри контейнера

тогда задача должна выполняться

[Марат]

 

 

http://jsfiddle.net/podr5m94/2/

а теперя сожмите экран на jsfiddle - и посмотрите как это выглядит на мобилке - тот отступ в 100рх - это ужос

 

Надо положить их в один контейнер - этот контейнер позиционировать как угодно

картинки сделать одинаковой ширины без позиционирования внутри контейнера

тогда задача должна выполняться

 

А без изменения ширины картинок - никак?

[Igor Schnaider]

А без изменения ширины картинок - никак?

Тогда придется отступы настраивать у картинки. Например, для 'body.png' это будет 50px * 100% / 700px = 7.1428%.

[Марат]

Может мне проще отказаться от рисунков и сделать обычным текстом (но чтобы был такой же дизайн)?

[atlanta]

Может мне проще отказаться от рисунков и сделать обычным текстом (но чтобы был такой же дизайн)?

мне кажется это реально - просто вы применили absolute - и из за этого геморой такая !! я вам дал ссылки на моё решение - и оно адаптивное решение - выбирайте

[Марат]

Может мне проще отказаться от рисунков и сделать обычным текстом (но чтобы был такой же дизайн)?

Совсем без рисунков не обойтись конечно, фото лица все равно желательно включить, только не знаю как это сделать...