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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Ссылки за которые не стыдно! Качественный линк билдинг сервис под Бурж от Westrank. Честный прайс.
63 DaoDog 47171 Вчера, 12:05
автор: Omaxis
Открытая тема (нет новых ответов) Прототипирование + дизайн + вёрстка = красивый и эффективный сайт под ключ
0 bunneh 349 16.4.2024, 18:02
автор: bunneh
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыBurzh.top|Партнерская программа под любой вид трафика (email, спам, УБТ)
2 cryptius 763 16.4.2024, 17:50
автор: cryptius
Горячая тема (нет новых ответов) Hyper.hosting - сервера под любые задачи [разрешены dmca, гэмблинг, адалт и пр.]
Лучшие сервера по доступной цене
32 Hyper_Hosting 9146 15.4.2024, 13:03
автор: Hyper_Hosting
Открытая тема (нет новых ответов) SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией
20 Needmylink1 7001 12.4.2024, 23:32
автор: Needmylink1


 



RSS Текстовая версия Сейчас: 20.4.2024, 7:23
Дизайн