With this, the text is at the top of each DIV box, then the image. I want the link to be overlaid the image, button center.
No matter what I do to TOP or LEFT, it makes no difference.
Code: Select all
<style>
.tiledboxtitle
{
margin-bottom: 5px;
}
.bestsellerhomebox
{
position: relative;
float: left;
text-align: center;
margin-right: 31px;
width: 142px;
height: 185px;
font-size: 12px;
margin-bottom: 8px;
display: table;
}
.bestsellerhomeboxspan {
display: table-cell;
vertical-align: bottom;
}
.bestsellerhomebox img
{
display:block;
}
#sampleadd {
margin-top: 0px;
height: 20px;
position: absolute;
background-color: #F2F2F2;
padding: 3px;
font-size: 11.2px;
text-align: center;
left: 50;
opacity:0.80;
filter:alpha(opacity=98); /* For IE8 and earlier */
z-index: 99;
border: 1px solid #cccccc;
}
</style>
echo "<div class='bestsellerhomebox'>
<div class='bestsellerhomeboxspan'>";
echo "<div class='tiledboxtitle'>
$row->title<br/>";
if ($row->gramablend == "yes") { echo "<br/>";}
if ($row->gramablend != "yes")
{
if ($row->size2 != NULL) { echo "From ";}
printf ("£%.2f", $row->price1);
}
if ($row->clearance == "yes") { echo " <font style='color: #ff0000; font-size: 11.2px;'>CLEARANCE</font>";}
echo "</div>";
echo "<div id='sampleadd'><a href='#'>REQUEST SAMPLE</a></div><a href='/product/$row->catid/$categreplace/$row->id/$titlereplace' style='text-decoration: none'>";
if ($row->photoprimary == NULL) { echo "<img src='/images/blank_small.gif' border='0' alt='blank' /></a>";}
elseif ($row->photoprimary != NULL) { echo "<img src='/images/productphotos/small/$row->photoprimary' alt='product' border='0' /></a>";}
echo "</div></div>";