Absolute position of DIV in Div - not working

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Absolute position of DIV in Div - not working

Post by simonmlewis »

I'm trying to get a "REQUEST SAMPLES" link to overlay on the image.

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 "&nbsp;&nbsp;<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>";	
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Absolute position of DIV in Div - not working

Post by Celauran »

Do you mean something like this? http://jsfiddle.net/eLqeb4g3/
Post Reply