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


Пользователь месяца
OlgaGetman OlgaGetman 1-й за Декабрь
Очков активности: 2100 10 тем, 170 сообщений, 7 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Ixman
    #1

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

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

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

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

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

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

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

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

    Cheaplinks
    Очков активности: 54 0 тем, 18 сообщений, 2 балла репутации

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

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

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

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

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

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

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

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

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

    magnet (rbfxdirect.com)
    Очков активности: 30 0 тем, 10 сообщений, 2 балла репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 25.12.2018
  • Яндекс выдача: 20.01.2019
Топ 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
  • Пользователь
  • 645 сообщений
  • Репутация: 190

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