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



 

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

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Картинки на фото
Manson
Manson
Topic Starter сообщение 18.6.2008, 0:34; Ответить: Manson
Сообщение #1


Доброго времени суток!
Прочитал статью http://www.webdesignerwall.com/tutorials/c...rative-gallery/

Все понятно, работает, вобщем все отлично. НО. Появился важный вопрос. Если у нас есть не один графический элемент (тот который позиционируется сверху фото) а скажем три. При этом второй и третий позиционируются по левому и правому краю фотографии соответственно.

Подскажите пожалуйста как такое можно сделать!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 18.6.2008, 0:55; Ответить: Webmaster_hb
Сообщение #2


Manson, не вижу проблем, указывая position: relative ваш объект позиционируется относительного того места где он указан в коде html
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Manson
Manson
Topic Starter сообщение 18.6.2008, 1:30; Ответить: Manson
Сообщение #3


Покажу проблему чисто в внешне.
[IMG]http://img186.imageshack.us/img186/448/z1of7.th.gif[/IMG]
Это если фотка горизонтальная. Сдесь я все ручками спозиционировал как надо. Если ставим фотку вертикальную то получается:
[IMG]http://img395.imageshack.us/img395/337/z2ut4.th.gif[/IMG]

Пускай картинки сьедут чуть ниже, главное чтобы их центр был на линии фотографии.

Вот код с style.css:
[PHP].photo_relative {
position: relative;
width: 130px;
margin-left: auto;
margin-right: auto;
padding-top: 8px;
}
.photo_mood {
display: block;
position: absolute;
top: -4px;
left: 20px;
border: 1px solid #FFFFFF;
}
.photo_present_left {
display: block;
position: absolute;
top: 50px;
left: -20px;
}
.photo_present_right {
display: block;
position: absolute;
top: 50px;
left: 90px;
}[/PHP]

Вот вывод в шаблоне:
[PHP]<div class="photo_relative"><a href="гипер ссылочка"><span>
</span><img src="images/photo.gif" border="0"></a>
<img class="photo_mood" src="/images/mood/nastroenie.gif" alt="Настроение">
<img class="photo_present_left" src="../main_files/bottle.png" border="0">
<img class="photo_present_right" src="../main_files/vip.png" border="0">
</div>[/PHP]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 18.6.2008, 1:54; Ответить: Webmaster_hb
Сообщение #4


значит речь идет немного о другом
т.е. задача стоит поставить поверх блоки, не зная размеров фотографии ???
опять же не вижу проблем, просто стоит подумать откуда отталкиваться ;)
вот пример наложения трех точек на разные фотографии используя везде одинаковые стили
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Manson
Manson
Topic Starter сообщение 18.6.2008, 2:18; Ответить: Manson
Сообщение #5


Спасибо! завтра с утра начну разбирать :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Manson
Manson
Topic Starter сообщение 18.6.2008, 3:14; Ответить: Manson
Сообщение #6


В мозилле идеально. В IE вылезло вот что:
[IMG]http://img412.imageshack.us/img412/8638/z3xt0.th.gif[/IMG]

Может потому что мои картинки намного больше чем в примере pin.png? Как такое поправить? Вобщем уже голова не варит, надо идти спать ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 18.6.2008, 10:04; Ответить: Webmaster_hb
Сообщение #7


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

выложите архив со своим кодмо и картиками, попробуем вместе глянуть
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Manson
Manson
Topic Starter сообщение 18.6.2008, 11:07; Ответить: Manson
Сообщение #8


Вот архивчик. Единственный момент, в оригинале ширина блока 100%, я же сейчас проставил 190, чтобы он на всю страничку не растягивался.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 18.6.2008, 11:29; Ответить: Webmaster_hb
Сообщение #9


Manson,вот переделал ваш пример, и показал на разных картинках пример
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Manson
Manson
Topic Starter сообщение 18.6.2008, 11:50; Ответить: Manson
Сообщение #10


Опять в мозилле все классно, а в IE вот что:

[IMG]http://img78.imageshack.us/img78/4824/gljukok2.th.jpg[/IMG]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКто и зачем покупает картинки обезьян по $200 тысяч?
NFT
167 metvekot 27098 6.3.2024, 21:58
автор: Boymaster
Открытая тема (нет новых ответов) 📌 Рандомизация видео/аудио/фото/текста с минимальным участием - 𝓓𝓮𝓵𝓽𝓪𝓣𝓸𝓸𝓵𝓼
Мы предлагаем комплексное решение для рандомизации всех видов офера
2 leviathan 1340 29.1.2024, 21:29
автор: leviathan
Открытая тема (нет новых ответов) Изготовление контента, наполнение сайтов уникальными авторскими кулинарными рецептами с фото
5 TASJA 4196 4.10.2021, 8:19
автор: nekokatalog
Открытая тема (нет новых ответов) Обеспечу контентом по рукоделию и творчеству (статьи+фото+видео)
5 Вдохновение 2205 30.7.2021, 11:29
автор: EvilGomel
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
10 NikN 2633 6.1.2021, 23:24
автор: buypushplatform


 



RSS Текстовая версия Сейчас: 29.3.2024, 10:13
Дизайн