Разные стили css для картинок и контекстных ссылок

R0
На сайте с 02.11.2011
Offline
20
1417

Всем привет! Проблема следующая, хочу чтобы ссылки в новости подчёркивались пунктиром. Для новости я применяю стиль news, то есть соответственно получается следующее

.news a {

text-decoration: none;

border-bottom: 1px dotted #000;

}

.news a:hover {

text-decoration: none;

border-bottom: 1px dotted #000

}

Ссылки подчёркиваются пунктиром, но вместе с ними подчёркиваются и картинки новости, которые являются ссылками (у меня это те, размер которых превышает установленный) Как применить стиль отдельно к текстовым ссылкам? (Двиг Дле, хотя это, наверное, неважно)

R
На сайте с 17.11.2011
Offline
22
#1
region029:
Всем привет! Проблема следующая, хочу чтобы ссылки в новости подчёркивались пунктиром. Для новости я применяю стиль news, то есть соответственно получается следующее

.news a {
text-decoration: none;
border-bottom: 1px dotted #000;
}

.news a:hover {
text-decoration: none;
border-bottom: 1px dotted #000
}
Ссылки подчёркиваются пунктиром, но вместе с ними подчёркиваются и картинки новости, которые являются ссылками (у меня это те, размер которых превышает установленный) Как применить стиль отдельно к текстовым ссылкам? (Двиг Дле, хотя это, наверное, неважно)

создайте доп. класс для картинок. Например "a.Pict:hover{...."

домашняя страница - google.com.ua
ДП
На сайте с 23.11.2009
Offline
203
#2

может

.news a img{

border-bottom: none;

}

Но если что я - не верстальщик ;)

IS
На сайте с 17.07.2011
Offline
4
#3
rommer:
создайте доп. класс для картинок. Например "a.Pict:hover{...."

Или же просто прописать:

.news img{

border-bottom: none;

}

.news img:hover{

border-bottom: none;

}

R0
На сайте с 02.11.2011
Offline
20
#4
ilia-step:
Или же просто прописать:
.news img{
border-bottom: none;
}

.news img:hover{
border-bottom: none;
}

Чёт не помогает - вот у меня полное описание класса на данный момент:

.news {

FONT: 10pt Verdana;

text-align:justify;

padding: 10px;

}

.news a {

color: #505050;

text-decoration: none;

border-bottom: 1px dotted #717171

}

.news a:hover {

color: #1e90ff;

text-decoration: none;

border-bottom: 1px dotted #717171

}

.news img {

padding:0px 7px 0px 5px;

}

Неужели придётся к каждой ссылке отдельно класс добавлять🙅

IS
На сайте с 17.07.2011
Offline
4
#5

region029, поторопился с ответом.. и правда не работает. Но если ссылок немного, то можно и отдельный class применить, но наверняка есть решение проще.

R
На сайте с 17.11.2011
Offline
22
#6

Если лень класс, то может как-то можно сгибридить

a.img или img.a или еще какой шайтан-байтан.

IS
На сайте с 17.07.2011
Offline
4
#7

http://jsfiddle.net/HmDK2/ - вот такой вариант придумался, с использованием vertical-align.

Но не уверен, что это не затронет случайно какие-либо другие элементы в вёрстке, но на первый взгляд работает ]

Алексей Барыкин
На сайте с 04.02.2008
Offline
272
#8
ilia-step:
http://jsfiddle.net/HmDK2/ - вот такой вариант придумался, с использованием vertical-align.
Но не уверен, что это не затронет случайно какие-либо другие элементы в вёрстке, но на первый взгляд работает ]

В хроме не работает. 😂

ИМХО не надо танцев с бубнами, просто присвоить ссылкам-картинкам другой класс и прописать этому классу border-bottom:none

http://jsfiddle.net/abarykin/5CFL9/

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий