X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Изображения под div с background.
astromed
astromed
Topic Starter сообщение 20.6.2013, 21:44; Ответить: astromed
Сообщение #1


Всем привет! Нужна ваша помощь.
У меня есть вот такая рамка [attachment=39673:bg.png]

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

Был такой вариант, но не работают ссылки для перехода.


[CSS]
.thumbnail {
position: relative;
float: left;
height: 200px;
overflow:hidden;
}
.thumbnail img {
border: 0px;
}
.thumbnail span {
position: absolute;
left: 0px;
top: 0px;
width: 647px;
height: 200px;
background: url('bg.png') no-repeat top left;
}
[/CSS]

<div class="thumbnail">
<a href=""><img src="#"/></a>
<a href=""><img src="#"/></a>
<a href=""><img src="#"/></a>
<span></span>
</div>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
khlebnikov
khlebnikov
сообщение 20.6.2013, 22:05; Ответить: khlebnikov
Сообщение #2


http://jsfiddle.net/AkH32/

Вот со ссылкой http://jsfiddle.net/AkH32/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
astromed
astromed
Topic Starter сообщение 20.6.2013, 22:16; Ответить: astromed
Сообщение #3


(khlebnikov @ 21.6.2013, 01:05) *


спасибо, но ссылка на изображение не работает...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
khlebnikov
khlebnikov
сообщение 20.6.2013, 22:19; Ответить: khlebnikov
Сообщение #4


Прошу прощения, не сохранил второй код. Вот правильный вариант: http://jsfiddle.net/zB4fE/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
astromed
astromed
Topic Starter сообщение 20.6.2013, 22:23; Ответить: astromed
Сообщение #5


(khlebnikov @ 21.6.2013, 01:19) *
Прошу прощения, не сохранил второй код. Вот правильный вариант: http://jsfiddle.net/zB4fE/

Видимо моя ошибка не правильно написал, что требуется. Там будут разные три изображения, и надо чтобы на каждом изображение была своя ссылка.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
khlebnikov
khlebnikov
сообщение 20.6.2013, 22:30; Ответить: khlebnikov
Сообщение #6


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

А вообще я бы лучше в этом случае использовал фотошоп для предварительной подготовки изображений с нужными размерами.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
astromed
astromed
Topic Starter сообщение 20.6.2013, 22:36; Ответить: astromed
Сообщение #7


Изображения в фотошопе есть в этой рамке (кодированные), но тут будет в виде слайдера и поэтому надо, чтобы автоматически под рамку уходили фотки... может можно как-то альтернативно сделать?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
khlebnikov
khlebnikov
сообщение 20.6.2013, 22:38; Ответить: khlebnikov
Сообщение #8


(astromed @ 21.6.2013, 01:36) *
может можно как-то альтернативно сделать?

Наверняка можно, но пока в голову пришло только такое решение.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
khlebnikov
khlebnikov
сообщение 21.6.2013, 0:03; Ответить: khlebnikov
Сообщение #9


Ну примерно как-то так: http://jsfiddle.net/3W6Xc/
Функция changer() javascripta должна менять свойства в стилях таким образом, чтобы соответствующая картинка отображалась во весь рост и поверх самого слайдера.
Как по-другому сделать - сложно сказать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
astromed
astromed
Topic Starter сообщение 21.6.2013, 22:26; Ответить: astromed
Сообщение #10


спасибо вам за отклик и попытку помочь, но я сам сделал уже)))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыBurzh.top|Партнерская программа под любой вид трафика (email, спам, УБТ)
3 cryptius 897 Вчера, 14:47
автор: cryptius
Открытая тема (нет новых ответов) Жирные бурж ссылки под крипту
Размещаем статьи на популярных международных сайтах
0 umexa 365 23.4.2024, 23:23
автор: umexa
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыSEO-продвижение USA, Europe, Asia под ключ | Dating, Gambling, Essay и 10+ ниш
3 Needmylink1 1041 23.4.2024, 21:26
автор: Needmylink1
Открытая тема (нет новых ответов) SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией
21 Needmylink1 7189 23.4.2024, 21:16
автор: Needmylink1
Горячая тема (нет новых ответов) Ссылки за которые не стыдно! Качественный линк билдинг сервис под Бурж от Westrank. Честный прайс.
63 DaoDog 47514 19.4.2024, 12:05
автор: Omaxis


 



RSS Текстовая версия Сейчас: 26.4.2024, 2:15
Дизайн