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



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

#1 shavedcat
shavedcat
  • Неактивные
  • 18 сообщений
  • Репутация: 0
0

Обновлено 28 марта 2013 - 23:06  Отправлено 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
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 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



Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 48 3 темы, 7 сообщений, 2 балла репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 40.5 Вне конкурса за определение пользователя месяца

  • Фотография SergiuS85
    #3

    SergiuS85
    Очков активности: 12 2 темы, 2 сообщения, 1 балл репутации

  • Фотография WGN
    #4

    WGN (worldgamenews.com)
    Очков активности: 12 1 тема, 5 сообщений, 1 балл репутации

  • Фотография Totti
    #5

    Totti
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Фотография kuztoday
    #6

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография Zevss
    #7

    Zevss (domles43.ru)
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография Sale_account
    #8

    Sale_account
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография Megoydagi
    #9

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография mkreine
    #10

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

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