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


Пользователь месяца
Андрей WPMasterKZ Андрей WPMasterKZ 1-й за Ноябрь
Очков активности: 888 1 тема, 71 сообщение, 8 баллов репутации
Сайт: wpmaster.kz
ТОП самых активных за этот месяц
  • Фотография OlgaGetman
    #1

    OlgaGetman
    Очков активности: 684 5 тем, 99 сообщений, 4 балла репутации

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

    Mandarin
    Очков активности: 552 3 темы, 83 сообщения, 4 балла репутации

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

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

  • Фотография Андрей WPMasterKZ
    #4

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 117 Вне конкурса за определение пользователя месяца

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

    BLIK
    Очков активности: 102 0 тем, 17 сообщений, 4 балла репутации

  • Фотография Rodiola
    #6

    Rodiola
    Очков активности: 48 1 тема, 13 сообщений, 2 балла репутации

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

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

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

    pozitron123
    Очков активности: 27 2 темы, 12 сообщений, 1 балл репутации

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

    thisismyname
    Очков активности: 27 4 темы, 6 сообщений, 1 балл репутации

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

    m3Re
    Очков активности: 22.5 2 темы, 9 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.11.2018
  • Яндекс выдача: 11.12.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

#2 Matt

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

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

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

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

#3 yury

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

Отправлено 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

#11 byzantiner

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

Отправлено 24 September 2010 - 04:45

Всем доброе время суток! Т.к. это первое мое сообщение на форуме, благодарю его создателей и участников за эту возможность общения.

Пожалуйста, помогите разобраться.

В Safari и Chrome изображения-ссылки сдвигаются вниз и вправо (видимо из-за установок всплывающих картинок). Причём при перезагрузке страницы одни из них выравниваются, как и должны быть, а другие остаются сдвинутыми.

Изображение

Изображение

Homepage:
http://art-factor.gm...lde-Grafik.html

<td width="34%">
<a class="thumbnail" href="XF-">
<img class="a" src="http://i.flamber.ru/...84286996_e.jpg" alt="Meerjungfrau - Sergey Samoylenko">
<span><img src="http://i.flamber.ru/...84286996_f.jpg" alt="Meerjungfrau - Sergey Samoylenko"></span><br>
Meerjungfrau</a>
</td>

.thumbnail { position: relative; z-index: 0; }
.thumbnail:hover { background-color: transparent; z-index: 50; }
.thumbnail span { position: absolute; background-color: #00060C; padding: 10px; left: 0px /* -1000px */;
border: 1px solid #5594CF; visibility: hidden; color: 222222; text-decoration: none; }
.thumbnail span img { border-width: 0; padding: 2px; }
.thumbnail:hover span { visibility: visible; top: 5%; left: 5%; }


Подскажите в чём тут дело.

Заранее благодарен за ваши ответы.
  • 0

#12 ZiTosS

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

Отправлено 26 September 2010 - 15:20

byzantiner, скорее всего ошибка в том, что вы ссылке не указали display: block;
Если не поможет, будем думать дальше ;)
  • 0

#13 byzantiner

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

Отправлено 26 September 2010 - 20:23

Да, это помогло в Safari и Chrome ))!

.thumbnail { display: block; }

Спасибо!

Только IE продолжает буровить - всплывающие картинки появляются под картинками окружающих ссылок,,,


  • 0

#14 Matt

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

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

А какой IE? Вот, например, та проблема о которой я писал была на одном из старых IE, а на свежем её нет.
  • 0

#15 ZiTosS

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

Отправлено 26 September 2010 - 20:45

byzantiner, попробуйте для span так же указать z-index
.thumbnail span
{
   z-index: 52;
}
P.s.: уважайте других пользователей форума, оформляйте код в bb-теги, чтобы он был читабельным.
  • 0

#16 byzantiner

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

Отправлено 04 October 2010 - 19:29

Пробовал добавлять

z-index: 52;
и к
.thumbnail span
и к
.thumbnail:hover span
Пробовал увеличивать z-index в .thumbnail:hover span, а в .thumbnail span уменьшать, и наоборот.
Ничего не помогает.

:)

Matt
IE-8
  • 0

#17 ZiTosS

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

Отправлено 04 October 2010 - 23:48

byzantiner, попробуйте тогда увеличить z-index у картинки большой - .thumbnail:hover span img
Была как-то такая же проблема, таке и не избавился от неё. Исправил только смещением.
  • 0

#18 byzantiner

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

Отправлено 07 October 2010 - 17:45

Вот что помогло:
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Аккуратность и Точность таки очень важны в вёрстке :rolleyes:


  • 0

#19 ZiTosS

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

Отправлено 09 October 2010 - 00:14

byzantiner, а у вас до этого хотя бы какой-нить доктайп стоял? Если нет, то причина очевидна:
IE при отсутствии доктайпа переходит в режим совместимости (quirk mode).
  • 0

#20 byzantiner

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

Отправлено 12 October 2010 - 20:13

Да стояло, конечно. Но только половина от необходимого:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


  • 0

robot

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


Похожие темы

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

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