Войти
  1. ВКонтакте
  2. Facebook
  1. » » » проблемма с позиционированием
Новые публикации Скрыть панель справаПоказать панель справа

проблемма с позиционированием

2013-05-22T20:24:35+04:00 2013-07-02T15:29:24+04:00
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 1 отправлено 20:24, 22.05.2013
Ребята, если кто хорошо разбирается в css, помогите пожалуйста.


Сделал к картинкам всплывающие подсказки при наведении.
При выводе картинок во второй ряд, при наведении на картинку в первом, всплывающая подсказка показывается за картинками...
Проблемма с позиционированием, я уже все испробовал.

вот скриншот -


HTML code:
  1. <span id="gift_nav">
  2. <li class="gift_ui">
  3. <div><a href="#" onClick="return false;"><img src="/img/podarok/min/1.png" /></a></div>
  4. <ul>
  5. <li style="margin-left:9px; margin-top:5px; margin-bottom:3px; margin-right:9px;">
  6. <img src="/foto_user/invisible.png" width="80px" height="80px" class="giftUimg" /><div style="padding-top:6px; margin-bottom:6px; color:#0261bf;">Даритель пожелал остаться неизвестным</div>
  7. <div class="clear"></div>
  8. </li>
  9. </ul>
  10. </li>
  11. </span>


.gift_ui{
position: relative;
display: block;
float: left;
padding-left: 9px;
padding-right: 9px;
padding-bottom: 6px;
padding-top: 2px;
width:48px;
border: 1px solid transparent;
}
.gift_ui:hover{
border: solid 1px #bdc6d7;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
}
#gift_nav ul a:hover {
color: #f07400 !important;
}
#gift_nav li:hover > ul {
display: block;
}
#gift_nav ul {
display: none;
width: 245px;
position: absolute;
top: 39px;
left: 0;
border: solid 1px #bdc6d7;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
background-image: url(../img/bg_set.png);
background-repeat: repeat;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
margin-top: 18px;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 2 отправлено 23:06, 22.05.2013
тут наглядно - [url=http://jsfiddle.net/serj011/HcYd7/][/url]

отзовитесь пожалуйста
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 3 отправлено 22:07, 23.05.2013

tufanov (22.05.2013, 23:06) писал:тут наглядно - [url=http://jsfiddle.net/serj011/HcYd7/][/url]

отзовитесь пожалуйста


HTML code:
  1. .gift_ui{
  2.    position: relative;
  3.    display:  block;
  4.    float:    left;
  5.    padding-left: 9px;
  6.    padding-right: 9px;
  7.    padding-bottom: 6px;
  8.    padding-top: 2px;
  9.    width:48px;
  10.    border: 1px solid transparent;
  11.    
  12. }
  13. .gift_ui:hover{
  14.    border: solid 1px #bdc6d7;
  15.    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  16.    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  17.    box-shadow: 0 1px 3px rgba(0,0,0, .3);
  18.    -moz-border-radius:    32px;
  19.    -webkit-border-radius: 32px;
  20.    border-radius:         32px;
  21.    
  22. }
  23. #gift_nav ul a:hover {
  24.    color: #f07400 !important;
  25.    
  26. }
  27. #gift_nav li:hover > ul {
  28.    display: block;
  29.     background:#000;
  30.    
  31. }
  32. #gift_nav ul {
  33.    display: none;
  34.    width: 245px;
  35.    position: absolute;
  36.    top: 39px;
  37.    left: 0;
  38.    border: solid 1px #bdc6d7;
  39.    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  40.    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  41.    box-shadow: 0 1px 3px rgba(0,0,0, .3);
  42.    background-image: url(../img/bg_set.png);
  43.    background-repeat: repeat;
  44.    -moz-border-radius:    7px;
  45.    -webkit-border-radius: 7px;
  46.    border-radius:         7px;
  47.    margin-top: 18px;
  48.    text-shadow: 0 1px 1px rgba(0,0,0, .1);
  49.     z-index:500;
  50. }

последнюю строчку смотри, для наглядности при наведении закрасил черным всплывающее окно.
Абитуриент
  1. Офлайн
  2. Посетители
  3. 2 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 4 отправлено 15:29, 02.07.2013
попробуй z-index если я тебя правильно понял
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Изменения статуса

  1. профиль Видимо, я последний выживший :) 01:19, 17.10.2011
  2. профиль Готов стать модератором)) 12:04, 17.09.2011
  3. профиль Восстанавливаем нормальную работу сайта и форума. 20:09, 13.09.2011