Previously, I inquired about adding text to the gray area of an image. Some experts recommended using <span>, but this resulted in all the text appearing in a single line (as it is inline), even though it was set to display:block. How can I achieve separate lines of text as seen in the picture on the right? Additionally, should I use h4/h5 for styling or opt for different div elements?
HTML:
<div class="rightCol1">
<a href="#"><img src="pic1.png"><span><h4>2014 02 16</h4><h5>most useful from the first stage <br> - osvaldas <br> sarpalius and lukas šukutis</h5></span></a>
<a href="#"><img src="pic2.png"><span><h4>2014 02 16</h4><h5>the best season start in club <br> history </h5></span></a>
</div>
CSS:
.rightCol1{
float:right;
margin-right:150px;
margin-top:10px;
}
.rightCol1 a {
background:green;
display: block;
position:relative;
height:200px;
width:100px;
margin-bottom: 160px
}
.rightCol1 a span {
line-height:0px;
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80;
left:0;
z-index:1;
}
h4{
padding:0;
margin:0;
font-style:;
color:#e6540c;
font-weight:bold;
font-size:14;
}
h5{
padding:0;
text-transform:uppercase;
color:rgb(193,193,193);
}