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


Как Переделать Ссылки В Кнопки


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

#1 Honor

Honor

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 61 сообщений
  • ГородНовосибирск

Отправлено 02 Март 2016 - 15:07

Здравствуйте!
У меня на сайте есть страница Оплата и доставка. Там напротив каждого способа оплаты указаны ссылки на страницы с реквизитами. Напротив каждого способа доставки указаны ссылки на онлайн калькуляторы каждого перевозчика, на страницы адресов терминалов, на страницы отслеживания груза. В общем очень много ссылок. И каждая ссылка выглядит так: Отследить груз: ссылка
Не очень-то красиво.
Необходимо все эти ссылки превратить в кнопки (с общей стилистикой). Нашел несколько вариантов.

1. С помощью кода form <form action="https://www.pochta.ru/tracking" target="_blank"><button type="submit" class="whtblue">Отследить посылку</button></form>
Все бы ничего, но я пытаюсь сделать, чтобы на странице отображались три кнопки подряд в одну строчку (расчет доставки, адреса терминалов, отследить груз), а текст и кнопки съезжают. Не получается их выстроить.
2. <a href="https://www.pochta.ru/tracking" target="_blank"><button class="whtblue">Отследить посылку</button></a>
Так ничего не съезжает. Но после того, как добавляю несколько кнопок, перезагружаю страницу, и при нажатии на кнопку ничего не происходит.

Что я делаю не так? И как корректно изменить нужные мне ссылки на кнопки?

#2 Юля123

Юля123

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

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

Отправлено 02 Март 2016 - 15:43

Просмотр сообщенияHonor (02 Март 2016 - 15:07) писал:

Здравствуйте!
У меня на сайте есть страница Оплата и доставка. Там напротив каждого способа оплаты указаны ссылки на страницы с реквизитами. Напротив каждого способа доставки указаны ссылки на онлайн калькуляторы каждого перевозчика, на страницы адресов терминалов, на страницы отслеживания груза. В общем очень много ссылок. И каждая ссылка выглядит так: Отследить груз: ссылка
Не очень-то красиво.
Необходимо все эти ссылки превратить в кнопки (с общей стилистикой). Нашел несколько вариантов.

1. С помощью кода form <form action="https://www.pochta.ru/tracking" target="_blank"><button type="submit" class="whtblue">Отследить посылку</button></form>
Все бы ничего, но я пытаюсь сделать, чтобы на странице отображались три кнопки подряд в одну строчку (расчет доставки, адреса терминалов, отследить груз), а текст и кнопки съезжают. Не получается их выстроить.
2. <a href="https://www.pochta.ru/tracking" target="_blank"><button class="whtblue">Отследить посылку</button></a>
Так ничего не съезжает. Но после того, как добавляю несколько кнопок, перезагружаю страницу, и при нажатии на кнопку ничего не происходит.

Что я делаю не так? И как корректно изменить нужные мне ссылки на кнопки?

Здравствуйте, мы можем сделать следующим образом, в источнике вы прописываете вместо
<form action="https://www.pochta.ru/tracking" target="_blank"><button type="submit" class="whtblue">Отследить посылку</button></form>

код:

<a href="https://www.pochta.ru/tracking" target="_blank" class="butt"><button type="submit" class="whtblue">Отследить посылку</button></a>

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


Где Вы нажимали на кнопку? Кнопка в редакторе работать не будет, она будет работать только непосредственно на сайте. Для этого выйдите из редактора и кликните по ссылке странице, кнопка должна работать корректно.

#3 Honor

Honor

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 61 сообщений
  • ГородНовосибирск

Отправлено 03 Март 2016 - 06:24

Здравствуйте!
Естественно, что проверяю я все изменения не в редакторе, а на странице. В одной вкладке браузера у меня открыт редактор, в другой результат - редактируемая страница.
Вот сейчас я изменил все кнопки, по Вашему образцу. Можете посмотреть у меня в редакторе, страница "Оплата и доставка_3". Это как черновик.
После того, как вставил почти все коды, обновил страницу, вроде все кнопки появились, все ссылки работали (это видно при наведении курсором на кнопку, внизу страницы появляется адрес ссылки).
Потом таким же образом добавил коды для EMS и СДЭК, сохранил, обновил страницу, у всех предыдущих кнопок ссылки пропали, то есть при наведении курсора адрес ссылки не появляется, и при нажатии на эти кнопки ничего не происходит. Но последние добавленные кнопки работали нормально.
Потом еще раз обновил страницу, и последние добавленные кнопки также перестали работать.
Проверьте пожалуйста, может я где-то допустил ошибку? Страница "Оплата и доставка_3"

