Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!





#1 15.06.2010 19:31

шкипер
Новичок
Откуда: Харьков
Зарегистрирован: 15.06.2010
Сообщений: 4

фон под изображением-ссылкой

Доброе время суток.

Проблема вот в чем. Переопределил цвета ссылок, но при этом получил побочный эффект - при наведении мыши на изображение под ним возникает фоновый цвет высотой в строку текста, выступающий за изображение вниз и вправо (Фокс, Опера). В Опере ещё дополнительно после изображения идёт маленький хвостик, похожий на символ подчеркивания.

Код:

html, body, h1, h2, h3, h4, h5, h6, img { border: 0; margin: 0; padding: 0; }
html, body { background-color: #eee; color: #000; }
....
a:link { color: #036; }
a:visited { color: #066; }
a:hover, a:active { background-color: #036; color: #fff; }
...

Пока в качестве временного решение использую объявлении цветов для p a, а картинки-ссылки оставляю вне тега p, просто внутри div-а. Возможно есть другое решение?

Нет на форуме

 

#2 15.06.2010 19:50

AKS
Профессионал
Зарегистрирован: 25.12.2009
Сообщений: 219
Вебсайт

Re: фон под изображением-ссылкой

шкипер
То есть у Вас картинка меньше ссылки. Попробуйте уменьшать/убирать отступы и границы у картинок и ссылок...

Нет на форуме

 

#3 16.06.2010 09:02

шкипер
Новичок
Откуда: Харьков
Зарегистрирован: 15.06.2010
Сообщений: 4

Re: фон под изображением-ссылкой

Нет, наоборот. Сначала у мен было несколько картинок как раз по ширине строки (из серии "у меня с html всё ОК" и "у меня с CSS всё ОК"). Поэтому появлявшаяся тень даже неплохо выглядела. Но потом добавились изображения побольше, а тень так и осталась высотой в строку текста. C границами игратся пробовал разными способами, например прописывал a... img значения margin и padding равніми 0. Но, как я понял эта тень не от изображения, это тень от ссылки.

Поэтому уточненный вопрос звучит так: как описать стиль для тега, предществующего другому заданному тегу? Тоесть мне надо не для img переопределить стиль, а для a, но только для тех случаев, когда внутри a стоит img.

Вчерашнее скоропалительное решение заменил на более идеологически верное: описал a.picture... с background-color: transparent и в ссылках изображений использую этот класс.

Нет на форуме

 

#4 16.06.2010 09:42

шкипер
Новичок
Откуда: Харьков
Зарегистрирован: 15.06.2010
Сообщений: 4

Re: фон под изображением-ссылкой

Уточнение:

Код:

a.picture { background-color: transparent; color: #цвет_фона; }

color нужен для борьбы с "хвостиком" в Opera.

Нет на форуме

 

#5 16.06.2010 09:48

AKS
Профессионал
Зарегистрирован: 25.12.2009
Сообщений: 219
Вебсайт

Re: фон под изображением-ссылкой

шкипер
У Ваших ссылок ведь есть родительский элемент, ему и пропишите правило для вложенных тэгов а, думаю - этого достаточно, или у Вас в одном блоке находятся тесктовые ссылки вперемешку с картинками-ссылками?..
И еще, color - это цвет шрифта, а не фона!

Нет на форуме

 

#6 16.06.2010 10:02

шкипер
Новичок
Откуда: Харьков
Зарегистрирован: 15.06.2010
Сообщений: 4

Re: фон под изображением-ссылкой

AKS написал:

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

Угу, вперемешку. Родительский элемент в данном случае div. Но ведь если я переопределю стиль ссылки, он поменяется и для текстовых ссылок? Возможно можно решить по другому, прописать цвета не для ссылки, а для какого-то тега внутри ссылок (span). Минус - прийдется весь текст в ссылках прятать в тег.

AKS написал:

И еще, color - это цвет шрифта, а не фона!

Я понимаю. В Опере наблюдается "хвостик" после изображения, если цвет ссылки задан явно. У меня для a:link определен цвет. В a.picture я меняю его на цвет фона, поэтому "хвостик" становится невидим.

Нет на форуме

 

#7 16.06.2010 10:12

AKS
Профессионал
Зарегистрирован: 25.12.2009
Сообщений: 219
Вебсайт

Re: фон под изображением-ссылкой

шкипер
Да, тогда Вы выбрали правильное решение - задать имя класса для нужных ссылок (a.picture), и это стандартный способ указать стиль для необходимых элементов. А как же иначе?

Нет на форуме

 

Board footer