Проблема с сайтом...

Гость Гость

Нашел в инете как сделать всплывающее окошко. Ну конечно же я скопировал данные.
Вот что у  меня…
Файл index.html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>2011/Год космонавтики</title>
 <meta name="description" content="2011, Солнечная система, планеты, год космонавтики">
 <link rel="icon" href="icon.jpg">
<link rel="stylesheet" type="text/css" href="background.css">
<link rel="stylesheet" type="text/css" href="sun.css">
<link rel="stylesheet" type="text/css" href="zemlya.css">
<link rel="stylesheet" type="text/css" href="luna.css">
<link rel="stylesheet" type="text/css" href="mars.css">
<link rel="stylesheet" type="text/css" href="saturn.css">
<link rel="stylesheet" type="text/css" href="neptun.css">
<link rel="stylesheet" type="text/css" href="merkurii.css">
<link rel="stylesheet" type="text/css" href="venera.css">
<link rel="stylesheet" type="text/css" href="yupiter.css">
<link rel="stylesheet" type="text/css" href="uran.css">
<link rel="stylesheet" type="text/css" href="avtor.css">
<style type="text/css">
body{
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:150%;
zoom:1;
}
.title{
position: relative;
z-index:1;
zoom:1;
color:#06F;
}
.title em{display:none;}
.title:hover em{
display: block;
position: absolute;
z-index:1;
background-color:#000;
-webkit-border-radius:5px; /* красивости в виде скругленных углов */
-moz-border-radius:5px;
border-radius:5px;
line-height:normal;
color:#FFF;
text-decoration:none;
padding:3px 5px;
bottom:22px;
right:0;
-webkit-box-shadow:0 0 5px #000; /* красивости в виде тени */
-moz-box-shadow:0 0 5px #000;
box-shadow:0 0 5px #000;
}
.title:hover em i{
position: absolute;
z-index:1;
bottom:-7px;
right:5px;
border-top:7px solid #000;
border-left:7px solid transparent;
_border-left:7px solid #FDEFC6; /* цвет фона. Это для ие6.*/
display: block;
height:0;
overflow: hidden;
}
</style>

</head>
<body>
<span title="avtor" class="avtor"><em><i>Автор</i></em></span>
<a class="avtor" href="http://vkontakte.ru/shevtsovanatolii"></a>
<a class="mars" href="mars.html"></a>
<a class="sun" href="sun.html"></a>
<a class="zemlya" href="zemlya.html"></a>
<a class="luna" href="luna.html"></a>
<a class="saturn" href="saturn.html"></a>
<a class="neptun" href="neptun.html"></a>
<a class="merkurii" href="merkurii.html"></a>
<a class="venera" href="venera.html"></a>
<a class="yupiter" href="yupiter.html"></a>
<a class="uran" href="uran.html"></a>

</body>
</html>
(то что в теге <style> и есть эта всплывающая подсказка, только я убрал фон, так как он перекрывает основной фон и убрал положение padding так как подсказка должна будет следовать координатам класса Автор(avtor.

Вот состав avtor.css.avtor { background: url(avtor.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 86px; /* Ширина рисунка */
height: 43px; /* Высота рисунка */
position:absolute;
left: 120px; /* Положение от левого края */
top: 50px; /* Положение от верхнего края */

}
.avtor:hover {
background-position: 0 -43px; /* Смещение фона */
}

Конец…

А вот что у меня получается…
http://s44.radikal.ru/i106/1012/0c/57d562961661.jpg

я по совету сунул в индекс. Хтмл строку <span title="avtor" class="avtor"><em><i>Автор</i></em></span> но ниче не срабатывает. Это из-за ховера автора? Что делать? Php пистаь я маловат и скрипты тож
Дополнено (1). браво, всплывающее окно это сделано с помощью css hover

Bravo13 (Егор Годованюк Bravo13 (Егор Годованюк

лучший ответ
Я, конечно, могу ошибатся, но насколько я знаю, всплывающие окно без яваскрипта не делается. А у вас в коде я упоминаний о яваскрипте не заметил. Поэтому советую ещё раз внимательно посмотреть источник на предмет тех самых скриптов и дополнить свой код.

Добавить комментарий | Похожие обсуждения

Вопросы и ответы по Вконтакте
Вопросы и ответы

Популярные вопросы и ответы о социальной сети www.vkontakte.ru (vk.com)