Перейти к содержимому


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 15.08.2018
Топ 5 участников по репутации


Позиционирование картинок

#1 Matt

Matt
  • Неактивные
  • 774 сообщений
  • Репутация: 2
0

Отправлено 09 September 2010 - 12:11

Добавил картинку на страницу в качестве элемента дизайна, но беда в позиционировании - она сдвигается при изменении расширения. Как прописать ей стационарное место?

Шаблон:
<jdoc:include type="modules" name="user1" style="rounded" /><div id="branding"><img alt="кошка" src="http://somalissa.ru/images/foto2/img_1458_267x400_pc.jpg"></div>
<div id="branding1"><img alt="кот" src="http://somalissa.ru/images/foto2/kopija_img_0855_400x267_pc.png"></div>


Стили:
#branding { display: block; position: absolute; top: 195px; right: 190px; }
#branding1 { display: block; position: absolute; top: 325px; left: 190px; }

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Repeat картинки фона по "y" в вертикальном сайт баре
  2. Зафиксировать изображение (резиновый фон)
  3. Как наложить картинку на фон?
  4. Размещение изображения в шапке
  5. Как сделать фоновое изображение по центру экрана.

#2 Matt

Matt
    Topic Starter
  • Неактивные
  • 774 сообщений
  • Репутация: 2

Отправлено 09 September 2010 - 16:49

Не дождавшись ответов, дошёл до всего сам. Надо сделать две вещи:
  • Сделать родительским именно тот блок, поверх которого и будет изображение;
  • Прописать у этого блока position: relative в CSS. Теперь картинка будет позиционироваться относительно родительского блока.

Теперь новая проблема. В IE прозрачный фон картинки переходит в чёрный. Как это исправить?
  • 0

#3 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 09 September 2010 - 19:15

Теперь новая проблема. В IE прозрачный фон картинки переходит в чёрный. Как это исправить?

Если речь о прозрачности в картинке png, то проще всего заменить png на gif ибо IE с png не дружит.

Еще вот рецепт от Микрософта: http://support.microsoft.com/kb/294714

Не отображается прозрачность в файлах PNG в Internet Explorer
Аннотация
При обзоре веб-страницы, содержащей изображение с прозрачным фоном формата Portable Network Graphics (PNG), фон изображения скорее будет отображаться серым, а не прозрачным.
Дополнительная информация
Веб-разработчики, работающие с файлами формата PNG, могут использовать фильтр AlphaImageLoader, как показано в следующем примере:

<html>
<head></head>
<body bgColor="blue">
<!-- This DIV is the target container for the image. -->
<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.png', sizingMethod='scale');" >
</DIV>
</body>
</html>


  • 0

#4 surfer

surfer
  • Заблокированные
  • 1956 сообщений
  • Репутация: 71

Отправлено 09 September 2010 - 20:16

дружище ищем на нашем же форуме :)
http://www.masterweb...rachnost-v-png/
  • 0

#5 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 09 September 2010 - 22:14

Matt, не понимаю, что не даёт тебе сделать картинки фоном блоков :)
  • 0

#6 Matt

Matt
    Topic Starter
  • Неактивные
  • 774 сообщений
  • Репутация: 2

Отправлено 10 September 2010 - 15:05

Думаю, всё понятно?

Прикрепленные изображения

  • Новый_точечный_рисунок.jpg

  • 0

#7 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 10 September 2010 - 19:09

Matt, нет, не понятно. Почему нельзя сделать картинку с прозрачностью и создать отдельный блок с absolute с нужным смещением
  • 0

#8 Matt

Matt
    Topic Starter
  • Неактивные
  • 774 сообщений
  • Репутация: 2

Отправлено 10 September 2010 - 19:38

Я так и сделал
  • 0

#9 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 10 September 2010 - 19:57

Matt, у тебя картинки не фоном в блоке, а как отдельный объект.
  • 0

#10 Matt

Matt
    Topic Starter
  • Неактивные
  • 774 сообщений
  • Репутация: 2

Отправлено 10 September 2010 - 22:24

Теперь понял :) Так мне показалось проще (очень хотелось, чтобы картинка "сидела" именно на другом блоке).
  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru