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



 

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

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

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


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

Есть блог на 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


Есть два варианта с помощью скриптов\без.
С первым помочь не смогу, но со вторым:
Необходимо сделать копию картинки с градиентом, но в перевернутом состоянии.
И вписать новый адрес картинки под 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


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

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

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


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


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

onclick


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


(амд @ 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


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

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

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


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

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


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


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


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

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

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 660 3.3.2021, 12:22
автор: kozak199110
Открытая тема (нет новых ответов) Как Изменить цвет картинки под фон сайта через css?
15 HITMAN84 2044 29.1.2021, 22:21
автор: Coffee
Открытая тема (нет новых ответов) Продам адаптивный шаблон (css/html/js) под cj/tube сайт
2 zaiko 600 29.12.2020, 23:49
автор: zaiko
Открытая тема (нет новых ответов) Верстка, программирование и создание сайтов (css,html, js, jq, php)
2 Alex_phoenix_Voit 1619 15.6.2020, 18:50
автор: Alex_phoenix_Voit
Открытая тема (нет новых ответов) Синтаксис CSS
0 sergei_burg 3909 6.3.2020, 8:06
автор: -sergei1980-


 



RSS Текстовая версия Сейчас: 13.4.2021, 3:18
Дизайн