Как наложить на картинку текст, чтобы и картинка и текст были ссылками?

Question

[nugmani]

У меня есть 3 квадратные картинки которые расположены в ряд. В середине каждой картинки текст с рамкой. Каждый квадрат с текстом должен быть ссылкой. Как правильно в таком случае написать код html и css?

Код html:

<div class="items-wrap">
     <div class="info-item">
          <a href="#">Biography<img src="img/section2/1.png" alt="Biography"></a>
         <p><a href="#">Biography</a></p>
     </div>

     <div class="info-item">
         <a href="#"><img src="img/section2/2.png" alt="Family"></a>
         <p><a href="#">Family</a></p>
     </div>

     <div class="info-item">
          <a href="#"><img src="img/section2/3.png" alt="Hobbies"></a>
         <p><a href="#">Hobbies</a></p>
     </div>
</div>

Код SASS:

.info-item
	display: inline-block
	img
		width: 300px
		position: absolute
		margin: 20px 25px
	p
		text-align: center
		margin: 120px 40px
		text-decoration: none
		position: relative
		color: #fff
		font-size: em(24px)
		font-family: "Source Sans Pro Regular", $helvetica
		border: 1px solid #fff
		width: 200px

Answer 1

[nugmani]

Выкладываю решение. w3c валидатор не ругается.

<div class="items-wrap">

						<div class="info-item">
							<a href="#">
								<img src="img/section2/1.png" alt="Biography">
								<p>Biography</p>
								</a>
							</div>

						

						<div class="info-item">
							<a href="">
								<img src="img/section2/2.png" alt="Family">
								<p>Family</p>
								</a>
							</div>
						

						<div class="info-item">
							<a href="">
								<img src="img/section2/3.png" alt="Hobbies">
								<p>Hobbies</p>
							</a>
						</div>

					</div>

SASS:

.items-wrap
	text-align: center
	.info-item
		width: 300px
		display: inline-block
		margin: 20px 12px 30px
		position: relative
		a
			font-size: em(24px)
			font-family: "Source Sans Pro Regular", $helvetica
			color: #fff
			img
				border: 1px solid #000
			p
				display: block
				border: 1px solid #fff
				width: 200px
				//margin: 120px 40px
				position: absolute
				top: 170px
				left: 55px

Answer 2

[dom1n1k]

Я в таких случаях всегда делаю ссылку блочным элементом и вкладываю в нее картинку и надпись.
Да, я знаю, что это не совсем по спецификации (по стандарту в тэг [а] нельзя вкладывать блочные элементы), но это тот самый случай, когда имеет смысл наплевать на нытье о семантике и стандартизации :) Все работает и никогда с этим проблем не было. А плодить две ссылки - это и неудобно, и (по слухам) сеошниками не поощряется.

Comments

[goooooch]

В хтмл5 блочные внутрь строчных уже можно класть

[HelpSophie]

>(по стандарту в тэг [а] нельзя вкладывать блочные элементы)

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

[HelpSophie]

Кроме того, картинку можно установить фоном, ели она не несет смысловой нагрузки и не ценна для SEO

[dom1n1k]

HelpSophie: Если говорить про данный конкретный случай, то текст с рамочкой скорее всего будет спозиционирован абсолютно. А абсолютное позиционирование - это display: block априори.

Если же говорить про похожие случаи вообще - то обычно такое бывает в интернет-магазинах, где идет матрица элементов картинка/название и они должны быть вместе кликабельны. А в интернет-магазинах название товаров всегда делается заголовками (h4-h5) по сеошным соображениям.
Кроме того, сверху ещё часто накладываются какие-нибудь флажки, беджики, звездочки...

[HelpSophie]

dom1n1k:
Понятие блочных и строчных имеет (имело) отношение исключительно к семантике, но никак не к CSS. Поэтому, что у Вас там в стилях понаписано или переопределено никого не волнует (с точки зрения этого правила)

[dom1n1k]

HelpSophie: И семантика тоже - вложение в [a] всяких [h*] и [div]. Во всяком случае, раньше w3c-валидатор это волновало, он ругался. Может сейчас его там переделали.

[HelpSophie]

dom1n1k: не "тоже", а "только".

h не должно быть в ссылке по логике и разуму, а все зачем-то нужные div меняются на span и валидатор счастлив.

[dom1n1k]

Я привел конкретный пример, когда h нужен внутри ссылки :) И вообще говоря, мне это кажется вполне логичным и адекватным реальности - чисто текстовые ссылки остались где-то в прошлом десятилетии, сейчас кликабельным может быть в принципе почти все что угодно, хоть целый блок. Просто w3c-стандарты всегда отставали от жизни.

Некоторые разработчики решают этот вопрос совсем иначе - просто обрабатывают клики JS-ом. Я считаю это намного бОльшим злом, потому что отваливается целая куча нативных браузерных функций. Я лучше наплюю на валидатор :) Потому я и написал выше, что это один из тех случаев, когда имеет смысл забить на формальности.

[HelpSophie]

dom1n1k:
Оптимизаторы пусть лучше микроразметку изучают ))

[Ankhena]

HelpSophie: да уж, ссылка с заголовка пользы принесет не много

[dom1n1k]

Да даже если отбросить вопросы сео - в определенных случаях это логично и само по себе.
Ну например - новостной сайт. На главной ряд тизеров, в каждом фото+заголовок+первое предложение новости. Логично заголовок новости сделать заголовком, пусть даже это ещё не статья, а всего лишь тизер? По-моему вполне.
И если редактор захочет сделать так, чтобы кликабельным был весь блок целиком - у меня не найдется разумных аргументов, чтобы ему возразить, потому что это действительно вполне удобно. Рассказывать ему про html-семантику это бред. Он скажет что его волнуют читатели, авторы и рекламодатели, а html его не волнует - и будет совершенно прав.

Answer 3

[Ankhena]

Зато в тег a прекрасно вкладываются теги figure и figcaption

Comments

[dom1n1k]

Дело в том, что на практике с вероятностью 95% придет сеошник и скажет, что подпись должна быть тэгом типа h4 или h5. А figcaption типа заберите себе обратно :) Хотя в данном конкретном случае, наверное, и не нужно.

[Ankhena]

dom1n1k: если сеошник скажет, что "моя жизнь", "моя семья" и "мои хобби" надо оформлять заголовками да еще и внутри ссылок, то его можно просто смело послать куда позволят фантазия и воспитание.
Если ему/ей прямо очень нужны ссылки с заголовков, то тогда логичнее ссылку вкладывать в заголовок, а никак не наоборот.

Answer 4

[madhed]

Ссылки ведут в разные места?

Comments

[nugmani]

Нет. На одну и ту же страницу.