VPF::Ссылка с пунктирным подчёркиванием

artsb

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

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

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

Всем привет.

Подскажите, как можно сделать пунктирное подчёркивание для ссылки.
Я делал "border-bottom: 1px dashed #000;", но если в ссылку входит ещё и картинка, то она тоже подчёркивается, что не есть гуд.

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

Чем отличается умный человек от мудрого?
Умный - выпутается из любой ситуации.
Мудрый - просто в неё не попадёт.

webster

Дата 22.9.2008, 19:14 (ссылка)

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

Загрузка ...

Опытный

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

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

Для этого нужно использовать дополнительный элемент <span>:

Код


<a href="#"><img src="image.jpg" alt="" /><span>Ссылка</span></a>

Код


a, img {
text-decoration: none;
}
a span {
border-bottom: 1px dashed #000;
}
a:hover span {
border-bottom: 0px dashed #000;
}

ksnk

Дата 22.9.2008, 19:23 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Это самый dashed для разных броузеров уж настолько разный, что лучше ставить картинку в 1 px высотой.

Код


<style>
a.mylink {
  text-decoration:none;
}
.mylink span {
  border-bottom: 1px dashed #000;

}
.mylink img {
  border:0px;
}


</style>

Писать чего-нибудь вроде 
<a class="mylink" href="xxx"><span> Click </span><img src="xxx.jpg"><span> darling </span></a>

Это случайно не оно? smile

Уродливо, но по другому, вроде, не сделать, чтобы и линка была и картинка не подчеркнута...

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

artsb

Дата 22.9.2008, 23:20 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

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

webster, в принципе, можно и так. Просто я думал, может есть какая-нибудь настройка CSS. Но походу её нет.

ksnk, да вроде пунктир все браузеры нормально отображают. Есть проблемы с точками. Ваш вариант, в принципе, похож на вариант
webster'а.

Всем спасибо.

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

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