Наложение 2 изображений друг на друга

@Darius512 · Регистрация: 11.10.2014

Мучался, мучался, сам не додумался, нужна помощь

Есть 2 изображения, ну и обычный див блок, который располагается под ними . Нужно наложить изображение друга на друга. А блок оставить под ними. Стоит отметить, что изображений может быть много, т.к. это будущее слайд шоу

CSS

.span12 { width: 100%;   } 
.block{
height: 44px;
background: #000;
}

HTML5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="slide span12">
    <img class="span12" src="http://4.bp.blogspot.com/-zx12s34xIYo/T4aXJ1p5_vI/AAAAAAAABTQ/8fJ5Nm_ARgo/s1600/Alizee-Cute-Wallpaper.jpg" alt="">
    <img class="span12" src="http://4.bp.blogspot.com/-2POgtPm6vwI/T30OkhZizzI/AAAAAAAAMwg/JzzXIVHwiPU/s1600/Foto-Aliz%C3%A9e-33.jpg" alt="">
</div>
<div class="block span12"></div>
        
    
</body>
</html>

Вроде сначала казалось все просто для меня. Пытался позиционированием абсолютным и и относительным, но то изображения не накладываются, то блок позиционируется не правильно. Крч я нуб, помогите написать стили

@Fedor92 · 06.11.2014, 12:48

А не проще слайдер прикрутить или карусельку...?

@Darius512 · 06.11.2014, 12:59 **[ТС]**

Ну может быть проще, но я сам хочу сделать...

@Fedor92 · 06.11.2014, 13:04

Просто для того, чтобы просматривать изображения Вам понадобится js в любом случае, а если конечно хотите просто положить картинки друг на друга свойство z-index в помощь...

@Darius512 · 06.11.2014, 13:07 **[ТС]**

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

@Fedor92 · 06.11.2014, 13:20

Уберёте свойства top и left и они будут друг под другом...

Сообщение от Darius512

наложить никак не могу)

Не наложить, а покласть...

@Darius512 · 06.11.2014, 15:23 **[ТС]**

Так не катит.. Нужно чтобы слайд был резиновым

@Fedor92 · 06.11.2014, 15:33

Я не вкуриваю в чём проблема...? Сначала спрашиваете, как один слайд положить на другой - теперь не катит потому-что он не резиновый... Не судьба сразу написать, что Вам нужно? Установите ширину и высоту родительского дива в процентах и он будет резиновым...

@Darius512 · 07.11.2014, 12:36 **[ТС]**

В вопросе все написано. В разметке указана ширина 100%.

@Fedor92 · 07.11.2014, 12:46

Я вообще-то код написал для примера, а не под Ваши условия...

@Darius512 · 07.11.2014, 12:59 **[ТС]**

Ну вот.. Мне это не подходит. Высота должна быть авто. Ширина 100%. Вот пример нашел. calibreclub.com/ Т.е. там слайд масштабируется пропорционально. Не пойму как так сделать.

@Fedor92 · 07.11.2014, 13:06

И что Вам мешает задать ширину 100% и авто высоту позвольте спросить?

@Darius512 · 07.11.2014, 13:18 **[ТС]**

Когда я э\то делаю, следующий блок, который должен располагаться под ними, уходит вверх. Как его опустить на свое место..
Вот в общем смотри, там написал все: test.rar

@Fedor92 · 07.11.2014, 13:39

Это из - за картинок, которые имеют абсолютное позиционирование... Надо прикинуть нет неразрешимых задач... Прикину немного выложу код...

@Darius512 · 07.11.2014, 13:43 **[ТС]**

ок, попробуй пожалуйста, может у тебя получится

Я 2-ой день мучаюсь, сейчас пытаюсь скрипт написать, раз со стилями не выхходит.. Не получается пока. Идея вроде есть

@Fedor92 · 07.11.2014, 14:27

Ну я думаю по коду смысл понятен... Но в любом случае понадобится использовать абсолютное позиционирование - хотя это не есть хорошо... Можно попробовать fixed, как вариант...

@Darius512 · 07.11.2014, 14:32 **[ТС]**

Ладно, наверное скачаю просто слайдшоу адаптивное и не буду мучаться. Но вопрос остается открытым..

@Fedor92 · 07.11.2014, 14:36

Darius512 какой вопрос? Изображения лежат друг на друге и блок под ними...

@Darius512 · 07.11.2014, 14:40 **[ТС]**

Этот, какой же еще.. Я так и не получил желаемого результата. Высота должна быть auto, пропорциональна ширине.

@Fedor92 · 07.11.2014, 14:50

Вы понимаете, что если у вас высота будет пропорционально ширине - картинки будут занимать всё окно браузера и блок Ваш уже никуда не влезет? Это же резинка...!!!

Добавлено через 6 минут
Для дива в который они вложены установить свойства width:100%; height:auto...

@Darius512 0 / 0 / 0 Регистрация: 11.10.2014 Сообщений: 19
	07.11.2014, 14:32 [ТС]	17
	Ладно, наверное скачаю просто слайдшоу адаптивное и не буду мучаться. Но вопрос остается открытым.. 0

