Убрать пунктирную рамку с картинки-ссылки в момент нажатия

Эма · February 4, 2012

Привет.

Подскажите, пожалуйста, как убрать пунктирное выделение с картинки-ссылки в момент нажатия?

Стоит explorer 9.

Только начинаю учиться, на форумах ничего не нашла. Не сплю второй день уже. :blink:

<html>

<head>

<title>Пунктирная рамка</title>

</head>

<body>

</body>

</html>

Switch74 · February 4, 2012

попробуй

a{text-decoration:none;}

Edited February 4, 2012 by Switch74

Эма · February 4, 2012

попробуй
a{text-decoration:none;}

<html>

<head>

<title>Пунктирная рамка</title>

a IMG {text-decoration:none;}

a {text-decoration:none;}

</style>

</head>

<body>

</body>

</html>

Не ругайте сильно, я то вставляю? К сожалению мой код не работает.

Switch74 · February 4, 2012

и мя не ругайте за бесполезный совет, нет IE для теста :blush:

у большинства браузеров нет этой рамки, скорее всего это проблема IE посмотри какого цвета эта рамка, если цвет совпадает с цветом ссылки, то можно указать этот цвет как у фона если есть такая возможность

Эма · February 4, 2012

В момент нажатия появляется пунктирная рамка и выглядит по-дурацки. :dash:

Softlink · February 4, 2012

Если рамка вокруг изображения - это бордер у ссылки или фокус, но не text-decoration.

Бордер у ссылки при клике - это псевдокласс :active. Ищите откуда он у вас берется или переопределите бордеры у ссылки.

Switch74 · February 4, 2012

скорее всего это не стиль а сам браузер делает

Эма · February 4, 2012

Если рамка вокруг изображения - это бордер у ссылки или фокус, но не text-decoration.
Бордер у ссылки при клике - это псевдокласс :active. Ищите откуда он у вас берется или переопределите бордеры у ссылки.

Спасибо, но у меня пока не тот уровень чтобы понять ваш совет.

Edited February 4, 2012 by Эма

Switch74 · February 4, 2012

псевдокласс он имел ввиду

a:active{border-width:0px;}

но я не уверен, что это поможет, попробуй

Эма · February 4, 2012

псевдокласс он имел ввиду
a:active{border-width:0px;}
но я не уверен, что это поможет, попробуй

Спасибо за желание помочь, но это не работает

Зашла на apple.com, там много картинок-ссылок с этой дурацкой рамкой, но есть и без рамки.

Да и на этом форуме аватарки и баннеры с рамкой, а вот верхняя панелька с кнопочками без рамки.

Тут наверное совсем принцип иной.

В dremweaver'е в свойствах ничего не нашла.

Наверное надо забыть пока про эту рамку.

Switch74 · February 4, 2012

а вот такой вариант

a{outline:none;}

мне в хроме помогло

Edited February 4, 2012 by Switch74

lexxcode · February 4, 2012

Я среди своего не особо большого ресета использую это:


:focus {
    outline:none;
}

Эма · February 5, 2012

Я среди своего не особо большого ресета использую это:
:focus {
    outline:none;
}

Спасиииибо

Я раньше делала это, но это не работало, а сейчас .... работает

Вот код из dreamweaver'а для картинки и для ссылки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

}

a:hover {

text-decoration: none;

}

a:active {

text-decoration: none;

}

:focus { outline:none;}

</style>

</head>

<a href="http://yandex.ru">ссылка</a>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

вот без этого не работало :angry:

Catherine · February 5, 2012

Я среди своего не особо большого ресета использую это:
:focus {
    outline:none;
}
Спасиииибо
Я раньше делала это, но это не работало, а сейчас .... работает
Вот код из dreamweaver'а для картинки и для ссылки
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
:focus { outline:none;}
</style>
</head>
<body text="#FFFFFF">
<a href="http://yandex.ru"><img src="home1.bmp" border="0"></a>
<a href="http://yandex.ru">ссылка</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
вот без этого не работало

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

:link :visited :hover :focus :active

Порядок описания псевдоклассов для ссылок: http://www.xiper.net/collect/html-and-css-tricks/css-tricks/link-order-desc.html

Edited February 5, 2012 by Catherine

Эма · February 5, 2012

спасибо

все исправила

SelenIT · February 5, 2012

появляется пунктирная рамка и выглядит по-дурацки

Еще более по-дурацки выглядят несчастные пользователи ноутбуков с неудобным тачпадом (или вообще без него), пытающиеся "на ощупь" активировать ссылку с клавиатуры. И не жалеющие крепких слов для горе-эстета, лишившего их такой удобной подсказки, которая из ссылок сейчас активна. Есть мнение, что от отсутствия этой рамки умерло больше пользователей (не успевших вовремя найти жизненно важную ссылку), чем "людей с тонкой душевной организацией", до смерти оскорбленных ее некрасивым видом — от наличия. Если уж убираете outline при фокусе — оставьте хоть какое-нибудь выделение для активной ссылки, хоть цветом, хоть фоном, хоть тенью, хоть стрелочкой, хоть подчеркиванием... пожалуйста!

Либо делайте по-старинке: onclick="this.blur()". Это, кроме прочего, и в старых IE помогает...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
вот без этого не работало

<!DOCTYPE html> достаточно.

Эма · February 6, 2012

спасибо

старые ноутбуки и т.д. это уже не актуально по-моему :blush:

Edited February 6, 2012 by Эма

SelenIT · February 6, 2012

Субноутбуки, у которых тачпад неприлично мал или вообще отсутствует — еще как актуально. Но вообще согласен, удобство пользователей — старо и немодно, главное, чтобы сайт был гламурненький и нравился самому автору!

ablay2009 · February 6, 2012

спасибо
старые ноутбуки и т.д. это уже не актуально по-моему

Да тут дело даже не в старых ноутбуках. А вдруг у пользователя мышка сломалась? Тем более есть люди, которые вообще не пользуются мышкой на компьютере(мышка порой только замедляет работу). Но если вам все-таки так сильно хочется убрать рамку, то прописывайте одинаковые стили для hover и focus, чтобы фокусные ссылки хоть как-то выделялись.

вообще отсутствует

На нем есть кружок-недомышка (между клавишами G-H-B ), пользоваться которым ужасно неудобно(если не невозможно)

Edited February 6, 2012 by ablay2009

Эма · February 7, 2012

эх, умеете уговаривать :blush:

огромное спасибо вам всем, я конспектирую все ваши сообщения на будущее

Sign In

Убрать пунктирную рамку с картинки-ссылки в момент нажатия

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information