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


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
ShowPrint ShowPrint 1-й за Март
Очков активности: 1 152 1 тема, 61 сообщение, 12 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

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

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

    Vmir
    Очков активности: 456 3 темы, 29 сообщений, 8 баллов репутации

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

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

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

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

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

    Mandarin
    Очков активности: 112.5 3 темы, 16 сообщений, 3 балла репутации

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

    pozitron123
    Очков активности: 67.5 3 темы, 6 сообщений, 3 балла репутации

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

    maxnik (konovalovpavel.ru)
    Очков активности: 66 1 тема, 19 сообщений, 2 балла репутации

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

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

  • Фотография re-search
    #9

    re-search
    Очков активности: 49.5 7 тем, 12 сообщений, 1 балл репутации

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

    Strazh
    Очков активности: 37.5 1 тема, 22 сообщения, 1 балл репутации

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


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

#1 kapadult

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

Отправлено 21 Август 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
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 21 Август 2009 - 14:32

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


  • 0

#3 kapadult

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

Отправлено 21 Август 2009 - 16:01

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

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

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

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


  • 0

#4 ZiTosS

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

Отправлено 21 Август 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 Август 2009 - 14:21

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


  • 0

#6 Евгений

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

Отправлено 22 Август 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 Август 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 Август 2009 - 17:18

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

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

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

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

#9 kapadult

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

Отправлено 22 Август 2009 - 17:26

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


  • 0

#10 Евгений

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

Отправлено 22 Август 2009 - 18:42

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

#11 ZiTosS

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

Отправлено 22 Август 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
  • 2 652 сообщений
  • Репутация: 85


Похожие темы

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

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