VPF::Почему не работает кнопка как ссылка?

Dmitry_177

Дата 1.3.2008, 23:38 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 418
Регистрация: 22.9.2006

Репутация: нет
Всего: нет

решил сделать ссылку кнопкой

<a href=".."><button>ссылка</button></a>

без тегов <button></button> все открывается, а с ними нет..

подскажите что может быть?

Itsys

Дата 2.3.2008, 00:11 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34

Э... так не пойдет, надо так:

Код


<button onclick="document.location='http://www.mysite.ru';"></button>

Это сообщение отредактировал(а) Itsys - 2.3.2008, 00:12

ilyaILF

Дата 2.3.2008, 03:44 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

Обычно так делают, если хотят оформить ссылку-кнопку в виде своей, кастомизированной картинки.
А для стандартной кнопки есть два способа отображения, в виде <input type="button" /> http://www.w3schools.com/tags/tag_input.asp, или <button>Кнопка</button> http://www.w3schools.com/tags/tag_button.asp А уже с этими тегами можно работать как говорил Itsys.

Dmitry_177

Дата 2.3.2008, 13:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 418
Регистрация: 22.9.2006

Репутация: нет
Всего: нет

а получается если JS будет отключен то ничего не откроется?

ilyaILF

Дата 2.3.2008, 14:05 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

Да, если отключен, то не отработает, можете это проверить, например, на FF. Тогда проще будет нарисовать кнопку и постаивть ее background-ом (в том числе составным, для "резиновости" кнопки) к гиперссылке.

Dmitry_177

Дата 2.3.2008, 14:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 418
Регистрация: 22.9.2006

Репутация: нет
Всего: нет

А можно ли как-то ссылку стилизовать под кнопку?

ilyaILF

Дата 2.3.2008, 14:18 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

Конечно можно:

Код


<a href="http://www.google.com" style="display: block; width: 7em; height: 1.5em;">
<div class="top_left_corner">
<div class="top_right_corner">
<div class="bottom_left_corner">
<div class="bottom_left_corner">
GOOGLE
</div>
</div>
</div>
</div>
</a>

Где классы .top_left_corner, .top_right_corner и т.д. как-раз и служат для формирования углов и границ кнопок. Два противоположных угла делаются с большим запасом границ и бэкгроунда, для компенсации увеличения размера кнопки, а два оставшихся угла заканчивают формирование контура кнопки.

Это сообщение отредактировал(а) ilyaILF - 2.3.2008, 14:18

Dmitry_177

Дата 2.3.2008, 14:32 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 418
Регистрация: 22.9.2006

Репутация: нет
Всего: нет

Цитата

Где классы .top_left_corner, .top_right_corner и т.д. как-раз и служат для формирования углов и границ кнопок.

мне их в css самому прописывать нужно?

а можно ли как-то сделать все в css прописать, а в <a> указать только класс из css?

ilyaILF

Дата 2.3.2008, 18:18 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

Ну если делаете сайт непосредственно вы, то да! smile

А выглядеть это все может, с вынесенным наружу CSS-ником, примерно так:

Код


<style type="text/css">
.mybutton {display: block; text-align: center;}
.mybutton .top_left_corner {background: url('images/tlc.gif') no-repeat top left;}
.mybutton .top_right_corner {background: url('images/trc.gif') no-repeat top right;}
.mybutton .bottom_left_corner {background: url('images/blc.gif') no-repeat bottom left;}
.mybutton .bottom_right_corner {background: url('images/brc.gif') no-repeat bottom right; padding: 0.2em 0em 0.2em 0em; width: 6em; }
</style>
...
<a class="mybutton" href="http://www.google.com">
    <div class="top_left_corner">
        <div class="top_right_corner">
            <div class="bottom_left_corner">
                <div class="bottom_right_corner">
                GOOGLE
                </div>
            </div>
        </div>
    </div>
</a>

Это сообщение отредактировал(а) ilyaILF - 2.3.2008, 18:22

Itsys

Дата 2.3.2008, 18:59 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34

Всеравно это не будет работать как кнопка, т.е. эффекта нажатия не будет... в этом случае можно просто img подпихнуть и все smile

bars80080

Дата 3.3.2008, 10:16 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

работать будет как надо, если приложить немного усилий

для эффекта нажатия придётся написать отдельные строки css в виде:

Код


a.mybutton .top_left_corner:hover {background: url('images/tlc1.gif') no-repeat top left;}
a.mybutton .top_left_corner:active {background: url('images/tlc2.gif') no-repeat top left;}

/неуверен в этой конструкции/
где будут подставляться другие рисунки в момент наведения мышки на кнопку tlc1 и в момент нажатия tlc2
однако потом ещё придётся адаптировать эту систему под ИЕ, плюс наверняка вас не устроит задержка с подгрузкой новый рисунков, но и на это тоже есть решения

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

SelenIT

Дата 3.3.2008, 19:03 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

как вариант, оставляющий шанс даже блондинкам юзерам без JS:

Код


<a href="http://tuda.kuda.nado/page.html" title="Включи JS, чудик!;)" id="ConvertMeToButton">Ссылка для бедняг без JS</a>
<script>
var link = document.getElementById("ConvertMeToButton");
var button = document.createElement("button");
button.innerHTML = 'Красивая модная кнопка!';
button.onclick = function() { window.location=link.href; } // забудьте про document.location!
link.parentNode.replaceChild(button,link);
</script>

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »