Главная Форум Поиск Пользователи Регистрация Добрый день, Гость Вход


Главная


Форум torrenpier который уже живет
это сообщество владельцев форумов на phphBB2, торрент-трекеров на движках torrentpier и SVN всех версий.
Здесь можно найти решение своих проблем на своем сайта.
Здесь можно скачать полезные и нужные моды torrenpier, phpBB2 и svn.
Наш форум - это место для общения и обмена опытом между любителей движков, создателей модов на заказ и владельцев сайтов!
Всплывающая подсказка (tooltip) с помощью CSS  
Начать новую тему   Ответить на тему    Главная -> Оформление
Автор Сообщение
Admin
Администратор
Зарегистрирован: 2010-07-27
Сообщ.: 777
russia.gif
Сообщение 17-Мар-11 19:17 #1  
сегодня задумался-а нельзя ли на главной странице нашего сайта сделать подсказки как на дле и смз сайтах.то есть ,при наведении на слово или на ссылку выскакивает всплывающее окошко.очень это удобно и информативно.
перерыв через яшку(яндекс) сайты,остановился на простом и понятном коде css.

как же можно сделать красивую всплывающую подсказку (аналог title) с помощью css?

между <body> и </body>

ставим вот этот код

Код:

<style type="text/css">
.title{
position:relative;
z-index:1;
zoom:1;
color:;
}
.title em{display:none;}
.title:hover em{
display:block;
position:absolute;
z-index:1;
background-color:#fffddf;
-webkit-border-radius:5px; /* красивости в виде скругленных углов */
-moz-border-radius:5px;
border-radius:5px;
line-height:normal;
color:#007fff;

border: 1px solid red;
border-bottom-color: red

text-decoration:none;
padding:1px 45px;
bottom:22px;
right:0;
-webkit-box-shadow:0 0 5px #00ff00; /* красивости в виде тени */
-moz-box-shadow:0 0 5px #00ff00;
box-shadow:0 0 5px #00ff00;
}
.title:hover em i{
position:absolute;
z-index:1;
bottom:-7px;
right:5px;
border-top:7px solid #ffcc00;
border-left:7px solid transparent;
_border-left:7px solid #ffcc00; /* цвет фона. это для ие6.*/
display:block;
height:0;
overflow:hidden;
}
</style>

<a
 href="http://torrentpier-download.ru/forum/"><span
 class="title">Форум
torrentpier<em>перейти на форум</em></span></a>



давайте разберем этот код! при правлениии этого кода все можно править на свой вкус!

<style type="text/css">
.title{
position:relative;
z-index:1;
zoom:1;
color:#вот тут можно окрасить в цвет ссылку;
}
.title em{display:none;}
.title:hover em{
display:block;
position:absolute;
z-index:1;
background-color:#fffddf(цвет фона-в данном случае-цвет слоновой кости);
-webkit-border-radius:5px; /* красивости в виде скругленных углов */
-moz-border-radius:5px;
border-radius:5px;
line-height:normal;
color:#007fff(цвет окраски букв подсказки- в данном случае в голубой);

border: 1px solid red; (размер в px и цвет рамки-красный)
border-bottom-color: red (цвет рамки-красный)

text-decoration:none;
padding:1px 45px; (высота и размер контура отображения)
bottom:22px;
right:0;
-webkit-box-shadow:0 0 5px #00ff00; /* красивости в виде тени */
-moz-box-shadow:0 0 5px #00ff00;
box-shadow:0 0 5px #00ff00;
}
.title:hover em i{
position:absolute;
z-index:1;
bottom:-7px;
right:5px;
border-top:7px solid #ffcc00;
border-left:7px solid transparent;
_border-left:7px solid #ffcc00; /* цвет фона. это для ие6.*/
display:block;
height:0;
overflow:hidden;
}
</style>

<a
href="http://torrentpier-download.ru/forum/"><span class="title">Форум torrentpier команда ,задаваемая для выведения-<span class="title">
<em>перейти на форум</em></span></a> вот это и есть всплывающее слово-заключаем в теги <em> </em>


Последний раз редактировалось: Admin (17-Мар-11 19:42), всего редактировалось 4 раз(а)
Вернуться к началу
    
Admin
Администратор
Зарегистрирован: 2010-07-27
Сообщ.: 777
russia.gif
Сообщение 17-Мар-11 19:34 #2  
при тестировании использовал свою оперу 9.60, встроенный в ХРюшку IE9, и мозиллу firefox бета 1.

все отображается

у себя на своем локальном трекере код тестировал на страницах html и в php - все работает четко!
Вернуться к началу
    
Admin
Администратор
Зарегистрирован: 2010-07-27
Сообщ.: 777
russia.gif
Сообщение 17-Мар-11 19:37 #3  
коды цветов смотрим тут
http://yandex.ru/yandsearch?clid=9582&text=%23007fff&lr=193
Вернуться к началу
    
krumax
Зарегистрирован: 2010-12-10
Сообщ.: 304
Сообщение 17-Мар-11 20:19 #4  
Admin
Вообще это уже давно реализовано на многих трекерах.
Вернуться к началу
    
Admin
Администратор
Зарегистрирован: 2010-07-27
Сообщ.: 777
russia.gif
Сообщение 17-Мар-11 20:34 #5  
krumax,согласен с Тобой,но .... не на сайтах,где все делается вручную и с нуля,где все делается ручками...
а там в трекерах(1.0.3.5 и в релизах) все встроенно и вмонтировано
Вернуться к началу
    
krumax
Зарегистрирован: 2010-12-10
Сообщ.: 304
Сообщение 17-Мар-11 20:52 #6  
Естественно есть разница между CMS и обычной вёрсткой html
Вернуться к началу
    
Admin
Администратор
Зарегистрирован: 2010-07-27
Сообщ.: 777
russia.gif
Сообщение 17-Мар-11 21:50 #7  
Razz yes4
Вернуться к началу
    
monster27
Зарегистрирован: 2010-12-29
Сообщ.: 540
Сообщение 17-Мар-11 22:09 #8  
а в чем же разница? Везде можно подключить скрипт и делать проверку на наличие title="" в любом теге содержащем его, чем прописывать куча ненужного кода.
Вернуться к началу
    
Заголовок новой темы
Форум для новой темы
 
Страница 1 из 1
Показать сообщения:   
Начать новую тему   Ответить на тему    Главная -> Оформление Часовой пояс: GMT + 4

 

Перейти:  
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Все материалы сайта представлены только для ознакомления. При копировании материала ссылка на torrentpier-download.ru обязательна!

sitemap     карта форума | Статистика визитов поисковых ботов | Выдача в поисковиках



Powered by phpBB © 2001, 2011 phpBB Group
| ©2011-2024 - Воронеж |


Нравится