Помощник
|
Можно ли менять фон кнопок разной длины в горизонтальном меню на roll-over c CS |
shavedcat
|
Сообщение
#1
|
||
|
|
||
|
|||
cap4369 |
21.3.2013, 10:13;
Ответить: cap4369
Сообщение
#2
|
|
Конечно можно!
Есть отличный плагин для браузера Firefox, он называется firebug (скачать и установить его не проблема) Он позволяет редактировать код (HTML, CSS)прямо в браузере, так как тебе хочется и тут же смотреть изменения. Есть возможность регулирования всевозможных отступов на макете просматриваемого сайта. При этом изменения после выхода из firebug не сохраняются, так что с исходным кодом можно играться как душе угодно, не боясь что- нибудь испортить. Ну и конечно нужна програмка для подбора цвета. Я например, чтобы не пользоваться для этого фотошопом использую Colormania Добившись желаемого, вносите понравившиеся изменения в таблицу стилей или HTML код в любом редакторе(мне больше всего нравится Notepad++). Если возникнут вопросы, обращайтесь. Отвечу обязательно. |
|
|
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 |
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
|
Сообщение
#5
|
|
|
Спасибо огромное!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Через какой браузер и как можно найти в кэшэ браузера видео | 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 |
Текстовая версия | Сейчас: 29.3.2024, 5:32 |