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



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Проблема с кнопками и CSS
амд
амд
Topic Starter сообщение 17.4.2012, 0:10; Ответить: амд
Сообщение #1


Старичок
*****

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


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

Есть блог на 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", но я как не пытался его пристыковать, ничего не получалось.

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

Сообщение отредактировал амд - 17.4.2012, 0:13
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
KRoN
KRoN
сообщение 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 сообщение 17.4.2012, 3:47; Ответить: амд
Сообщение #3


Старичок
*****

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


Тысяча благодарностей! Я бы даже не додумался до такой простоты smile.gif

Всё удалось и стало прямо как надо smile.gif

Кстати, вы не в курсе, какой тег отвечает за нажатие, именно клик?


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
idlerdog
idlerdog
сообщение 17.4.2012, 8:55; Ответить: idlerdog
Сообщение #4


Участник
***

Группа: User
Сообщений: 120
Регистрация: 29.8.2011
Поблагодарили: 13 раз
Репутация:   2  


ЕМНИП
>>Кстати, вы не в курсе, какой тег отвечает за нажатие, именно клик?

onclick


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Skreep
Skreep
сообщение 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; Ответить: SergeiVL
Сообщение #6


Бывалый
****

Группа: User
Сообщений: 360
Регистрация: 4.4.2011
Из: Калининград
Поблагодарили: 77 раз
Репутация:   22  


(амд @ 17.4.2012, 2:47) *
Тысяча благодарностей! Я бы даже не додумался до такой простоты smile.gif

Всё удалось и стало прямо как надо smile.gif

Кстати, вы не в курсе, какой тег отвечает за нажатие, именно клик?


Если подключена js библиотека jquery: то можно сделать так:

$('#idElementa').click(function(){
        alert('Вы нажали кнопку');
});


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
амд
амд
Topic Starter сообщение 18.4.2012, 13:07; Ответить: амд
Сообщение #7


Старичок
*****

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


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

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Проги для редактирования style.css
14 minutkin 1069 11.12.2017, 16:01
автор: Nell
Открытая тема (нет новых ответов) Проблема индексации в Google
12 Saitcena 2959 22.11.2017, 17:34
автор: metvekot
Горячая тема (нет новых ответов) [предлагаю] Качественные услуги по PHP/HTML/CSS/JS, любые движки
Услуги программирования
31 Alexandr_js 10057 2.11.2017, 16:36
автор: gretskov
Открытая тема (нет новых ответов) Проблема с 301 редиректом в htaccess
не срабатывает с (без www) на www
14 danc1r0k 1995 2.11.2017, 14:44
автор: vadosseo
Открытая тема (нет новых ответов) Оформление внешних ссылок при помощи CSS
Каким образом можно оформить стилями внешние ссылки сайта
7 komarik_vlad 873 25.10.2017, 9:30
автор: x64


 



RSS Текстовая версия Сейчас: 17.12.2017, 8:31
Дизайн