#4 Honor

Honor

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 61 сообщений
  • ГородНовосибирск

Отправлено 03 Март 2016 - 06:56

Странно, сейчас снова открыл редактор этой же страницы, и нажал кнопку "Источник". И вместо тех кодов, что я вставлял, стоят такие:
<button class="whtblue" type="submit">Отследить посылку</button>
То есть часть кода, в которой указана ссылка, просто куда-то исчезла.. Сейчас снова вручную все переправлю, и посмотрю результат.

#5 Honor

Honor

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 61 сообщений
  • ГородНовосибирск

Отправлено 03 Март 2016 - 07:57

В общем я пришел к выводу, что код <a> </a> при следующем сохранении в редакторе страницы почему-то пропадает.
Вот сейчас заново с нуля добавил несколько кнопок, сохранил. Проверил на странице - кнопки работают. Тут же в редакторе этой страницы нажимаю "Источник", и вижу, что там уже нет кодов <a> </a>, которые я добавлял минуту назад.
То есть если я бы сейчас еще что-то добавил, и нажал "Сохранить", то у меня сохранились бы последние изменения, а из предыдущих изменений пропали все ссылки, которые обернуты в код а.
Что собственно и происходит.
В чем тут дело?

#6 Юля123

Юля123

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

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

Отправлено 03 Март 2016 - 09:47

Просмотр сообщенияHonor (03 Март 2016 - 07:57) писал:

В общем я пришел к выводу, что код <a> </a> при следующем сохранении в редакторе страницы почему-то пропадает.
Вот сейчас заново с нуля добавил несколько кнопок, сохранил. Проверил на странице - кнопки работают. Тут же в редакторе этой страницы нажимаю "Источник", и вижу, что там уже нет кодов <a> </a>, которые я добавлял минуту назад.
То есть если я бы сейчас еще что-то добавил, и нажал "Сохранить", то у меня сохранились бы последние изменения, а из предыдущих изменений пропали все ссылки, которые обернуты в код а.
Что собственно и происходит.
В чем тут дело?


Да, извините, протестировала, действительно возникает такая проблема, тогда добавьте код:


<form action="https://www.pochta.ru/tracking" target="_blank" class="link-button"><button type="submit">Кнопка-ссылка</button></form>


и в конце main.css добавьте код:

form.link-button {
	display: inline-block;
}

Для каждой формы прописывайте class="link-button, чтобы кнопки стояли друг за другом. Если потребуется изменить стиль кнопки (добавить отступы, поменять цвет и т.д.), то это так же можно сделать.

#7 Honor

Honor

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 61 сообщений
  • ГородНовосибирск

Отправлено 03 Март 2016 - 10:55

Просмотр сообщенияЮля123 (03 Март 2016 - 09:47) писал:

form.link-button {
display: inline-block;
}
Добавил в main.css  Слева появился желтый восклицательный знак (неправильный синтаксис): Element (form.link-button) is overqualified. Just use .link-button without element name. система предлагает удалить form перед .link-button?

#8 Юля123

Юля123

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

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

Отправлено 03 Март 2016 - 10:59

Просмотр сообщенияHonor (03 Март 2016 - 10:55) писал:

Добавил в main.css  Слева появился желтый восклицательный знак (неправильный синтаксис): Element (form.link-button) is overqualified. Just use .link-button without element name. система предлагает удалить form перед .link-button?

Можно удалить form, это не повлияет на работу. Но и ошибки в этом нет, просто рекомендация.

#9 Honor

Honor

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 61 сообщений
  • ГородНовосибирск

Отправлено 03 Март 2016 - 11:10

Ну вроде получилось с одной кнопкой )) Буду допиливать остальные. Только к стилю кнопки добавил еще атрибут class=whtblue, а то кнопка некрасивая получалась.




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

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