@Darius512 0 / 0 / 0 Регистрация: 11.10.2014 Сообщений: 19
	07.11.2014, 14:40 [ТС]	19
	Этот, какой же еще.. Я так и не получил желаемого результата. Высота должна быть auto, пропорциональна ширине. 0

@Fedor92 2961 / 2580 / 1068 Регистрация: 15.12.2012 Сообщений: 9,734 Записей в блоге: 11
	06.11.2014, 12:48	2
	А не проще слайдер прикрутить или карусельку...? 0

@Darius512 0 / 0 / 0 Регистрация: 11.10.2014 Сообщений: 19
	06.11.2014, 12:59 [ТС]	3
	Ну может быть проще, но я сам хочу сделать... 0

@Fedor92 2961 / 2580 / 1068 Регистрация: 15.12.2012 Сообщений: 9,734 Записей в блоге: 11
	06.11.2014, 13:04	4
	Просто для того, чтобы просматривать изображения Вам понадобится js в любом случае, а если конечно хотите просто положить картинки друг на друга свойство z-index в помощь... 0

@Darius512 0 / 0 / 0 Регистрация: 11.10.2014 Сообщений: 19
	06.11.2014, 13:07 [ТС]	5
	скрипт-то я написать смогу.. наложить никак не могу) Скрипт будет простенький. Одно изображение исчезает, следущее появляется и т.д.. 0

@Darius512 0 / 0 / 0 Регистрация: 11.10.2014 Сообщений: 19
	06.11.2014, 15:23 [ТС]	7
	Так не катит.. Нужно чтобы слайд был резиновым 0

@Fedor92 2961 / 2580 / 1068 Регистрация: 15.12.2012 Сообщений: 9,734 Записей в блоге: 11
	06.11.2014, 15:33	8
	Я не вкуриваю в чём проблема...? Сначала спрашиваете, как один слайд положить на другой - теперь не катит потому-что он не резиновый... Не судьба сразу написать, что Вам нужно? Установите ширину и высоту родительского дива в процентах и он будет резиновым... 0

@Darius512 0 / 0 / 0 Регистрация: 11.10.2014 Сообщений: 19
	07.11.2014, 12:36 [ТС]	9
	В вопросе все написано. В разметке указана ширина 100%. 0

@Fedor92 2961 / 2580 / 1068 Регистрация: 15.12.2012 Сообщений: 9,734 Записей в блоге: 11
	07.11.2014, 12:46	10
	Я вообще-то код написал для примера, а не под Ваши условия... 0

@Darius512 0 / 0 / 0 Регистрация: 11.10.2014 Сообщений: 19
	07.11.2014, 12:59 [ТС]	11
	Ну вот.. Мне это не подходит. Высота должна быть авто. Ширина 100%. Вот пример нашел. calibreclub.com/ Т.е. там слайд масштабируется пропорционально. Не пойму как так сделать. 0

@Fedor92 2961 / 2580 / 1068 Регистрация: 15.12.2012 Сообщений: 9,734 Записей в блоге: 11
	07.11.2014, 13:06	12
	И что Вам мешает задать ширину 100% и авто высоту позвольте спросить? 0

Опции темы

@Darius512 0 / 0 / 0 Регистрация: 11.10.2014 Сообщений: 19
	07.11.2014, 13:18 [ТС]	13
	Когда я э\то делаю, следующий блок, который должен располагаться под ними, уходит вверх. Как его опустить на свое место.. Вот в общем смотри, там написал все: test.rar 0

@Fedor92 2961 / 2580 / 1068 Регистрация: 15.12.2012 Сообщений: 9,734 Записей в блоге: 11
	07.11.2014, 13:39	14
	Это из - за картинок, которые имеют абсолютное позиционирование... Надо прикинуть нет неразрешимых задач... Прикину немного выложу код... 0

@Darius512 0 / 0 / 0 Регистрация: 11.10.2014 Сообщений: 19
	07.11.2014, 13:43 [ТС]	15
	ок, попробуй пожалуйста, может у тебя получится Я 2-ой день мучаюсь, сейчас пытаюсь скрипт написать, раз со стилями не выхходит.. Не получается пока. Идея вроде есть 0

@Fedor92 2961 / 2580 / 1068 Регистрация: 15.12.2012 Сообщений: 9,734 Записей в блоге: 11
	07.11.2014, 14:36	18
	Darius512 какой вопрос? Изображения лежат друг на друге и блок под ними... 0

@Fedor92 2961 / 2580 / 1068 Регистрация: 15.12.2012 Сообщений: 9,734 Записей в блоге: 11
	07.11.2014, 14:50	20
	Вы понимаете, что если у вас высота будет пропорционально ширине - картинки будут занимать всё окно браузера и блок Ваш уже никуда не влезет? Это же резинка...!!! Добавлено через 6 минут Для дива в который они вложены установить свойства width:100%; height:auto... 0