Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 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 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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