Subcomandante.A

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

Добрый день. Подскажите, пожалуйста, как сделать интерактивные маркеры на изображении, при наведении на которые будут всплывать блоки с текстом? Пример. Может, у кого-нибудь есть ссылки на туториалы, как делать что-нибудь подобное?

Спасибо всем за помощь! Подсказали еще такой вариант: http://jsfiddle.net/6T82V/

Почти работает ;] Треугольник меняет цвет, но делает он это не одновременно со ссылкой, если, допустим, снизу курсор подвести. Думаю, вопрос решится, когда мы придадим ссылке размер дива.

Здравствуйте, друзья. Задался вопросом создать кнопку "Наверх" на чистом CSS для сайта с черным фоном. Вот, что у меня получилось (по этой ссылке можно увидеть результат воочию), и дальше я зашел в тупик: HTML <div class="background"> <div class="to_top"> <div class="title"><a href="#">to top</a></div> </div> </div>? CSS .background { background: black; height: 300px; } .to_top { display: table; position: relative; width: 70px; height: 70px; background: #ffdd00; border: 1px solid #fff; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .to_top .title { display: table-cell; width: 69px; height: 69px; border: 1px solid #BFBFBF; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; font: 18px bold sans-serif; text-align: center; vertical-align: middle; } .to_top .title a { display: block; color: #5c5c5c; text-decoration: none; } .to_top .title a:before{ content: ""; display: table-cell; position: absolute; width: 0px; height: 0px; top: 15px; left: 25px; border-bottom: 10px solid #5c5c5c; border-left: 10px solid transparent; border-right: 10px solid transparent; } .to_top .title a:hover { color: #000000; } ? Подскажите, пожалуйста, как сделать: чтобы элемент а распространялся на весь блок, в котором располагается? Т.е. при наведении на круг пользователь автоматически наводил бы и на ссылку. чтобы при наведении на блок с классом "to_top", треугольник изменял цвет на черный? Заранее спасибо, и если будут еще какие-либо советы, как улучшить кнопку - я буду рад их услышать ;]

Посмотрите 2-ой способ по этой ссылке, мб это то, что Вы ищете: http://habrahabr.ru/blogs/css/64173/ Для себя решил использовать таблицы, но почему-то все равно не получилось - правая ячейка всегда меньше левой <table cellpadding="0" cellspacing="10" border="0" bgcolor="#f3f8d6"> <tr> <td width="70%" valign="top"> <table width="100%" height="100%" cellpadding="0" cellspacing="10" border="0" bgcolor="#DDE999"> <tr> <td><a href="{{ href.Contests }}/{{ contest.id }}">{{ contest.name_trans|safe }}</a></td> </tr> <tr> <td> <b>{% trans "Account type" %}:</b> {{ contest.account_type }} <br> <b>{% trans "Available prizes" %}:</b> {{ contest.Awards }} <br> <b>{% trans "Contest Period" %}:</b> {{ contest.Start_DateTime }} - {{ contest.End_DateTime }} {% trans "(Server time)" %} <br> <b>{% trans "Number of participants" %}:</b> {{ contest.members.count }} </td> </tr> </table> </td> {% if contest.login %} <td width="30%" valign="top"> <table width="100%" height="100%" cellpadding="0" cellspacing="10" border="0" bgcolor="#DDE999"> <tr> <td><a href="{{ href.Monitor }}/{{ contest.login.Server }}/{{ contest.login.Login }}">{% trans "I am registered" %}</a></td> </tr> <tr> <td> <b>{% trans "Nickname" %}:</b> {{ contest.login.nickname }} <br> <b>{% trans "Login" %}:</b> {{ contest.login.Login }} <br> <b>{% trans "Password" %}:</b> {{ contest.login.contest_password }} </td> </tr> </table> </td> {% else %} <td width="30%" valign="top"> <table width="100%" height="100%" cellpadding="0" cellspacing="10" border="0" bgcolor="#DDE999"> <tr> <td>{% if contest.AllowRegDuringActive %}<a href="{% if member %}{{ href.Member_Contests_Register }}{% else %}{{ href.Contests_Register }}{% endif %}/{{ contest.id }}" class="conc-reg">{% trans "Go in" %}</a>{% endif %}</td> </tr> <tr> <td> {% blocktrans with name=contest.name_trans %}To join the {{ name }} contest, click "Go in".{% endblocktrans %} </td> </tr> </table> </td> {% endif %} </tr> </table>

Друзья, подскажите, пожалуйста, как выравнять два блока по высоте внутри третьего, при условии что первый блок постоянно меняет свою высоту в зависимости от отображаемого контента? Во втором диве контент тоже меняется, но его мало, поэтому высота блока почти всегда одинаковая. Пробовал для второго блока прописать {height: inherit;}, чтобы он наследовал высоту третьего блока (и тогда все было бы как надо), но не помогает. Скрин: http://files.mail.ru/QQMQ1I?t=1 Код: HTML <div class="conc-item"> <div class="conc-info"> // 1-ЫЙ БЛОК <div class="cornerContainer ccLightGreen"> // ВНУТРИ 1-ГО БЛОКА БЛОК С ЗАКРУГЛЕННЫМИ КРАЯМИ <b class="r5 corner"></b><b class="r3 corner"></b><b class="r2 corner"></b><b class="r1 corner"></b><b class="r1 corner"></b> <div class="cornerContainerContent"> <div class="head"><a href="{{ href.Contests }}/{{ contest.id }}">{{ contest.name_trans|safe }}</a></div> <div class="body"> <p> <b>{% trans "Account type" %}:</b> {{ contest.account_type }} <br> <b>{% trans "Available prizes" %}:</b> {{ contest.Awards }} <br> <b>{% trans "Contest Period" %}:</b> {{ contest.Start_DateTime }} - {{ contest.End_DateTime }} {% trans "(Server time)" %} <br> <b>{% trans "Number of participants" %}:</b> {{ contest.members.count }} </p> </div> </div> <b class="r1 corner"></b><b class="r1 corner"></b><b class="r2 corner"></b> <b class="r3 corner"></b><b class="r5 corner"></b> </div> </div> <div class="conc-user-info"> // 2-ОЙ БЛОК <div class="cornerContainer ccLightGreen"> // ВНУТРИ 2-ГО БЛОКА БЛОК С ЗАКРУГЛЕННЫМИ КРАЯМИ <b class="r5 corner"></b><b class="r3 corner"></b><b class="r2 corner"></b><b class="r1 corner"></b><b class="r1 corner"></b> <div class="cornerContainerContent"> // ВЫСОТУ ЭТОГО DIV'A И НУЖНО ВЫРАВНЯТЬ <div class="head"><a href="{{ href.Monitor }}/{{ contest.login.Server }}/{{ contest.login.Login }}">Я зарегистрирован</a></div> <div class="body"> <p> <b>{% trans "Nickname" %}:</b> {{ contest.login.nickname }} <br> <b>{% trans "Login" %}:</b> {{ contest.login.Login }} <br> <b>{% trans "Password" %}:</b> {{ contest.login.contest_password }} <br> </p> </div> </div> <b class="r1 corner"></b><b class="r1 corner"></b><b class="r2 corner"></b> <b class="r3 corner"></b><b class="r5 corner"></b> </div> </div> </div> CSS .conc-item { height: 1%; overflow: hidden; margin-bottom: 0px; border-bottom: 1px solid #d2d2d2; padding-bottom: 10px; padding-top: 10px; padding-left: 15px; padding-right: 15px; } .conc-info { width:595px; float:left; } .conc-user-info { width:281px; float:right; } .cornerContainer .cornerContainerContent { padding: 15px; } .ccLightGreen .cornerContainerContent, .ccLightGreen .corner { background-color: #dde999; Заранее спасибо.

Спасибо всем, кто откликнулся - уже разобрался, в чем ошибся. Как обычно, все дело в криворукости - прописал body.ar .bonusChoice .accountForm .input с точкой перед body.

1) Это арабский дирекшн для всего, что находится между тегами <body> HTML <body{% if LANGUAGE_CODE == "ar" %} class="ar"{% endif %}> CSS body.ar { direction: rtl; etc... } Соответственно, когда пользователь переключает язык на арабский, игнорируется класс .bonusChoice, и мы имеем совсем не то выравнивание {float} для кнопки, которое нужно: .body.ar .bonusChoice .accountForm .input { float: right; height: 1%; overflow: hidden; width: auto; display:inline; line-height: 15px; } 2)Редактирую страницу на отладочной версии сайта, на основной версии ее еще нет. Пароли к демо-версии даются только разработчикам

Друзья, подскажите, пожалуйста, почему к элементу не применяется один из заданных классов. HTML <table border="0" cellpadding="15" cellspacing="15" class="bonusChoice"> <tr> <td> <div class="accountForm"> <div class="input"> <div class="submit"> <input type="submit" value="Select"> </div> </div> </div> </td> </tr> </table> CSS .body.ar .bonusChoice .accountForm .input { float: right; height: 1%; overflow: hidden; width: auto; display:inline; line-height: 15px; } При арабской раскладке не применяется класс bonusChoice. Соответственно применяется следующий стиль: body.ar .accountForm .input { float: left; height: 1%; overflow: hidden; width: 54%; display:inline; line-height: 15px; } Возможно, я что-то неверно прописал в style.css. Скорее всего так и есть, иначе бы все работало Заранее спасибо. upd Случайно опубликовал недописанный пост - без стилей.