Проблема с новым стилем для ссылок @ DeForum.ru

0 Сообщения: 9 Зарегистрирован: 14.07.07

Привет всем!

Сейчас многие используют такой стиль для ссылок:

Код:

a         {color: #0066cc; text-decoration: none; border-bottom: 1px solid #cccccc;}
a:hover   {border-bottom: 1px solid #0066cc;}

да вот только отступ нижнего подчёркивания отличается на несколько пикселей от оригинала:

padding-bottom: 0px или -1px не помогает.

Вроде где-то давно видел решение этой проблемы, но, увы, не сохранил.

Как привести мод. вариант в соответствии с оригиналом?

Modjo писал(а):

Привет всем!

Сейчас многие используют такой стиль для ссылок:

Код:

a         {color: #0066cc; text-decoration: none; border-bottom: 1px solid #cccccc;}
a:hover   {border-bottom: 1px solid #0066cc;}

А смысл отказываться от text-decoration?
Варианты: line-height, height, background:url('blue-point.gif') 0 100% repeat-x; ?

a {color: #06c; text-decoration: none; border-bottom: 1px solid #ccc; line-height: 13px;}
a:hover {border-color: #06C;}

0 Сообщения: 9 Зарегистрирован: 14.07.07

hardy, не работает.

Modjo писал(а):

hardy, не работает.

ну так подберите значение line-height так, чтоб заработало. Можно в px, %, em, en.

оффтопик:

Хотя не ясно, на кой маяться фигней, повторяя эффект, работающий без извратов?
Вертикальных паддингов и высоты у инлай-элементов нет

Modjo,
то что вы хотите, можно сделать по другому:

Код:

a {color: #CCC; text-decoration: uderline;} 
a:hover {color:#06C;}
a span {color:#06C;}

<a href=""><span>link</span></a>

0 Сообщения: 9 Зарегистрирован: 14.07.07

оффтопик:

karamba, вы перед тем как критиковать сами попробовали бы. Как ни крути с line-height, эффекта — ноль.

IonDen666, в принципе, визульно подходит, НО

position: relative и z-index не помогают.

ещё варианты есть? :glasses:

оффтопик:

Modjo, а чем вам так text-decoration: uderline не угодил?

0 Сообщения: 9 Зарегистрирован: 14.07.07

оффтопик:

Кухан, хочу сделать нижнее подчёркивание цветом а-ля 50% альфа от основного, чтобы не сильно напрягать глаз пользователя

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>Test</title>
   
   <style>
   span {
      color: Blue;
   }
   
   a {
      color: Red;
   }
   </style>
</head>

<body>
Some <a href="#"><span>link</span></a>.
</body>
</html>

0 Сообщения: 9 Зарегистрирован: 14.07.07

Кухан, с чего начинали к тому и пришли :killanasshole:

. Эффект такой же как и у

Код:

a         {color: blue; text-decoration: none; border-bottom: 1px solid red;}

http://webmascon.com/topics/coding/39a.asp

бэкграундом кладешь картинку - управляй как хошь.

DeДверь
Логин:
Пароль:
	Автологин