0 / 0 / 0
Регистрация: 11.10.2014
Сообщений: 19
1

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

06.11.2014, 12:38. Показов 7866. Ответов 19
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Мучался, мучался, сам не додумался, нужна помощь Есть 2 изображения, ну и обычный див блок, который располагается под ними . Нужно наложить изображение друга на друга. А блок оставить под ними. Стоит отметить, что изображений может быть много, т.к. это будущее слайд шоу
CSS
1
2
3
4
5
.span12 { width: 100%;   } 
.block{
height: 44px;
background: #000;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>
Вроде сначала казалось все просто для меня. Пытался позиционированием абсолютным и и относительным, но то изображения не накладываются, то блок позиционируется не правильно. Крч я нуб, помогите написать стили
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.11.2014, 12:38
Ответы с готовыми решениями:

Наложение изображений друг на друга
Не получается наложить изображение 4.gpeg на logo.png. Второе изображение то что 4.gpeg просто...

Наложение элементов друг на друга!
на странице одна форма лежит поверх другой, и кнопка формы той что снизу отображается на той что...

наложение составляющих формы друг на друга
Добрый день. сделал форму, которая пошагово дает пользователю право выбора(см. скрин ниже). вот...

Как сделать наложение друг на друга?
#AA2{ margin-left:10%; border-color: transparent transparent transparent red; border-style:...

19
Эксперт HTML/CSS
2964 / 2600 / 1068
Регистрация: 15.12.2012
Сообщений: 9,902
Записей в блоге: 11
06.11.2014, 12:48 2
А не проще слайдер прикрутить или карусельку...?
0
0 / 0 / 0
Регистрация: 11.10.2014
Сообщений: 19
06.11.2014, 12:59  [ТС] 3
Ну может быть проще, но я сам хочу сделать...
0
Эксперт HTML/CSS
2964 / 2600 / 1068
Регистрация: 15.12.2012
Сообщений: 9,902
Записей в блоге: 11
06.11.2014, 13:04 4
Просто для того, чтобы просматривать изображения Вам понадобится js в любом случае, а если конечно хотите просто положить картинки друг на друга свойство z-index в помощь...
0
0 / 0 / 0
Регистрация: 11.10.2014
Сообщений: 19
06.11.2014, 13:07  [ТС] 5
скрипт-то я написать смогу.. наложить никак не могу) Скрипт будет простенький. Одно изображение исчезает, следущее появляется и т.д..
0
Эксперт HTML/CSS
2964 / 2600 / 1068
Регистрация: 15.12.2012
Сообщений: 9,902
Записей в блоге: 11
06.11.2014, 13:20 6
Уберёте свойства top и left и они будут друг под другом...

