Перейти к содержимому


Сделать Кнопку На Главной


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 14

#1 Serg83

Serg83

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 530 сообщений
  • Городсанкт-петербург

Отправлено 09 Октябрь 2014 - 19:40

Добрый вечер.

Помогите сделать кнопочку на главной.
пока получилось сделать только такой скрипт:
	 <a href="http://knife-for-life.ru/page/Pochemu-vybirayut-nas" style="float: right; width:250px; background: #d31d1d;color: #fff; border: 1.5px solid #1b1224;">Почему мы?</a>

получилось так:
кнопка.jpg

а хочется сделать примерно так:
кнопка2.jpg

потом цвета, размеры и расположение кнопки будем подгонять. пока же даже сдвинуть ее с места не получается :(


и задача номер 2: сделать кнопку не просто ссылкой, а сделать еще всплывающий блок при наведении на кнопку - можно просто картинкой со скрином или дублем страницы, смотря что лучше будет смотреться

#2 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 09 Октябрь 2014 - 21:53

Просмотр сообщенияSerg83 (09 Октябрь 2014 - 19:40) писал:

Добрый вечер.

Помогите сделать кнопочку на главной.
пока получилось сделать только такой скрипт:
	 <a href="http://knife-for-life.ru/page/Pochemu-vybirayut-nas" style="float: right; width:250px; background: #d31d1d;color: #fff; border: 1.5px solid #1b1224;">Почему мы?</a>

получилось так:
Прикрепленный файл кнопка.jpg

а хочется сделать примерно так:
Прикрепленный файл кнопка2.jpg

потом цвета, размеры и расположение кнопки будем подгонять. пока же даже сдвинуть ее с места не получается :(


и задача номер 2: сделать кнопку не просто ссылкой, а сделать еще всплывающий блок при наведении на кнопку - можно просто картинкой со скрином или дублем страницы, смотря что лучше будет смотреться
Здравствуйте, на данный момент не вижу данной кнопки у Вас на сайте, уточните так же функционал данной кнопки.

#3 Serg83

Serg83

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 530 сообщений
  • Городсанкт-петербург

Отправлено 10 Октябрь 2014 - 09:20

Просмотр сообщенияИрина345 (09 Октябрь 2014 - 21:53) писал:

Здравствуйте, на данный момент не вижу данной кнопки у Вас на сайте, уточните так же функционал данной кнопки.

кнопка скрыта, потому что выглядит крайне не презентабельно (скрин и ее код я приводил выше). если нужно могу включить ее

назначение кнопки:
1) при наведении - всплывающее окно (картинка или страничка)
2) при клике - открывается страница: "http://knife-for-lif...-vybirayut-nas", при полной реализации там будет расширена информация

#4 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 10 Октябрь 2014 - 10:09

Просмотр сообщенияSerg83 (10 Октябрь 2014 - 09:20) писал:

кнопка скрыта, потому что выглядит крайне не презентабельно (скрин и ее код я приводил выше). если нужно могу включить ее

назначение кнопки:
1) при наведении - всплывающее окно (картинка или страничка)
2) при клике - открывается страница: "http://knife-for-lif...-vybirayut-nas", при полной реализации там будет расширена информация
Найдите в html
   <!-- Кнопка Почему мы 
	   <a href="http://knife-for-life.ru/page/Pochemu-vybirayut-nas" style="float: right; width:250px; background: #d31d1d;color: #fff; border: 1.5px solid #1b1224;">Почему мы?</a>
	   <!-- Кнопка Почему мы -->
замените на
 <div class="why"><a href="http://knife-for-life.ru/page/Pochemu-vybirayut-nas" style="float: right; width:107px; background: #d31d1d;color: #fff; border: 1.5px solid #1b1224;">Почему мы?</a></div>

добавьте в конец main.css
.why a {
padding: 2px 0px 4px 14px;
}

      уточните какая картинка должна всплывать и как

#5 Serg83

