X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Можно ли менять фон кнопок разной длины в горизонтальном меню на roll-over c CS
shavedcat
shavedcat
Topic Starter сообщение 21.3.2013, 6:56; Ответить: shavedcat
Сообщение #1


Есть навигационная панель (белый шрифт кнопок на красном фоне (шрифт подгружен по CSS)). Необходимо чтобы на roll-over мыши красный фон кнопки менялся на розовый, а на активной странице фон становился синим. При этом шрифт остается белым.
т.е. Необходимо ментяь Фон для текста. Можно ли реализовать это с помощью CSS или придется делать три набора файлов для каждой кнопки (красный фон, розовый и синий)?
Если бы меню было вертикальным, или длина всех кнопок в горизонтальном меню была бы одинаковой, у меня бы не возникало вопросов как это сделать, а в этом случае что-то в голову ничего не приходит кроме простой подмены каждой кнопки в трех разных состояниях.
Спасибо!
Эскизы прикрепленных изображений
Прикрепленное изображение
 
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
cap4369
cap4369
сообщение 21.3.2013, 10:13; Ответить: cap4369
Сообщение #2


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

Добившись желаемого, вносите понравившиеся изменения в таблицу стилей или HTML код в любом редакторе(мне больше всего нравится Notepad++). Если возникнут вопросы, обращайтесь. Отвечу обязательно.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 21.3.2013, 11:11; Ответить: yury_mw
Сообщение #3


Есть навигационная панель (белый шрифт кнопок на красном фоне (шрифт подгружен по 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>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Kirinka
Kirinka
сообщение 21.3.2013, 11:56; Ответить: Kirinka
Сообщение #4


Можно стили немножко трансформировать, при этом, вы получаете возможность гибкой регулировки отступов:
<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>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
shavedcat
shavedcat
Topic Starter сообщение 29.3.2013, 0:06; Ответить: shavedcat
Сообщение #5


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1939 23.3.2024, 7:41
автор: Room
Открытая тема (нет новых ответов) Можно ли в старый SEO текст вместо старого домена поставить новый?
3 Tutich 1151 22.3.2024, 14:47
автор: Tutich
Открытая тема (нет новых ответов) Можно жить на доход с партнёрских программ?
13 Santey 2225 15.3.2024, 19:43
автор: wanessa
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВ РФ приступили к производству антишпионского защищенного смартфона «Р-фон»
17 Room 3006 17.1.2024, 10:19
автор: Antarez
Открытая тема (нет новых ответов) Нужна база блогов на WP, где можно оставить комментарий.
Кто может собрать базу блогов на WP, где можно оставить комментарий.
12 sergey_kazakov 16203 17.9.2021, 15:57
автор: Himena


 



RSS Текстовая версия Сейчас: 29.3.2024, 5:32
Дизайн