X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Всплывающие подсказки, Помощь в правильной реализаций
Dorman
Dorman
Topic Starter сообщение 16.4.2012, 20:57; Ответить: Dorman
Сообщение #1


Участник
***

Группа: User
Сообщений: 227
Регистрация: 5.2.2011
Из: Интернета
Поблагодарили: 29 раз
Репутация:   8  


Суть проблемы: Хочу сделать всплывающие подсказки к списку материалов на DLE, на подобий как это реализовано на www.ivi.ru или www.filmin.ru (Тоесть наводиш курсор на картинку и выскакивает описание). Облазил весь рунет, изучил поисковую выдачу вплоть до 20 страницы. И вроде что то внятное получается, то там подсмотрел, то тут. Но не могу решить одну проблему. Половина подсказки с описанием теряется под слоями. Тоесть не выходит за границы краткой новости к которой прикреплена. Мне нужно чтобы она выскакивала поверх всех слоев, границ, и т.д. Ума не приложу как это сделать, начал курить мануалы, но пока тчетно. На картинке это отчетливо видно:


Код взят отсюда: http://ruseller.com/lessons.php?rub=2&id=664:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Всплывающие подсказки</title>
        <style type="text/css">
        .tooltip {
            border-bottom: 1px dotted #000000; color: #000000; outline: none;
            cursor: help; text-decoration: none;
            position: relative;
        }
        .tooltip span {
            margin-left: -999em;
            position: absolute;
        }
        .tooltip:hover span {
            border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Geneva, sans-serif;
            position: absolute; left: 1em; top: 2em; z-index: 99;
            margin-left: 0; width: 250px;
        }
        .tooltip:hover img {
            border: 0; margin: -10px 0 0 -55px;
            float: left; position: absolute;
        }
        .tooltip:hover em {
            font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
            display: block; padding: 0.2em 0 0.6em 0;
        }
        .classic { padding: 0.8em 1em; }
        .custom { padding: 0.5em 0.8em 0.8em 2em; }
        * html a:hover { background: transparent; }
        .classic {background: #FFFFAA; border: 1px solid #FFAD33; }
        .critical { background: #FFCCAA; border: 1px solid #FF3334;    }
        .help { background: #9FDAEE; border: 1px solid #2BB0D7;    }
        .info { background: #9FDAEE; border: 1px solid #2BB0D7;    }
        .warning { background: #FFFFAA; border: 1px solid #FFAD33; }
        </style>
    </head>
    <body>
        <h1>Пример всплывающих подсказок, сделанных на CSS!</h1>
        <p>Наведите курсор мыши на надписи чтобы увидеть:
        <a class="tooltip" href="#">классическую подсказку<span class="classic">Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
        <a class="tooltip" href="#">критическое сообщение<span class="custom critical"><img src="Critical.png" alt="Ошибка" height="48" width="48" /><em>Критическое сообщение</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
        <a class="tooltip" href="#">помощь<span class="custom help"><img src="Help.png" alt="Помощь" height="48" width="48" /><em>Помощь</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
        <a class="tooltip" href="#">информация<span class="custom info"><img src="Info.png" alt="Информация" height="48" width="48" /><em>Информация</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>
        и <a class="tooltip" href="#">предупреждение<span class="custom warning"><img src="Warning.png" alt="Предупреждение" height="48" width="48" /><em>Предупреждение</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>.
        <br/>
        Это просто пример того, как сделать подсказки с использованием CSS!</p>
    </body>
</html>


P.S.
Help me, pliz!

Сообщение отредактировал Dorman - 16.4.2012, 21:01


--------------------
Мой секрет прост: упорство, честолюбие и амфетамины.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
idlerdog
idlerdog
сообщение 16.4.2012, 22:26; Ответить: idlerdog
Сообщение #2


Участник
***

Группа: User
Сообщений: 120
Регистрация: 29.8.2011
Поблагодарили: 13 раз
Репутация:   2  


Может попробовать поиграть с z-index?


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Skreep
Skreep
сообщение 17.4.2012, 9:00; Ответить: Skreep
Сообщение #3


Новичок
*

Группа: User
Сообщений: 37
Регистрация: 27.3.2012
Из: Саратов, РФ
Поблагодарили: 14 раз
Репутация:   3  


Неплохо было бы еще взглянуть на css-свойства того блока (или класса), который перекрывает подсказку. Возможно, тут дело в позиционировании.


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Dorman
Dorman
Topic Starter сообщение 17.4.2012, 20:42; Ответить: Dorman
Сообщение #4


Участник
***

Группа: User
Сообщений: 227
Регистрация: 5.2.2011
Из: Интернета
Поблагодарили: 29 раз
Репутация:   8  


(idlerdog @ 16.4.2012, 21:26) *
поиграть с z-index?

Этот показатель за другое отвечает.

(Skreep @ 17.4.2012, 8:00) *
взглянуть на css-свойства того блока

Скинул урл в личку.


--------------------
Мой секрет прост: упорство, честолюбие и амфетамины.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
idlerdog
idlerdog
сообщение 17.4.2012, 21:16; Ответить: idlerdog
Сообщение #5


Участник
***

Группа: User
Сообщений: 120
Регистрация: 29.8.2011
Поблагодарили: 13 раз
Репутация:   2  


Если будет возможность - напишите потом решение - любопытно, т.к. со схожей проблемой справился именно увеличив зэд индекс.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Skreep
Skreep
сообщение 18.4.2012, 0:27; Ответить: Skreep
Сообщение #6


Новичок
*

Группа: User
Сообщений: 37
Регистрация: 27.3.2012
Из: Саратов, РФ
Поблагодарили: 14 раз
Репутация:   3  


Решение... не знаю, решение ли это. В общем, проблема была в том, что у одного из родителей нашей подсказочки прописано свойство overflow: hidden, которое и обрезает тег span, содержащий подсказку. Прописан он не в файле css, а непосредственно в самой странице.
.basefull {
     border-top: 1px solid #E3E3E3;
     overflow: hidden;
     padding-bottom: 18px;
     padding-top: 10px;
}

Ну а дальше - сам) Надеюсь, помог.


--------------------


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Dorman
Dorman
Topic Starter сообщение 18.4.2012, 17:46; Ответить: Dorman
Сообщение #7


Участник
***

Группа: User
Сообщений: 227
Регистрация: 5.2.2011
Из: Интернета
Поблагодарили: 29 раз
Репутация:   8  


(Skreep @ 17.4.2012, 23:27) *
Ну а дальше - сам) Надеюсь, помог.

Немного посидев и разобравшись я понял суть проблемы, спасибо большое. Чтобы я делал без вашей подсказки, никогда бы не подумал что все решается так просто.


--------------------
Мой секрет прост: упорство, честолюбие и амфетамины.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


 



RSS Текстовая версия Сейчас: 15.12.2017, 9:02
Дизайн