Форум Сайтостроение Веб-строительство

Эффект перекатывания.

Nikitoz
На сайте с 11.09.2006
Offline
21
Nikitoz
1019

Задался целью сделать менюшку с эффектом перекатывания, то есть чтобы при наведение на текст меню картинка рядом с текстом менялась. При этом чтобы менюшка индексировалась без проблем. Сделал через псевдокласс hover. Когда делаю Hover на теге <div> удается выровнять текст и кнопки так как надо http://veb.ra-hollywood.ru/left_knopka.html ( а надо чтобы кнопки были справо от текста и выровнены по вертикали, а текст рядом). Но проблема в том, что IE понимает hover только у ссылок, и таким образом эффект в IE не работает. Сделал через тег <a> http://veb.ra-hollywood.ru/knopka.html, все везде работает, но возникла проблема с выравниванием : текст маленького размера не получается сместить к кнопке, потому что бэкгрануд и текст ссылки связаны.

Как можно выровнять текст, при этом чтобы эффект был во всех браузерах?

Спасибо.

Ank
На сайте с 26.04.2004
Offline
108
Ank
#1

вторая имхо лучше, ибо в первой в ФФ текст тупо наехал на кнопку...

а по сути - не знаю что сказать :)

Ссылка за контент ( http://www.acma.ru ) прямая и безответная. ► [url=https://saas24.ru/saas_category/dedicated/?utm_source=forums&utm_medium=signatures&utm_campaign=dedicated_s24]Рейтинг серверов[/url] — ТОП10 ◄
D
На сайте с 14.01.2007
Offline
153
Dinozavr
#2

а если так?

в линке текст выравнять справа, сам текст в "span" и "margin-right:25px"? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><head>





<meta http-equiv="content-type" content="text/html; charset=windows-1251"><title>&#221;&#244;&#244;&#229;&#234;&#242; &#239;&#229;&#240;&#229;&#234;&#224;&#242;&#251;&#226;&#224;&#237;&#232;&#255;</title>



<style type="text/css">



#menu {

  width:8em; 

  padding:0.5em; 

  margin:0 auto;

  }

#menu a, #menu a:visited {

  background: url('knopka1.JPG'); 

  background-position:right;

  background-repeat: no-repeat;

  display: block; 

  height: 21px; 

  width: 180px;

  border: 0px solid #000;   

  padding:0.4em 0;

  color:#000; 

  text-indent:0.2em;

  background-color:#fff; 

  text-decoration:none;

  margin:0.5em 0; 

  text-align:right;

  }



#menu a:hover {

  color:#f00; 

  background: url('knopka2.JPG'); 

  background-position:right;

  background-repeat: no-repeat; 

  }

.box {

  position:relative;

  }

</style></head><body><div id="menu">

  <div class="box">

    <a href="http://veb.ra-hollywood.ru/menuone.html">

      <span style="margin-right:25px">&#205;&#224;&#240;&#243;&#230;&#237;&#224;&#255; &#240;&#229;&#234;&#235;&#224;&#236;&#224;</span>

    </a>

  </div>

  <div class="box">

    <a href="http://veb.ra-hollywood.ru/menutwo.html">

      <span style="margin-right:25px">&#209;&#204;&#200;</span>

    </a>

  </div>

</div>



</body></html>
D
На сайте с 21.06.2006
Offline
168
Dash
#3

#menu a{

padding-right:30px;

}

Appstorespy - платформа анализа мобильных сторов | Publa.io - готовая инфраструктура для приема платежей и оплаты рекламных кабинетов в бурже
dkameleon
На сайте с 09.12.2005
Offline
386
dkameleon
#4

добавьте стиль для тега А: 

  text-align: right;

  padding-right: 23px;

и нужно будет отминусовать от ширины правый паддинг.

Дизайн интерьера (http://balabukha.com/)
ТВЭЛ
На сайте с 29.09.2006
Offline
111
ТВЭЛ
#5

Блин... такие темы регулярно появляются. Вы бы хоть поиск поюзали, если не хотите читать спецификации. Намудрили сколько, жуть...

Вот вам пара примеров, уже делал как-то и для этого форума, и для другого.

http://tvel.name/temp/hover-pictures/

http://tvel.name/temp/currentwhere/

Время не ждёт.
Битрикс / шаблоны meta Яндекс кобласит Что значит дропы?
Nikitoz
На сайте с 11.09.2006
Offline
21
Nikitoz
#6
dkameleon:
добавьте стиль для тега А: 
  text-align: right;

  padding-right: 23px;

и нужно будет отминусовать от ширины правый паддинг.

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

Всем спасибо. :)

Падает memcached Как заблокировать ботов идущими Нарушения и угрозы безопасности

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий