Помогите пожалуйста решить CSS задачки.

[LBM]

Есть тестовый сайтик один. Задача номер 1 - корректное отображение паспорту у картинок с выводом заголовка title в этом же паспорту.

Пример по адресу - test.chocolate-kiss.ru/tvorozhnye-oladi-s-yablokami

Особенно криво съезжает паспорту вправо в Опере. В Хроме справа отступ больше, чем слева у паспорту.

Вот код, который отвечает сейчас за это дело:

/* Captions */.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto}

.wp-caption{

padding: 20px; /* Ширина паспарту */

background: #f0f0f0; /* Цвет фона паспарту */

}

.wp-caption img{

padding: 20px; /* Ширина паспарту */

background: #f0f0f0; /* Цвет фона паспарту */

}

.wp-caption p.wp-caption-text{font-size:13px;color:#4f2c2c;line-height:15px;padding:0 30px 5px;margin:0;}

/* End captions */

Не проходите мимо пожалуйста! А то я уже голову поломал )

[LBM]

Задача номер два.

Главная страница - test.chocolate-kiss.ru

На ней располагается сетка рецептов с ссылками на записи. Эти картинки - миниатюры Wordpress.

Задача - при наведении курсора должна всплывать подсказка (title) в виде полупрозрачного фона с радиусом (по сути круг), поверх самой картинки. Сейчас же этот радиус криво, но всплывает, правда в сторонке от картинки. Как его привязать к картинке точно?

Вот CSS сейчас:

.search-img {overflow:hidden; padding:0px; margin:0 1px 1px 0; float:left; width:150px; height:150px; background:#000; font-size:14px; font-weight:normal; text-align:center;line-height:2em;

-moz-border-radius: 75px; /* Для Firefox 3 */

-webkit-border-radius: 75px; /* Для Safari 4 и Chrome */

border-radius: 75px; /* Радиус скругления */

}

.search-img:hover::after {

width:150px; height:150px;

-moz-border-radius: 75px; /* Для Firefox 3 */

-webkit-border-radius: 75px; /* Для Safari 4 и Chrome */

border-radius: 75px; /* Радиус скругления */

content: attr(data-title); /* Выводим текст */

position: absolute; /* Позиционирование */

z-index: 1; /* Отображаем подсказку поверх других элементов */

background: rgba(0,42,167,0.6); /* Полупрозрачный цвет фона */

color: #fff; /* Цвет текста */

text-align: center; /* Выравнивание текста по центру */

font-family: Arial, sans-serif; /* Гарнитура шрифта */

font-size: 11px; /* Размер текста подсказки */

padding: 5px 10px; /* Поля */

border: 1px solid #333; /* Параметры рамки */

}

Задача номе три. По сути это часть второй задачи. Дело в том, что в Опере картинки ни в какую не хотят отображаться круглыми.

[ShumNo]

для получения вами скорейшего ответа оформите ваши задачи в http://jsfiddle.net/ или на тестовой странице

Edited August 3, 2013 by ShumNo

[Zverushka]

Задача 1. Во-первых какой-то скрипт присваивает свою ширину слою. Как вариант этому слою задать display: inline-block, убрать ширину, задаваемую скриптом и убрать padding у картинок. Оставить только padding у слоя.

Задача 2. .search-img position:relative, для hover псевдоэлемента top:0, left:0

Задача 3. Посмотреть что получилось в опере.

Кстати там в кругах какой-то текст должен быть? Его не видно просто.

[LBM]

Кстати там в кругах какой-то текст должен быть? Его не видно просто.

Да. Title картинок.

П.с. как освобожусь, сяду попробую Ваши варианты. А пока, спасибо большое, что откликнулись!

для получения вами скорейшего ответа оформите ваши задачи в http://jsfiddle.net/ или на тестовой странице

Хорошо, попробую освоить этот сервис.

[LBM]

Задача 2. .search-img position:relative, для hover псевдоэлемента top:0, left:0

Это помогло! Спасибо большое!

[LBM]

title теперь отображается, но часто вылазит за края (речь про задачу номер 2). Паддинг отодвигает title картинок только по левому краю, справа все равно вылазит, хотя значение задаю по обоим бокам.