Serg83

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 530 сообщений
  • Городсанкт-петербург

Отправлено 12 Октябрь 2014 - 14:56

Просмотр сообщенияИрина345 (10 Октябрь 2014 - 10:09) писал:

Найдите в html
<!-- Кнопка Почему мы
<a href="http://knife-for-life.ru/page/Pochemu-vybirayut-nas" style="float: right; width:250px; background: #d31d1d;color: #fff; border: 1.5px solid #1b1224;">Почему мы?</a>
<!-- Кнопка Почему мы -->
замените на
 <div class="why"><a href="http://knife-for-life.ru/page/Pochemu-vybirayut-nas" style="float: right; width:107px; background: #d31d1d;color: #fff; border: 1.5px solid #1b1224;">Почему мы?</a></div>

добавьте в конец main.css
.why a {
padding: 2px 0px 4px 14px;
}

  уточните какая картинка должна всплывать и как

пусть будет любая абстрактная картинка. это же не играет значения и не влияет на реализацию...
да и не обязательно картинка должна быть, я ранее писал об этом. все зависит от того, что что будет выглядеть лучше.
нужно сделать всплывающее окно, которое будет отображается при наведении на эту кнопку.
просто картинка возможно проще в реализации.

#6 Serg83

Serg83

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 530 сообщений
  • Городсанкт-петербург

Отправлено 13 Октябрь 2014 - 16:05

Просмотр сообщенияИрина345 (10 Октябрь 2014 - 10:09) писал:

Найдите в html
<!-- Кнопка Почему мы
<a href="http://knife-for-life.ru/page/Pochemu-vybirayut-nas" style="float: right; width:250px; background: #d31d1d;color: #fff; border: 1.5px solid #1b1224;">Почему мы?</a>
<!-- Кнопка Почему мы -->
замените на
 <div class="why"><a href="http://knife-for-life.ru/page/Pochemu-vybirayut-nas" style="float: right; width:107px; background: #d31d1d;color: #fff; border: 1.5px solid #1b1224;">Почему мы?</a></div>

добавьте в конец main.css
.why a {
padding: 2px 0px 4px 14px;
}

  уточните какая картинка должна всплывать и как

еще вопросы по той же кнопке:
1) как сдвинуть ее вниз и левее?
2) как задать ей градиент цвета? изменение цвета сверху вниз.
3) как сделать кнопку больше?
4) как сделать шрифт кнопки больше?

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 14 Октябрь 2014 - 01:06

изначально стили в самой кнопке лучше убрать, а именно удалить:
style="float: right; width:107px; background: #d31d1d;color: #fff; border: 1.5px solid #1b1224;"

