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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

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

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

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

    WGN (worldgamenews.com)
    Очков активности: 90 Вне конкурса за определение пользователя месяца

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

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

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

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

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

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

  • Фотография Алексей111
    #7

    Алексей111
    Очков активности: 39 6 тем, 8 сообщений, 1 балл репутации

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

    AnnaYa (topbase.ru)
    Очков активности: 36 2 темы, 6 сообщений, 2 балла репутации

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

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

  • Фотография Игорь Ку
    #10

    Игорь Ку (dudesday.ru)
    Очков активности: 24 1 тема, 5 сообщений, 2 балла репутации

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

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 26.09.2018
  • Яндекс выдача: 26.09.2018
Топ 5 участников по репутации


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

#1 shavedcat

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

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

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

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

  • navigation.jpg

 

 

  • 0

#2 cap4369

cap4369
  • Неактивные
  • 62 сообщений
  • Репутация: 1

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

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

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

#3 yury

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

Отправлено 21 March 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 March 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 March 2013 - 23:06

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



Похожие темы

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

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