Как убрать рамку вокруг изображений-ссылок

Изображения — ссылки

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

Как сделать в HTML ссылки — изображения?

Вы знаете, наверное, это будет одним из самых простых уроков. Потому что, чтобы сделать из картинки ссылку надо в тег поместить тег . Все.

Пример создания ссылок — изображений в HTML

Результат в браузере

Самое главное не забывайте указывать обязательные атрибуты тега — alt и src . А также необязательные, но настоятельно рекомендуемые width и height , даже когда вы не меняете размеры изображений.

Как убрать рамку вокруг изображения — ссылки?

Некоторые браузеры по умолчанию рисуют вокруг изображений — ссылок небольшие рамки, по цвету совпадающие с цветом обычных ссылок на HTML-странице. В примере указанном выше вы их в любом случае не увидите, так как я убрал эти рамки на всей странице. Но как это примерно выглядит, вы можете посмотреть:

Отображение рамок вокруг изображений.

Согласитесь не очень красиво. В старом HTML у тега имелся специальный атрибут border , который мог убрать рамку, но в новом его нет, поэтому снова используем стили (CSS). Итак, убрать у изображения рамку можно несколькими способами, я покажу вам два (если решите когда-то вплотную взяться за CSS, то узнаете еще один).

Первый. Можно указать в теге атрибут style= «border:0» , как мы это делали, когда убирали рамки у линий в уроке Горизонтальные линии.

Но лучше использовать второй вариант и убрать их сразу на всей HTML-странице. Для этого надо в «шапке» документа ( ) установить тег , как мы делали в уроке по изменению цвета ссылок, и написать внутри него такую строку:

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

Кстати, если в «шапке» страницы у вас уже имеется

Эксперименты на Blogger

В помощь блогеру на Blogspot-е

Страницы

Как убрать рамку вокруг изображения

По умолчанию в блогах на Blogspot-е вокруг изображений (фотографий) в тексте статьи отображается рамка с небольшой тенью. Эта несколько невнятная рамка иногда меня раздражала, но как от неё избавиться, я не знала. Пока совершенно случайно не наткнулась на статью «How To Remove Blogger Picture/Image Shadow And Border».
Оказывается, всё очень просто: нужно просто внести изменения в CSS.
Для этого открываем вкладку «Дизайн» в админке блога → ссылка «Дизайнер шаблонов» → вкладка «Дополнительно» → Добавить CSS

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img <
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
>

Ниже приведу скриншоты до и после внесения изменений в CSS.

Илон Маск рекомендует:  Кнопки навигации вперед, назад, обновить

HTML: Как сделать картинку ссылкой

Вы наверное не раз замечали, что на многих сайтах в качестве ссылок используются различные картинки, которые по принципу работы ничем не отличаются от текстовых ссылок. Для того чтобы заменить обычную текстовую ссылку на изображение, нужно внутрь элемента поместить тег , который указывает путь к изображению:

Убираем рамку

При использовании изображений в качестве ссылок браузеры автоматически будут добавлять к ним рамку, которая легко убирается с помощью CSS свойства border со значением none.

Чтобы убрать рамку у картинки ссылки, можно прописать свойство border в атрибут style:

Этот способ подойдёт когда картинка ссылка всего одна. Но если у вас много таких ссылок, то лучше прописать стиль сразу ко всем картинкам, которые вложены в тег , сделать это можно так:

Просто добавьте этот код к остальным стилям и он уберёт рамки у всех картинок, являющихся ссылками.

Убираем рамку с эл-ов в фокусе

Задача

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

Теория

Замечали наверное, что при клике по кнопке или ссылке, вокруг этих элементов появляется пунктирная рамка.

Это функция браузера, которая выделяет элемент для большего удобства пользователя. Вроде эта рамка никому особо не мешает, но вот незадача — она не всегда вписывается в задумку дизайнера и приходиться от нее избавляться.

Решение с помощью CSS

Убираем рамку вокруг ссылок

Для ссылок все просто — добавляем в начало основного или reset.css правило:

