Как отцентрировать картинку?

Как отцентрировать картинку?

Logger написал(а):

Еще вопрос - хочется отцентрировать картинку. Для Аэры сработал такой способ

Код:

*P '<div style="text-align:center;"><img src="/nex/ivan/photo_1.jpg"/></div><br/>'

Но в обычном QSP 5.65 картинка остается прижатой слева.

Изменено: Byte
09.Апр.10 10:38:57
Nex
useravatar
Offline
4277 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Re: Как отцентрировать картинку?

Можно тег картинки заключить в тег <center> - он работает и на Аэре, и на обычном.

Byte
useravatar
Offline
586 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Re: Как отцентрировать картинку?

Спасибо. Тогда нужно подправить документацию к Аэре, там этот тег не заявлен http://qsp.su/misc/aero/qsp.txt

Еще вопрос - а как можно наложить одну картинку на другую? Спрайт героя на картинку-фон.

Logger
useravatar
Offline
33 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Re: Как отцентрировать картинку?

Например

Код:

<div style="background-image:image.png"><img src="hero.png" /></div>

Можно внутри div'а сделать еще несколько div'ов, у которых будут свои картинки на фоне и т.д. - любое число слоев.

Byte
useravatar
Offline
586 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Re: Как отцентрировать картинку?

Поддерживается абсолютное позиционирование, например:

Код:

<div style="background-image:image.png"><img style="position:absolute;left:100;top:100" src="/nex/hero.png" /></div>

Byte
useravatar
Offline
586 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Re: Как отцентрировать картинку?

Byte написал(а):

Поддерживается абсолютное позиционирование

Увы-увы...что-то мне не удалось наложить картинки.

Такой вариант не показывает фоновую картинку

Код:

*P '<div style="background-image:ivan/guslars.jpg"><img style="position:absolute;left:100;top:50" src="/ivan/face-grin.png"/></div>'

А такой - показывает картинки рядом, а не слоями

Код:

*P '<div style="background-image:ivan/guslars.jpg;"><img style="position:absolute;left:0;top:0;" src="/ivan/guslars.jpg"/><img 

На всякий случай - прикладываю исходники.

Sample1.zip
Sample2.zip

Logger
useravatar
Offline
33 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Re: Как отцентрировать картинку?

Нужно явно указать ширину и высоту блока:

Код:

*P '<div style="background-image:ivan/guslars.jpg;width:280;height:206"><img style="position:absolute;left:100;top:50" src="ivan/face-grin.png"/></div>'

Byte
useravatar
Offline
586 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Re: Как отцентрировать картинку?

Кстати, не указывая размеры можно проще:

Код:

*P '<img src="ivan/guslars.jpg"><img style="position:absolute;left:100;top:50" src="ivan/face-grin.png">'

Здесь выводим картинку, а картинку "рядом" позиционируем абсолютно.

Byte
useravatar
Offline
586 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Re: Как отцентрировать картинку?

Нашел причину - это работает только в Аэре. По порядку. Имеем следующий код (скачать тут)

Код:

#start

showinput 0
KILLALL
USEHTML=1
CLOSE ALL
*PL 'First'
*PL '<center><div style="background-image:ivan/guslars.jpg;width:280;height:206"><img style="position:absolute;left:100;top:50" src="/ivan/face-grin.png"/></div></center>'
*PL 'Second'
*PL '<center><img src="/ivan/guslars.jpg"><img style="position:absolute;left:100;top:50" src="/ivan/face-grin.png"></center>'
*PL 'Text'
-

На Аэре это выглядит так:http://qsp.su/components/com_agora/img/members/23/mini_Images-in-Aero2.jpeg
А в обычном QSP (5.6.5) так http://qsp.su/components/com_agora/img/members/23/mini_Images-in-Aero.jpeg

То есть, получается, что есть 2 проблемы
1) Аэра по разному отрабатывает абсолютное позиционирование для показа фоновой картинки через div и img
2) Обычный QSP-плеер не поддерживает абс. позиционирование вообще...или я что-то не так сделал.

Logger
useravatar
Offline
33 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Re: Как отцентрировать картинку?

1. Абсолютное позиционирование обрабатывается одинаково, просто родительские контейнеры смещены по-разному в 2х случаях. Абсолютное позиционирование считается по координатам контейнера-родителя.
В первом случае позиционируется относительно div, т.к. img находится в нем.
Во втором случае позиционируется относительно center, т.к. img находится в center.

2. Обычный плеер не поддерживает абсолютное позиционирование.

Byte
useravatar
Offline
586 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Информация

Статистика форума:
 
Всего тем:
974
Всего опросов:
14
Всего сообщений:
16790588
Сообщений на этой неделе:
3
Пользователи форума:
 
Всего пользователей:
2371
Последним зарегистрировался:
Artog