Positioning a Price Circle on an image using CSS - html

Question

I think this is probably a simple thing to do but when i try to do it it messes other stuff up that I've got.
Basically I am using php in codeigniter. I have a for loop that displays lots of product items (tours) to the user to choose and enter all the specific details related to that product. This page is here:
http://eternalcitytours.com/en/2/Catholic-Tours-Of-Rome-Italy
On each product box there is a blue ring.
I want to substitute the yellow price circle (see example below)
http://eternalcitytours.com/en/22/Tours/Ancient-Coliseum-Roman-Forum-Rome-Tour
to be instead of this blue ring. However every time I do it everything messes up.
The relevant bits of code are:
.feature li .thumb .date {
position: absolute;
bottom: -25px;
left: 110px;
display: block;
-moz-border-radius: 40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
height: 50px;
width: 46px;
background: #f3e4c8;
float: left;
font-family: mensch;
padding-top: 10px;
}
.feature li .thumb .date span {
display: block;
text-align: center;
font-size: 20px;
line-height: 20px;
}
div .raf{
width:16px;
height:16px;
border-radius:50%;
background-color:#CE1126;
background-clip:content-box;
padding:8px;
border:8px solid #00247D;
margin-left:7px;
margin-top:-5px;
}
.tour-price {
font-size: 2.2em;
font-weight: 300;
display: block;
margin-left:auto;
margin-right:auto;
width:60px;
height:60px;
border-radius:50%;
color:#483f34;
line-height:60px;
text-align:center;
background:#ffc55f;
align: center;
}
<ul id="filter-container" class="feature cf" itemscope itemtype="http://schema.org/EventReservation">
<?php
$tcount=count($tours);
$tcount=$tcount-1;
for($i=0; $i<=$tcount;$i++){
echo "
<li class=\"".$tours[$i]['location']."\">
<a href=\"".$tours[$i]['nav_url']."\" class=\"thumb\">".$tours[$i]['img']."
<div class=\"date\"><div class=\"raf\"></div></div>
</a>
<h4 class=\"tour_title\" itemprop=\"name\">".$tours[$i]['title']."</h4>
<div class=\"caption\" itemprop=\"description\">".$tours[$i]['blurb']."</div>
<p><button type=\"button\" class=\"btn btn-primary\">Read More...</button></p>
</li>
";
}?>
</ul>
thanks
TC

Answer 1

Change this code:
div .raf{
width:16px;
height:16px;
border-radius:50%;
background-color:#CE1126;
background-clip:content-box;
padding:8px;
border:8px solid #00247D;
margin-left:7px;
margin-top:-5px;
}
to this one:
div .raf{
margin-top: -15px;
font-size: 2.2em;
font-weight: 300;
display: block;
margin-left: auto;
margin-right: auto;
width: 60px;
height: 60px;
border-radius: 50%;
color: #483f34;
text-align: center;
background: #ffc55f;
}
And I suppose you want also to change the HTML, replace this:
<div class=\"date\"><div class=\"raf\"></div></div>
With this other code:
<div class=\"date\">
<div class=\"raf\" itemprop=\"price\" content=\"43.00\">
<span itemprop=\"priceCurrency\" content=\"EUR\">€</span>
43</div>
</div>
Additional recommendations: You could improve a lot your code readability by correctly formatting your code, see thsi questions: questions questions