Убираем рамку вокруг кнопок

Работает для и для .

Убираем рамку вокруг input type=»radio»

Детальней об этом можно прочитать тут.

Убираем рамку вокруг input type=»checkbox»

Решение с помощью Javascript

Добавляем в HTML элементу, у которого хотим убрать рамку onfocus=»this.blur();».

  • все просто
  • работает почти для всех элементов
  • нельзя попасть на элемент с помощью клавиатуры (tab обход)
  • работает только при включенном Javascript
  • «загрязняет» код

Более привлекательный вариант с точки зрения чистоты кода — подключить скрипт:

С библиотекой jQuery:

Заметка

Update 23.01.2011 Помни, что убирая дефолтную рамку фокуса, хорошей практикой является замена эквивалентом в стиле дизайна.

Как убрать рамку вокруг картинки в шаблоне wordpress?

Приветствую вас дорогие читатели. В сегодняшнем выпуске я расскажу о том, как за несколько секунд можно убрать рамку вокруг картинки. Бывает так, что после установки какого-либо шаблона, все картинки в посте отображаются примерно вот так: А это не есть хорошо, поэтому необходимо исправить это » безобразие «. И так, приступим к выполнению нетрудной инструкции: Заходим в админ панель, переходим к вкладке Дизайн и нажимаем на Редактор. Теперь, справа выбираем файл style.css и находим в этом списке следующий код: (для поиска по странице нажмите Ctrl + F)

Замените его на этот код:

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

Илон Маск рекомендует:  Живая перезагрузка

Тем самым, мы вообще убираем рамку, но и первый способ тоже подойдет.

Заметка может вам пригодиться, так как в разных темах и шаблонах может быть по-разному. На этот урок WordPress подошел к концу, подписывайтесь на обновления, с вами был Сергей Оганесян. Пока!

Дата последнего изменения: 2020-02-16 14:25:18

Как убрать контур у ссылок-картинок в ИЕ

Чтобы при клике открывалось увеличенное изображение или был переход на подробное чтение новости, изображение делают ссылкой.

На самом деле, это сильно напрягает. В ИЕ выглядит весьма жутко:

На самом деле убрать рамку вокруг изображений-ссылок очень просто. Не надо специально чего-то мудрить с Internet Explorer, типа условных комментариев, чтобы избавиться от багов, присущих этому чудесному браузеру.

Достаточно просто дописать в CSS к селектору img свойство border со значением none , как показано ниже.

Вариант № 1

Вот и весь секрет

Опять извечный риторический вопрос: когда же ИЕ перестанет отличаться от всех нормальных браузером своими извращениями?. Ведь речь идет не о шестой и даже не седьмой версии браузера? Это ведь восьмой Интернет Эксплорер, который поддерживает веб-стандарты!

Пунктирная рамка вокруг ссылок и навигация с клавиатуры

Думаю, все знают, что это такое. Некоторые браузеры, в частности, Фаерфокс и Интернет Эксплорер 8 рисуют однопиксельную пунктирную рамку вокруг ссылок и внутри кнопок, когда пользователь нажимает на них. Если сайт состоит из голого html, скорее всего, дискомфорта они не доставят. Но если все ссылки как-то стилизованны, вам (или вашему дизайнеру), скорее всего захочется избавиться от этого. Тем более, что эта рамка может отобразиться в неподходящем месте:

Эта рамка есть ни что иное, как css-свойство outline, поэтому самый первый и чаще всего рекомендуемый способ, позволяющий отключить эту рамку у ссылок — указать нехитрое css-правило:
Или даже такое:

Но, как можно догадаться, просто взять и убрать её нельзя, потому что эта рамка обозначает фокус на активном элементе. Когда вы работаете мышкой, эта функция может показаться совершенно бесполезной — и так понятно, что активный элемент тот, что под курсором. Но при навигации с клавиатуры, эта рамка позволяет узнать, какой элемент сейчас имеет фокус. При применении указанных выше правил в Фаерфоксе и ие8, ссылки по-прежнему будут участвовать в обходе по клавише tab, но понять, какая ссылка выделена, будет невозможно.

В других системах реализованы другие модели поведения. Самый первый подход, который бы хотелось отметить — это стандартное поведение виндовс ХП и выше — по умолчанию фокус на контроллах не рисуется. Но, при первом нажатии клавиши tab фокус появляется и уже не пропадает. Такое же поведение свойственно браузерам Интернет Эксплорер 6 и 7. Другой подход у Оперы. Она не считает, что по ссылкам нужно перемещаться с помощью клавиши tab, переводя фокус только на контроллы форм. А по ссылкам позволяя делать навигацию при помощи других механизмов — шифт + стрелки или контрол + стрелки. При таком подходе css-свойство outline для ссылок не имеет значения.

Понятно, что добиться поведения Оперы врядли возможно, да и не нужно, оно будет непривычно пользователям этих браузеров. А вот попробовать эмулировать поведение Интернет Эксплорера 6 и 7 можно. Для этого можно убирать рамку не просто на фокус, а непосредственно во время нажатия. Как известно, помимо псевдокласса :focus существует еще один — :active. Он отвечает за состояние ссылки между событиями mousedown и mouseup. Если повесить на него то же outline: none, то рамка не будет появляться в момент нажатия с помощью мыши. Зато будет появляться сразу после отпускания, потому что ссылка будет в фокусе. Это можно решить, убрав рамку и для наведенного элемента, т.е. код будет таким:

Илон Маск рекомендует:  Что такое код socket_recvfrom

Этот способ советует применять Patrick H. Lauke, веб-евангелист Оперы софтвер (Пепелсбей, привет!). Но это все равно оставит два неприятных момента: фокус по прежнему никуда не денется, и после отвода мышки снова появится. Поэтому, если ссылка обрабатывается джаваскриптом, а не ведет на другую страницу, следует сбрасывать с нее фокус после нажатия. Второй момент — при навигации с клавиатуры фокус будет пропадать, как не сложно догадаться, при наведении мыши.

Все сведения по поведению фокуса можно свести в одну таблицу:

Отсутствие зеленых кружочков в последнем столбце — хороший результат.

Что еще можно сделать

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

HTML: Как сделать картинку ссылкой

Вы наверное не раз замечали, что на многих сайтах в качестве ссылок используются различные картинки, которые по принципу работы ничем не отличаются от текстовых ссылок. Для того чтобы заменить обычную текстовую ссылку на изображение, нужно внутрь элемента поместить тег , который указывает путь к изображению:

Убираем рамку

При использовании изображений в качестве ссылок браузеры автоматически будут добавлять к ним рамку, которая легко убирается с помощью CSS свойства border со значением none.

Чтобы убрать рамку у картинки ссылки, можно прописать свойство border в атрибут style:

Этот способ подойдёт когда картинка ссылка всего одна. Но если у вас много таких ссылок, то лучше прописать стиль сразу ко всем картинкам, которые вложены в тег , сделать это можно так:

Просто добавьте этот код к остальным стилям и он уберёт рамки у всех картинок, являющихся ссылками.

Как убрать пунктирную рамку вокруг ссылок?

В новом шаблоне моего сайта, при нажатии на ссылки вокруг нее остается пунктирная рамка. Можно как-то это устранить?

Ответ

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

Если она вам мешает, то ее можно убрать. Для этого следует к селектору «a» добавить стилевое свойство outline со значением none:

Вопрос по internet-explorer, css &#8211 как убрать синюю рамку вокруг ссылок в IE9?

Это довольно простой сайт, и я использую netrenderer.com, чтобы убедиться, что все страницы работают в Internet Explorer.

Несмотря на все мои усилия, я не смог удалить синюю рамку вокруг ссылок в Facebook и Twitter на главной странице этого сайта при просмотре его с помощью Internet Explorer 9.

Я пробовал варианты приведенного выше кода, и он успешно удаляет синюю рамку для каждой версии IE, кроме 9. Есть идеи?

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL