Проблема с кнопками и CSS - SEO форум MaulTalk.com

Сообщение сайта

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

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

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

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Проблема с кнопками и CSS

Опции

амд

Topic Starter

17.4.2012, 0:10; Ответить: амд

Сообщение #1

Старичок

Группа: Active User
Сообщений: 552
Регистрация: 7.8.2009
Поблагодарили: 114 раз
Репутация:

Наперед скажу - я не очень силён и многое пока что делаю по урокам, но вот возникла проблема.

Есть блог на Word Press и хотелось бы отредактировать блоки поиска, а если точнее - кнопки (происходит через файл "master.css").

Вот непосредственно код

Полоска ввода текста

#search_form input.search {
margin: 15px 0 0 0;
padding: 5px 2px;
width: 180px;
border: 1px solid #DED8D5;
background: #F3F3F3;
color: #555;
}

Кнопка

#search_form input#searchsubmit {
background: #fc9716 url(http://***.ru/images/knopka.gif) repeat-x;
border: 1px solid #f9a58c;
height: 28px;
width: 66px;
font: 12px/Arial,Helvetica,Sans-serif;
color: #fff;
margin: 0 0 0 5px;
text-align: center;
-webkit-border-radius: 7x;
-moz-border-radius: 7px;
border-radius: 7px;
}

Что касается оформления самой кнопочки - всё прошло отлично и я изменил код так, как мне хочется.

Но хочу еще прописать, чтобы при наведении курсора градиент переворачивался на 180 градусов. Ну, чтобы объема ей придать. Я читал, что за это вроде-бы отвечает "hover", но я как не пытался его пристыковать, ничего не получалось.

Кто знает, как это сделать? Буду очень благодарен

Сообщение отредактировал амд - 17.4.2012, 0:13

Ответить с цитированием данного сообщения

KRoN KRoN 17.4.2012, 1:02; Сообщений: 475 Поблагодарили: 72 раза Репутация: 17 Просмотр профиля	17.4.2012, 1:02; Ответить: KRoN Сообщение #2
Бывалый Группа: User Сообщений: 475 Регистрация: 10.8.2010 Из: __Санкт-Петербург__ kronolius@gmail.com Поблагодарили: 72 раза Репутация: 17	Есть два варианта с помощью скриптов\без. С первым помочь не смогу, но со вторым: Необходимо сделать копию картинки с градиентом, но в перевернутом состоянии. И вписать новый адрес картинки под hover. Примерно должно выглядеть так, если ничего не напутал: #search_form input#searchsubmit { background: #fc9716 url(http://*.ru/images/knopka.gif) repeat-x; border: 1px solid #f9a58c; height: 28px; width: 66px; font: 12px/Arial,Helvetica,Sans-serif; color: #fff; margin: 0 0 0 5px; text-align: center; -webkit-border-radius: 7x; -moz-border-radius: 7px; border-radius: 7px; } #search_form input#searchsubmit:hover { background: #fc9716 url(http://.ru/images/knopka_new.gif) repeat-x; } Где knopka_new.gif - ссылка на перевернутое изображение... Сообщение отредактировал KRoN* - 17.4.2012, 1:04 -------------------- Я спасу этот мир (с) Поблагодарили: (1) амд

амд Topic Starter амдTopic Starter 17.4.2012, 3:47; Сообщений: 552 Поблагодарили: 114 раз Репутация: 28 Просмотр профиля	Topic Starter 17.4.2012, 3:47; Ответить: амд Сообщение #3
Старичок Группа: Active User Сообщений: 552 Регистрация: 7.8.2009 Поблагодарили: 114 раз Репутация: 28	Тысяча благодарностей! Я бы даже не додумался до такой простоты Всё удалось и стало прямо как надо Кстати, вы не в курсе, какой тег отвечает за нажатие, именно клик? Поблагодарили: (1) KRoN

idlerdog idlerdog 17.4.2012, 8:55; Сообщений: 120 Поблагодарили: 13 раз Репутация: 2 Просмотр профиля	17.4.2012, 8:55; Ответить: idlerdog Сообщение #4
Участник Группа: User Сообщений: 120 Регистрация: 29.8.2011 Поблагодарили: 13 раз Репутация: 2	ЕМНИП >>Кстати, вы не в курсе, какой тег отвечает за нажатие, именно клик? onclick Поблагодарили: (1) амд

Skreep Skreep 17.4.2012, 9:03; Сообщений: 37 Поблагодарили: 14 раз Репутация: 3 Просмотр профиля	17.4.2012, 9:03; Ответить: Skreep Сообщение #5
Новичок Группа: User Сообщений: 37 Регистрация: 27.3.2012 Из: Саратов, РФ Поблагодарили: 14 раз Репутация: 3	(амд @ 17.4.2012, 3:47) Кстати, вы не в курсе, какой тег отвечает за нажатие, именно клик? В css - active. Например: #btn_search:active {color:red} Сообщение отредактировал Skreep - 17.4.2012, 9:04 -------------------- Проектирование интерфейсов, создание уникальных настраиваемых веб-ресурсов Поблагодарили: (1) амд

SergeiVL SergeiVL 17.4.2012, 15:26; Сообщений: 373 Поблагодарили: 78 раз Репутация: 23 Просмотр профиля	17.4.2012, 15:26; Ответить: SergeiVL Сообщение #6
Бывалый Группа: User Сообщений: 373 Регистрация: 4.4.2011 Из: Калининград Поблагодарили: 78 раз Репутация: 23	(амд @ 17.4.2012, 2:47) Тысяча благодарностей! Я бы даже не додумался до такой простоты Всё удалось и стало прямо как надо Кстати, вы не в курсе, какой тег отвечает за нажатие, именно клик? Если подключена js библиотека jquery: то можно сделать так: $('#idElementa').click(function(){ alert('Вы нажали кнопку'); }); -------------------- Готовое решение для монетизации download-трафика \| Мой блог Поблагодарили: (1) амд

амд

Topic Starter сообщение

18.4.2012, 13:07; Ответить: амд

Сообщение #7

Старичок

Группа: Active User
Сообщений: 552
Регистрация: 7.8.2009
Поблагодарили: 114 раз
Репутация:

Возился я с этими кнопками целый день, а сегодня утром случайно забрёл на один форум и увидел там, что оказывается это Opera делает отвратительную черную обводку размером 1px при нажатии на кнопки. Зашел проверил сайт через Safari - нет этой ужасной обводки при нажатии.

Как я понял особенность браузера ничем не изменить, а даже если изменить, то они будут только у меня, а у других пользователей Opera будет та же чёрная обводка при нажатии на кнопку?

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Разработка/доработка сайтов Wordpress, HTML/CSS/JS Вёрстка, перенос на WP, правки	9	malamut	3445	25.1.2024, 14:36 автор: malamut
СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое	5	CULA	3384	19.12.2023, 18:55 автор: CULA
Веб-разработка (HTML, CSS)	1	ViktoriaFE	6459	5.5.2021, 5:22 автор: bekett
Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).	0	kozak199110	1667	3.3.2021, 12:22 автор: kozak199110
Продам адаптивный шаблон (css/html/js) под cj/tube сайт	2	zaiko	1433	29.12.2020, 23:49 автор: zaiko

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 16.4.2024, 13:01

Дизайн