Проблемка с штриховым подчеркиванием ссылок

Geratewart · February 18, 2009

Нравится мне, когда ссылки штриховые. Хорошо сочетается со строгим дизайном и шрифтом Georgia ...

соответственно убираем в описании стиля гиперссылки text-decoration и ставим border-bottom:

a:link, a:hover {
  color			: #262626 !important;
  text-decoration  : none !important;	/**  простое подчеркивание убрать **/
  border-bottom: 1px dashed #262626;	/**  линию штриховую добавить**/
}
a:visited {
  color			: #006600 !important;
  text-decoration  : none !important; 
  border-bottom: 1px dashed #006600;
}

Проблема в том что после такой замены все картинки функционала стали подчеркиваться. Очень не красиво...

Не нагуглил как это сделать, мож не такие запросы задавал :-[

Сделал такую операцию. вообще я делаю шаблон для Joostina, но суть не в ней. Поиском по всей директории с сей CMS нахожу все файлы .css (в том числе файл моего шаблона), и в них заменяю одну строчку text-decoration: none; на две:

text-decoration: none;
border-bottom: none !important;

То есть во всех стилях где сказано не подчеркивать ссылки убираем нижнюю границу. Не помогло. Просмотрев исходники сгенерированных CMSкой страниц увидел что img идут просто без классов. Ломать код CMSки мне стрёмно, надо решение на CSS. Если это возможно, конечно :rolleyes:

То есть например вот такой html соответствует тому что выдает CMS:

<head>
<link rel="stylesheet" href="template_css.css" type="text/css"/>
</head>
<a href="#">Ссылка куда-нибудь</a> 
<br />
<a href="#" target="_blank" title="Печать"><img src="/images/M_images/printButton.png"
alt="Печать" id="print" name="print" align="middle" border="0" /></a>

Вот и весь вопрос. Спасибо за внимание.

PS чуть не забыл пробовал наивно решить:

img {
  border-bottom	: none !important; /**  картинки не подчеркиваем **/
}

s0rr0w · February 18, 2009

Ссылки в тексте явно находятся в каких-то определенных контейнерах.

Примените стиль только к тем ссылкам, которые лежат в этих контейнерах, а все остальные на интерфейсе останутся нормальными.

Отменить из вложенного объекта стиль родительского невозможно в данной версии CSS

Если забить на IE6, то можно использовать конструкцию типа

a[title] { text-decoration: none }

rash · February 18, 2009

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

Это очень хороший подход, который хотелось бы закрепить как стандарт. Соблюдайте его.

Задавать обычным ссылкам пунктирное подчеркивание - не очень хорошая идея.

Geratewart · February 19, 2009

rash, учту...

ну тогда переделаю только для скриптов, проблема исчезнет сама собой... ...Появится другие... :rolleyes:

Sign In

Проблемка с штриховым подчеркиванием ссылок

Question

Geratewart

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

Geratewart

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information