Цитата Сообщение от Darius512 Посмотреть сообщение
наложить никак не могу)
Не наложить, а покласть...
Вложения
Тип файла: 7z test.7z (46.1 Кб, 23 просмотров)
0
0 / 0 / 0
Регистрация: 11.10.2014
Сообщений: 19
06.11.2014, 15:23  [ТС] 7
Так не катит.. Нужно чтобы слайд был резиновым
0
Эксперт HTML/CSS
2964 / 2600 / 1068
Регистрация: 15.12.2012
Сообщений: 9,902
Записей в блоге: 11
06.11.2014, 15:33 8
Я не вкуриваю в чём проблема...? Сначала спрашиваете, как один слайд положить на другой - теперь не катит потому-что он не резиновый... Не судьба сразу написать, что Вам нужно? Установите ширину и высоту родительского дива в процентах и он будет резиновым...
0
0 / 0 / 0
Регистрация: 11.10.2014
Сообщений: 19
07.11.2014, 12:36  [ТС] 9
В вопросе все написано. В разметке указана ширина 100%.
0
Эксперт HTML/CSS
2964 / 2600 / 1068
Регистрация: 15.12.2012
Сообщений: 9,902
Записей в блоге: 11
07.11.2014, 12:46 10
Я вообще-то код написал для примера, а не под Ваши условия...
0
0 / 0 / 0
Регистрация: 11.10.2014
Сообщений: 19
07.11.2014, 12:59  [ТС] 11
Ну вот.. Мне это не подходит. Высота должна быть авто. Ширина 100%. Вот пример нашел. calibreclub.com/ Т.е. там слайд масштабируется пропорционально. Не пойму как так сделать.
0
Эксперт HTML/CSS
2964 / 2600 / 1068
Регистрация: 15.12.2012
Сообщений: 9,902
Записей в блоге: 11
07.11.2014, 13:06 12
И что Вам мешает задать ширину 100% и авто высоту позвольте спросить?
0
0 / 0 / 0
Регистрация: 11.10.2014
Сообщений: 19
07.11.2014, 13:18  [ТС] 13
Когда я э\то делаю, следующий блок, который должен располагаться под ними, уходит вверх. Как его опустить на свое место..
Вот в общем смотри, там написал все: test.rar
0
Эксперт HTML/CSS
2964 / 2600 / 1068
Регистрация: 15.12.2012
Сообщений: 9,902
Записей в блоге: 11
07.11.2014, 13:39 14
Это из - за картинок, которые имеют абсолютное позиционирование... Надо прикинуть нет неразрешимых задач... Прикину немного выложу код...
0
0 / 0 / 0
Регистрация: 11.10.2014
Сообщений: 19
07.11.2014, 13:43  [ТС] 15
ок, попробуй пожалуйста, может у тебя получится Я 2-ой день мучаюсь, сейчас пытаюсь скрипт написать, раз со стилями не выхходит.. Не получается пока. Идея вроде есть
0
Эксперт HTML/CSS
2964 / 2600 / 1068
Регистрация: 15.12.2012
Сообщений: 9,902
Записей в блоге: 11
07.11.2014, 14:27 16
Ну я думаю по коду смысл понятен... Но в любом случае понадобится использовать абсолютное позиционирование - хотя это не есть хорошо... Можно попробовать fixed, как вариант...
Вложения
Тип файла: 7z test.7z (46.4 Кб, 11 просмотров)
0
0 / 0 / 0
Регистрация: 11.10.2014
Сообщений: 19
07.11.2014, 14:32  [ТС] 17
Ладно, наверное скачаю просто слайдшоу адаптивное и не буду мучаться. Но вопрос остается открытым..
0
Эксперт HTML/CSS
2964 / 2600 / 1068
Регистрация: 15.12.2012
Сообщений: 9,902
Записей в блоге: 11
07.11.2014, 14:36 18
Darius512 какой вопрос? Изображения лежат друг на друге и блок под ними...
0
0 / 0 / 0
Регистрация: 11.10.2014
Сообщений: 19
07.11.2014, 14:40  [ТС] 19
Этот, какой же еще.. Я так и не получил желаемого результата. Высота должна быть auto, пропорциональна ширине.
0
Эксперт HTML/CSS
2964 / 2600 / 1068
Регистрация: 15.12.2012
Сообщений: 9,902
Записей в блоге: 11
07.11.2014, 14:50 20
Вы понимаете, что если у вас высота будет пропорционально ширине - картинки будут занимать всё окно браузера и блок Ваш уже никуда не влезет? Это же резинка...!!!

Добавлено через 6 минут
Для дива в который они вложены установить свойства width:100%; height:auto...
0
07.11.2014, 14:50
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.11.2014, 14:50
Помогаю со студенческими работами здесь

Не могу исправить наложение дивов друг на друга
Доброго времени суток. Делаю табы вообщем. В блоке есть 4 блока с шириной, высотой (на фоне...

Позиционирование изображений относительно друг друга
Есть картинка №1, внутри которой, есть картинка №2, которая спозиционирована относительно №1. При...

Наложение изображений
Как лучше всего зделать етот елемент? У меня есть елементы которые отмечены на фото, как лучше...

Наложить картинки друг на друга
&lt;div class=&quot;layout&quot;&gt; &lt;img id=&quot;layout-1&quot; src=&quot;bow-tie.png&quot; alt=&quot;&quot; style=&quot;z-index:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru