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


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография yuran
    #1

    yuran (yurbol.ru)
    Очков активности: 79.5 0 тем, 53 сообщения, 1 балл репутации

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

    ShowPrint (ShowPrint.ru)
    Очков активности: 58.5 Вне конкурса за определение пользователя месяца

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

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

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

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

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

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

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

    Ixman (o5cat.ru)
    Очков активности: 36 Вне конкурса за определение пользователя месяца

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

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

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

    Mariko
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Фотография алексс
    #9

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

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

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 13.11.2018
Топ 5 участников по репутации


Помогите с css в опере

#1 kapadult

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

Отправлено 21 August 2009 - 13:27

Привет всем! Помогите разобраться с css. В общем проблема в следующем, мне нужно чтобы при наведении на ссылку, в необходимом месте всплывала картинка. В IE и Firefox все рабоотает нормально, а вот в Опере почему-то картинка смещена намного вниз. С чем это может быть связано?

Код ссылки я описывать не буду, там просто добавляется class="picture", а вот css код посмотрите:

.picture{ 
position: relative; 
z-index: 0; 
} 
.picture:hover{
background-color: #CECECE; 
z-index: 0px;
} 
.picture span{
position: absolute; 
background-color: #CECECE; 
padding: 5px;
left: 150px; 
border: 1px dashed gray; 
visibility: hidden; 
color: #CECECE; 
text-decoration: none; 
} 
.picture span img{ 
border-width: 0; 
padding: 0px;
} 
.picture:hover span{
visibility: visible; 
top: -3px;
left: 740px;
}

 

 

  • 0

#2 yury

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

Отправлено 21 August 2009 - 14:32

kapadult,
вы бы код таки показали достаточно полный, на котором можно увидеть описанное смещение.
Потому как у меня ничего сколько-нить заметно не смещается, а гадать, в чем у меня и у вас разница - неинтересно.


  • 0

#3 kapadult

kapadult
    Topic Starter
  • Неактивные
  • 5 сообщений
  • Репутация: 0

Отправлено 21 August 2009 - 16:01

так я вроде все описал... :rolleyes:

тот код вставляю в теги <STYLE>, а ссылка при наведении на которую появляется картинка имеет такой вид:

<a class="picture" href="http://xxx.com/" target="_blank"></a>

в IE картинка появляется в нужном месте, а вот в опере она смещена...


  • 0

#4 ZiTosS

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

Отправлено 21 August 2009 - 21:44

kapadult, попробуйте так:
.picture{ 
position: relative;
z-index: 0; 
} 
.picture:hover{
background-color: #CECECE; 
z-index: 0px;
} 
.picture span{
position: absolute; 
background-color: #CECECE; 
padding: 5px;
left: 150px; 
border: 1px dashed gray; 
display: none; 
color: #CECECE; 
text-decoration: none; 
} 
.picture span img{ 
border-width: 0; 
padding: 0px;
} 
.picture:hover span{
display: block;
top: -3px;
left: 740px;
}

  • 0

#5 kapadult

kapadult
    Topic Starter
  • Неактивные
  • 5 сообщений
  • Репутация: 0

Отправлено 22 August 2009 - 14:21

Не прокатывает... :) Мне тут еще посоветовали минусовое значение в top'e убрать, что тип невалидное значение, но и это не помогло... Главное, такой косяк почему только у оперы. Если кто не понял проблему, то объяняю - картинка, которая должна поялвяться в опр. месте, смещена ровно вниз. Хотя в других браузерах все нормально!


  • 0

#6 Евгений

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

Отправлено 22 August 2009 - 15:43

kapadult, у меня такое чувство что вы что то скрываете xD)

<a class="picture" href="http://xxx.com/" target="_blank"></a>

не верю что ссылки имеют такой вид.

иначе зачем в коде

.picture span{}
.picture span img{ }


я записал точно так же как вы все выложили, у меня не то что там что то смещается, у меня вообще ниче не происходит xD) а гадать что там у вас как ссылка в реале выглядит и что смещается я не хочу... либо выкладывайте весь код, либо ждите телепатов
  • 0

#7 kapadult

kapadult
    Topic Starter
  • Неактивные
  • 5 сообщений
  • Репутация: 0

Отправлено 22 August 2009 - 17:04

Да ничего я не скрываю!)) просто span c картинкой не дописал, но я не думаю что это кардинально что-то меняет... я имею ввиду мою проблему...

Вот полная ссылка:
 

<a class="picture" href="http://www.masterwebs.ru" target="_blank">Masterwebs<span><img src="index.files/1.jpg" /></span></a>

Мне советовали изменить изменить занчение top на неотрицательное, но это тоже не помогло... :)


  • 0

#8 Евгений

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

Отправлено 22 August 2009 - 17:18

kapadult, вы самую главную часть скрыли

<span><img src="index.files/1.jpg" /></span>

без этой строчки вообще ниче не работало)))

щас вот вижу, но у меня в опере картинка показывается точно там же где и в ie6. где она на самом деле должна быть?
  • 0

#9 kapadult

kapadult
    Topic Starter
  • Неактивные
  • 5 сообщений
  • Репутация: 0

Отправлено 22 August 2009 - 17:26

Евгений, Напротив ссылки справа... В опере она у меня почему-то в правом нижнем углу появляется...


  • 0

#10 Евгений

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

Отправлено 22 August 2009 - 18:42

вот что у меня отображается при наведении на ссылку в опере
1234567.jpg
  • 0

#11 ZiTosS

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

Отправлено 22 August 2009 - 19:57

kapadult,
.picture{ 
position: relative;
display: block;
}
.picture span{
position: absolute;
margin-left: 10px;
background-color: #CECECE; 
padding: 5px;
display: none;
border: 1px dashed gray; 
color: #CECECE; 
text-decoration: none; 
} 
.picture span img{ 
border-width: 0; 
padding: 0px;
} 
.picture:hover span{
display: inline;
}
Вот так у меня блок отображается в 10px справа от текста ссылки. Нормально в FF3 и Opera 9
  • 0

robot

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


Похожие темы

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

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