Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: элемент внутри кнопки button

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
Pavelbeginner
Отправлено: 15 Июля, 2014 - 17:30:15
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010  


Помог: 1 раз(а)
Есть кнопка
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. .iconBtn{
  3.     padding:0;
  4.     border:0;
  5.     background:transparent;
  6.     position:relative;
  7.     display:inline-block;
  8. }
  9.  
  10. .icon{
  11.     position:absolute;
  12.     top:50%;
  13.     left:0;
  14.     background: url('Images/eSFX-Sprite.png') 0 0 no-repeat;
  15. }
  16.  
  17. .searchBtn{
  18.     width:19px;
  19. }
  20.  
  21. .searchBtn .icon{
  22.     width:19px;
  23.     height:19px;
  24.     margin-top:-9px;
  25.     background-position:-403px -723px;
  26. }
  27.  
  28. <button class="iconBtn searchBtn"><span class="icon"></span>&nbsp;</button>
  29.  


Внутри кнопки(тег button) есть спан, который аболютно позиционируется относительно button-а. Почему-то курсор(cursor:pointer) с тега button не наследуется спаном. Если же заменить тег button на тег a(ссылка), то наследование курсора(cursor:pointer) происходит. В чем дело? Пробовал даже спану принудительно задать
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. .searchBtn .icon{
  3.     cursor:pointer;
  4. }
  5.  

Не работает! курсор при наведение не появляется. что за дела? По-моему также не передается клик тегу button, если кликнуть на спан. А если заменить тег button на тег a, то передается.
 
 Top
armancho7777777 Супермодератор
Отправлено: 15 Июля, 2014 - 17:36:31
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
CODE (css):
скопировать код в буфер обмена
  1. .icon { display: block; }


Pavelbeginner пишет:
.icon{
    position:absolute;

Зачем ?

Pavelbeginner пишет:
</span>&nbsp;</button>

Для чего ?
 
 Top
Pavelbeginner
Отправлено: 15 Июля, 2014 - 17:45:27
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010  


Помог: 1 раз(а)
armancho7777777 пишет:
Pavelbeginner пишет:
.icon{
position:absolute;

Зачем ?

эта кнопка может быть с текстом, а может и без. position:absolute используется для выравнивания иконки по вертикали
armancho7777777 пишет:
Pavelbeginner пишет:
</span>&nbsp;</button>

Для чего ?

кнопка(button) может идти в строке текста. если внутри button не будет ничего, то кнопка будет выравниваться в строке не по базовой линии шрифта, а по нижнему краю кнопки.
(Добавление)
armancho7777777 пишет:
CODE (css):
скопировать код в буфер обмена

.icon { display: block; }

не вариант т.к. на одном уровне с иконкой(тег span) может быть текст

(Отредактировано автором: 15 Июля, 2014 - 17:46:44)

 
 Top
armancho7777777 Супермодератор
Отправлено: 15 Июля, 2014 - 17:54:36
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
 
 Top
Pavelbeginner
Отправлено: 15 Июля, 2014 - 17:57:57
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010  


Помог: 1 раз(а)
armancho7777777 пишет:
Мдааа....
http://jsfiddle.net/M3wp3/1/

и что это такое?
 
 Top
armancho7777777 Супермодератор
Отправлено: 15 Июля, 2014 - 18:03:31
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
В отличии от Вашей реализации, - адекватная кнопка.
 
 Top
Pavelbeginner
Отправлено: 15 Июля, 2014 - 18:03:54
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010  


Помог: 1 раз(а)
В общем, всё о чём я говорю вот здесь можно увидеть, как клик то, что событие клика не передается, так и про то, что не наследуется cursor:pointer;
http://jsfiddle[dot]net/S6tw4/
(Добавление)
armancho7777777 пишет:
В отличии от Вашей реализации, - адекватная кнопка.

да какая к черту кнопка. Проблема не в кнопке, а в иконке, внутри кнопки. В моём примере по ссылке в качестве иконки высутпает красный квадрат.
 
 Top
armancho7777777 Супермодератор
Отправлено: 15 Июля, 2014 - 18:08:34
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Pavelbeginner пишет:
да какая к черту кнопка.

Вы свой тон умерте.
Никто Вам тут ничего не должен.

В каком браузере "не пашет" ?
 
 Top
Pavelbeginner
Отправлено: 15 Июля, 2014 - 18:14:33
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010  


Помог: 1 раз(а)
armancho7777777 пишет:
Pavelbeginner пишет:
да какая к черту кнопка.

Вы свой тон умерте.
Никто Вам тут ничего не должен.

В каком браузере "не пашет" ?

я не для того, чтобы оскорбить или чё-то типо того. я об одном пишу, об одной проблеме, а вы мне приводите пример кнопки. Ну как-минимум такое поведение в мозиле. В остальных браузерах клик не проверял, а вот курсор проверял - не наследуется.
 
 Top
Viper
Отправлено: 15 Июля, 2014 - 18:29:12
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
Pavelbeginner проверьте в IE11 получите результат отличный от FF.
Ваша задумка работает только в Хроме. Т.е. кнопка и ссылка выглядят одинаково и срабатывает корректно клик.


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
IllusionMH
Отправлено: 15 Июля, 2014 - 18:50:04
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Viper, IE11 DP проблема решается добавлением overflow: visible;

Pavelbeginner, похоже на баг в FF. Скорее всего поможет только репорт в багтрекер и замена на ссылку. Семантика хромает, но работать будет.
 
 Top
armancho7777777 Супермодератор
Отправлено: 15 Июля, 2014 - 19:03:58
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Не знаю, верно ли я понял задачу:
http://jsfiddle[dot]net/S6tw4/6/
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB