Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Ответ
 
Опции темы
Старый 07.08.2016, 12:19   #1
cuyofiveg
Новичок
Джуниор
 
Регистрация: 07.08.2016
Сообщений: 1
По умолчанию Изменение кнопки меню в адаптивной вёрстке

Добрый день.

Помогите, пожалуйста, разобраться, никак не могу сделать так, чтобы на маленьких экранах кнопки становились меньше. Конструкция кнопок выглядит таким вот образом. Как прописать при:

Код HTML:
@media screen and (max-width: 700px) and (min-width: 300px){
их уменьшение? Кнопки даже не думают уменьшаться, просто переносятся в строку, а размер картинок не меняется. Пробовал уже всякое найденное в сети, но ни в какую не меняется размер.

Нужно сделать их адаптивными. Просто картинку адаптивной могу сделать, картинку в виде ссылки могу сделать, но нужно чтобы при наведении картинка менялась, а из-за этого она становится тегом "<a href=...", а в нём картинка указывается через "background: url", а к нему не достучаться.

Пробовал даже такие штуки, не помогает...

Код HTML:
background: url(background.png) no-repeat;
-webkit-background-size: 100%;
-o-background-size: 100%;
-moz-background-size: 100%;
-ms-background-size: 100%;
-khtml-background-size: 100%;
background-size: 100%;


Структура кнопок примерно такая:


Код HTML:
<style>
a.menu1 {
	display: inline-block;
    background: url(images/menu1.png);
    width: 100px;
    height: 60px;
	}

a.menu1:hover {
    background: url(images/menu2.png);
	transition: all 900ms ease-out;
   }
</style>



<table>
<tr>
		<td class="menu">
		<a href="#" class="menu1"> </a>
		</td>
</tr>
</table>
cuyofiveg вне форума Ответить с цитированием
Старый 07.08.2016, 12:58   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

УРЛ при наведении меняй через свойство background-image, тогда он не будет переписывать свойства background-size (вендоры можешь вырезать, они давно не нужны).
Нафига тебе трансишн?
Еще, background-size лучше явно указывать второй параметр, webkit его дублирует с первого параметра и получится
Код:
100% 100%;
вместо
Код:
100% auto;
по w3c.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос по responsive вёрстке Bender1000 HTML и CSS 0 24.07.2015 14:44
Изменение кнопки REztor WPF, UWP, WinRT, XAML 4 14.10.2014 15:24
Как отобразить контекстное меню над контролом (как меню для кнопки Пуск в Винде)? fedorov2012 Общие вопросы Delphi 4 07.01.2013 13:31
Изменение кнопки Painkiller_13 Общие вопросы Delphi 4 11.03.2012 15:49
И сново sendMessage =) Как нажать пункт верхнего меню и меню правой кнопки? TwiX Win Api 9 15.10.2009 00:57


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS
Здесь нужно купить рекламу за 7 тыс руб в месяц! )
пишите сюда - alarforum@yandex.ru
ИКС 840