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
Сообщений: 363
Регистрация: 4.4.2011
Из: Калининград
Поблагодарили: 78 раз
Репутация:   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 будет та же чёрная обводка при нажатии на кнопку?

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Перенесу вашу HTML+CSS верстку на Wordpress
0 blackhead 388 9.5.2018, 14:50
автор: blackhead
Открытая тема (нет новых ответов) Есть эксперты HTML + CSS ?
4 _fan_ 611 3.5.2018, 22:32
автор: _fan_
Открытая тема (нет новых ответов) Sonar.Network - облачный сервис поиска ошибок на сайте, валидации html, js, css
0 Tchort 981 20.4.2018, 17:53
автор: Tchort
Открытая тема (нет новых ответов) Доработка сайта html+css
2 Petechka 548 16.4.2018, 12:00
автор: ZaDrotom
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлы[предлагаю] Качественные услуги по PHP/HTML/CSS/JS, любые движки
Услуги программирования
39 Alexandr_js 11989 15.4.2018, 15:15
автор: antikvar99


 



RSS Текстовая версия Сейчас: 20.5.2018, 14:16
Дизайн