Как сделать картинку и текст одной ссылкой?

Question

[Евгений]

Всем привет!
Собственно нужно сделать картинку и заголовок одной ссылкой. Я запихал заголовок в стиль к картинке, но из-за ограничения размеров блока заголовок не может выйти за ее границы, вообщем выглядит это так prntscr.com/2hjfcs

Вот сам код jsfiddle.net/ru88Z

Как можно поступить?

Answer 1

[Валерий Чёрный]

jsfiddle.net/ru88Z/5 Так надо было?

Comments

[Евгений]

@Valerko_O да, спс, сейчас попробую

[Евгений]

хотя нет, чё то вообще жесть если в общий вставить prntscr.com/2hkb9k

[Валерий Чёрный]

Дайте код страницы с несколькими товарами. Посмотрю почему сползло.

Answer 2

[Denis Isaychenko]

Убрать absolute c img и margin-left у ссылки.
jsfiddle.net/ru88Z/4
Это если, как в примере, название над изображением, а если нужно над блоком информации, то проще дублировать ссылку.

Comments

[Евгений]

@denisisaychx там такая штука, что под картинкой идет рамка, а если я уберу absolute, то img не будет центроваться относительно этой рамки. У ссылки margin-left поставил чтобы заголовок был слева от картинки, а не над ней.

Answer 3

[Руслан Касымов]

Если я правильно понял задачу то наверно это решение подойдет.

spoiler

<div class="product-list">
	
		<div class="product-list__item">
			<a class="product-list__item-thumb" href="http://rostov-na-donu.lobzikov.com/tovar/okno-9524">
                <span>Окно</span>
                <img src="http://placehold.it/200x200" alt="img" />
			</a>
		

			<div class="product-list__body">
				<div class="product-list__body-title">
					
				</div>
				
				<p class="product-list__body-desc">Донская Оконная Компания</p>
				
				
					<p class="product-list__body-price">
						Розничная: 
						<span class="product-list__body-price-retail">
							4000 руб.
						</span> 
						<span>/ шт.</span>
					</p>
				
				
				
					<p class="product-list__body-price">
						Оптовая: 
						<span class="product-list__body-price-trade">
							3300 
						</span> 
						<span>/ шт.</span>
					</p>
				
				
				<span class="red">На товар есть скидка <img src="inner33_files/disc.png"></span><br>
					
				<p class="product-list__body-region">
					
					Регион деятельности: <a href="http://ros.lobzikov.com/tovar/cat10-ventilyaciya-otoplenie-kondicionirovanie" style="color: #1D6700;">Ростовская область</a> &#8594; <a href="http://rostov-na-donu.lobzikov.com/tovar/cat10-ventilyaciya-otoplenie-kondicionirovanie" style="color: #288E00;">Ростов-на-Дону</a>
					
					
					
				</p>
				<div class="clear_both"></div>
			</div>
		</div>

.product-list__item-thumb {
    display: block;
    width:250px;
    height:250px;
    margin-right:14px;
    overflow:hidden;
    float:left;
    border: 1px solid red;
    text-align: center;
}
.product-list__item-thumb > span {
    display: block;
    margin: 10px 0;
}

.product-list__body-title { margin:0 0 8px 0; }
.product-list__body-title-link { font:normal 18px Tahoma; text-decoration:none; color:#0068c9; }
.product-list__body-title-link:hover {text-decoration:underline;}
.product-list__body-desc { margin:0 0 10px 0; font:normal 12px Tahoma; color:#303030; }
.product-list__body-price { margin:0 0 10px 0; font:normal 14px Tahoma; }
.product-list__body-price span { color:#303030; }
.product-list__body-price .product-list__body-price-retail { font-weight:bold; color:#ccab02; }
.product-list__body-price .product-list__body-price-trade { font-weight:bold; color:#0084ff; }
.product-list__body-region { margin:0; color:#909090; }