лучше в файл стилей их перенести,т.е. :
.why a {
padding: 2px 0px 4px 14px;
}
замените на:
.why a {
padding: 2px 0px 4px 14px;
float: right;
width:107px;
background: #d31d1d;
color: #fff;
border: 1.5px solid #1b1224;
}
1. Измените значение стиля padding
2. Вместо
background: #d31d1d;
пропишите:
background: #ccc; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); /* для IE6-9 */
background: -webkit-linear-gradient(top, #fff, #000); /* для webkit-браузеров */
background: -moz-linear-gradient(top,  #fff,  #000); /* для firefox 3.6+ */
background: -o-linear-gradient(top,  #fff,  #000); /* для Opera 11.10+ */
background: -ms-linear-gradient(top,  #fff,  #000); /* для IE10+ */
background: linear-gradient(to bottom,  #fff,  #000); /* W3C */
и измените значения цвета #fff и #000
3. увеличьте значение стиля width
4. Пропишите стиль font-size:16px;

#8 Serg83

Serg83

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 530 сообщений
  • Городсанкт-петербург

Отправлено 15 Октябрь 2014 - 22:02

Просмотр сообщенияVaccina (14 Октябрь 2014 - 01:06) писал:

1. Измените значение стиля padding


Vaccina, большое спасибо.

но изменением padding получается вот что - кнопка увеличивается. ощущение что двигается текст, а не сама кнопка
кнопка.jpg

#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 15 Октябрь 2014 - 23:49

Причина в разных значениях стиля padding, замените на сл.пример:
padding: 20px;
также добавьте стиль центрирующий текст:
text-align:center;


#10 Serg83

Serg83

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 530 сообщений
  • Городсанкт-петербург

Отправлено 16 Октябрь 2014 - 17:04

Просмотр сообщенияVaccina (15 Октябрь 2014 - 23:49) писал:

Причина в разных значениях стиля padding, замените на сл.пример:
padding: 20px;
также добавьте стиль центрирующий текст:
text-align:center;

не помогло....
верхний правый угол кнопки как будто приклеен к углу сайта...

#11 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 16 Октябрь 2014 - 17:11

Просмотр сообщенияSerg83 (16 Октябрь 2014 - 17:04) писал:

не помогло....
верхний правый угол кнопки как будто приклеен к углу сайта...
Здравствуйте.
Если я Вас правильно понял, то Вам нужно немного спустить кнопу.
Для этого в main.css найдите код
.why a {
padding: 15px 4px 20px 34px;
float: right;
width: 130px;
background: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');
background: -webkit-linear-gradient(top, #fff, #000);
background: -moz-linear-gradient(top, #fff, #000);
background: -o-linear-gradient(top, #fff, #000);
background: -ms-linear-gradient(top, #fff, #000);
background: linear-gradient(to bottom, #fff, #000);
color: #fff;
border: 1.5px solid #1b1224;
font-size: 16px;
}
И замените на
.why a {
padding: 15px 4px 20px 34px;
float: right;
width: 130px;
background: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');
background: -webkit-linear-gradient(top, #fff, #000);
background: -moz-linear-gradient(top, #fff, #000);
background: -o-linear-gradient(top, #fff, #000);
background: -ms-linear-gradient(top, #fff, #000);
background: linear-gradient(to bottom, #fff, #000);
color: #fff;
border: 1.5px solid #1b1224;
font-size: 16px;
margin: 5px 0px 1px 1px;
}
Так же можете сами отредактировать её положение изменяя
 margin: 5px 0px 1px 1px;


#12 Serg83

Serg83

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 530 сообщений
  • Городсанкт-петербург

Отправлено 16 Октябрь 2014 - 17:17

Просмотр сообщенияDanil (16 Октябрь 2014 - 17:11) писал:

Здравствуйте.
Если я Вас правильно понял, то Вам нужно немного спустить кнопу.


да, все верно поняли! спасибо!

может быть вы знаете как всплывающее окно сделать на это кнопке? :)

#13 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 16 Октябрь 2014 - 23:57

уточните пожалуйста, что всплывать в окне должно

#14 Serg83

Serg83

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 530 сообщений
  • Городсанкт-петербург

Отправлено 17 Октябрь 2014 - 15:30

Просмотр сообщенияVaccina (16 Октябрь 2014 - 23:57) писал:

уточните пожалуйста, что всплывать в окне должно

Vaccina, рад Вас видеть.

Давайте расскажу суть идеи:
Сейчас стоит кнопка, при нажатии на которую открывается отдельная страница. Но есть подозрения, что она может быть не интересна или по ней не будут кликать. Отсюда и мысль о том, чтобы сделать всплывающее окно с той же информацией, которая будет видна при наведении на кнопку. Думаю так ее увидит больше посетителей.

#15 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 18 Октябрь 2014 - 00:54

В шаблоне HTML после кода кнопки вставляете блок с контекстом, пример:
<div class="modal">
<div>
текст
</div>
</div>

и также ниже вставляем:
  <script type="text/javascript">
$('.why a').hover(function(e) {
e.preventDefault();
var content = $('.modals > div');
$.fn.nyroModalManual({
content: content,
minWidth: 500,
minHeight: 300,
gallery: null
});
});
</script>





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных