Перейти к содержимому

Сервис обмена электронных валют


Можно ли менять фон кнопок разной длины в горизонтальном меню на roll-over c CS

#1 shavedcat

shavedcat
  • Пользователь
  • 18 сообщений
  • Репутация: 0
0

Отправлено 21 Март 2013 - 05:56

Есть навигационная панель (белый шрифт кнопок на красном фоне (шрифт подгружен по CSS)). Необходимо чтобы на roll-over мыши красный фон кнопки менялся на розовый, а на активной странице фон становился синим. При этом шрифт остается белым.
т.е. Необходимо ментяь Фон для текста. Можно ли реализовать это с помощью CSS или придется делать три набора файлов для каждой кнопки (красный фон, розовый и синий)?
Если бы меню было вертикальным, или длина всех кнопок в горизонтальном меню была бы одинаковой, у меня бы не возникало вопросов как это сделать, а в этом случае что-то в голову ничего не приходит кроме простой подмены каждой кнопки в трех разных состояниях.
Спасибо!

Прикрепленные изображения

  • navigation.jpg

 

 

  • 0

#2 cap4369

cap4369
  • Пользователь
  • 62 сообщений
  • Репутация: 1

Отправлено 21 Март 2013 - 09:13

Конечно можно!
Есть отличный плагин для браузера Firefox, он называется firebug (скачать и установить его не проблема) Он позволяет редактировать код (HTML, CSS)прямо в браузере, так как тебе хочется и тут же смотреть изменения. Есть возможность регулирования всевозможных отступов на макете просматриваемого сайта. При этом изменения после выхода из firebug не сохраняются, так что с исходным кодом можно играться как душе угодно, не боясь что- нибудь испортить. Ну и конечно нужна програмка для подбора цвета. Я например, чтобы не пользоваться для этого фотошопом использую Colormania

Добившись желаемого, вносите понравившиеся изменения в таблицу стилей или HTML код в любом редакторе(мне больше всего нравится Notepad++). Если возникнут вопросы, обращайтесь. Отвечу обязательно.
  • 0

#3 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 21 Март 2013 - 10:11

Есть навигационная панель (белый шрифт кнопок на красном фоне (шрифт подгружен по CSS)). Необходимо чтобы на roll-over мыши красный фон кнопки менялся на розовый, а на активной странице фон становился синим. При этом шрифт остается белым. т.е. Необходимо ментяь Фон для текста. Можно ли реализовать это с помощью CSS или придется делать три набора файлов для каждой кнопки (красный фон, розовый и синий)?

Примерно так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>tst</title>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
ul#menu{
  list-style: none;
  padding-left: 15px;
  height: 26px;
  background: #822; /*красный фон для строки меню, где нет кнопок*/
}
ul#menu li{
  float: left;
  height: 26px;
}
ul#menu li a{
  float: left;
  padding: 0 5px;
  height: 26px;
  font: bold 11px/26px Arial, "Nimbus Sans L", Helvetica, sans-serif;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background: #822; /*красный фон для обычной кнопки*/
}
ul#menu li a:hover{
  background: #a55;/*розовый фон под курсором мыши*/
}
ul#menu li a#cur{
  background: #55a; /*синий фон для активной страницы*/
}
ul#menu li a#cur:hover{
  background: #77c; /*светло-синий фон для активной страницы под курсором*/
}
</style>
</head>
<body>
<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Biography</a></li>
  <li><a href="#">Repertoire</a></li>
  <li><a href="#">Concert</a></li>
  <li><a href="#">Purchase CD</a></li>
  <li><a href="#">Media</a></li>
  <li><a href="#" id="cur">Links</a></li>
  <li><a href="#">Photos</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</body>
</html>

  • 1

#4 Kirinka

Kirinka
  • Пользователь
  • 57 сообщений
  • Репутация: 12

Отправлено 21 Март 2013 - 10:56

Можно стили немножко трансформировать, при этом, вы получаете возможность гибкой регулировки отступов:

<style type="text/css">

*{

margin:0;

padding:0;

}

ul#menu{

background:#882222;

overflow:hidden;

list-style:none;

}

ul#menu li{

float:left;

text-transform:uppercase;

}

ul#menu li a{

text-decoration:none;

color:#fff;

font: bold 11px Arial, "Nimbus Sans L", Helvetica, sans-serif;

display:inline-block;

padding:5px;

}

ul#menu li a:hover{

background:#D96666;

}

ul#menu li a#cur{

background:#6C51D9;

}

</style>


  • 1

#5 shavedcat

shavedcat
    Topic Starter
  • Пользователь
  • 18 сообщений
  • Репутация: 0

Отправлено 28 Март 2013 - 23:06

Спасибо огромное!!!!!!!!!!!!!!!!!!!!!!!!!
  • 0


Оформление форума – IPBSkins.ru