Background image

siric · May 28, 2010

Hi,

I am trying to display a button image (70px * 70px) with text positioned above it. However, the size of the button scales with the size of the font of the text. How can I get the image displayed at full size?

Image attached.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 Column CSS Layout - parellel design</title>
<style type='text/css'>

.bizinfomask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 100%;
   padding-top: 10px;
   
}

.bizinfocolleft{
   position: relative;
   width: 100%;
   right: 50%;
   
}
.bizinfocol1{
position: relative;
overflow: hidden;
float: left;
width: 48%;
left: 95%;
padding-top: 10px;
position: relative;
text-align:center;
height:70px;

}

.bizinfocol2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 48%;
   left: 3%;
   
}

.button {
font-family: Georgia, serif;
position:relative; 
font-size: 42px;
font-weight: bold;
color:red;
padding-top: 10px;
position: relative;
height:170px;
background-image:url('csindex.png');
background-repeat:no-repeat;
background-position:center right;
}

</style>
</head>
<body>
<?

$button_text = "100";
$business = "Acme";
$address = "123 fourth street";
$description = "description";


   echo "<div class='bizinfomask'>";
echo "<div class='bizinfocolleft'>";
	echo "<div class='bizinfocol1'>";
		echo "<span class='button'>$button_text</span>";

	echo "</div>";
	echo "<div class='bizinfocol2'>";
		print "<span class='bizname'>$business</span><br /><span class='bizinfo'>$address</span><br/><span class='description'>$description</span>";
	echo "</div> ";
echo "</div> ";
echo "</div>";
  ?>
</body>
</html>

Thanks for the help

[attachment deleted by admin]

haku · May 28, 2010

Please don't post PHP in the CSS section. PHP is irrelevant to CSS. Paste the HTML output of your PHP script.

siric · May 28, 2010

Please don't post PHP in the CSS section. PHP is irrelevant to CSS. Paste the HTML output of your PHP script.

Sorry, here is CSS and HTML only

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>

.bizinfomask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 100%;
   padding-top: 10px;
   
}

.bizinfocolleft{
   position: relative;
   width: 100%;
   right: 50%;
   
}
.bizinfocol1{
position: relative;
overflow: hidden;
float: left;
width: 48%;
left: 95%;
padding-top: 10px;
position: relative;
text-align:center;
height:70px;

}

.bizinfocol2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 48%;
   left: 3%;
   
}

.button {
font-family: Georgia, serif;
position:relative; 
font-size: 42px;
font-weight: bold;
color:red;
padding-top: 10px;
position: relative;
height:170px;
background-image:url('csindex.png');
background-repeat:no-repeat;
background-position:center right;
}

</style>
</head>
<body>

<div class='bizinfomask'>
<div class='bizinfocolleft'>
	<div class='bizinfocol1'>
		<span class='button'>100</span>
	</div>
	<div class='bizinfocol2'>
		<span class='bizname'>Acme</span><br /><span class='bizinfo'>123 Fourth Street</span><br/><span class='description'>description</span>
	</div>
</div>
</div>

</body>
</html>

haku · May 28, 2010

Thanks for re-posting that. I just looked through your original post again, but I don't really understand what the problem is or what you are trying to ask.

siric · May 28, 2010

Thanks for re-posting that. I just looked through your original post again, but I don't really understand what the problem is or what you are trying to ask.

What I am saying is that the size of the image depends on the font size - if I reduce the font I get less of the image.

I have attached the results and what I really want to get.

Thanks

[attachment deleted by admin]

haku · May 28, 2010

That's because you are setting the image to a span, which is an inline element. Inline elements ignore heights/widths, and will just expand based on the contained text. You need to set the element to a block element.

I'd do it like this:

<span class="button">100</a>

a.button
{
  display:block;
  height:70px;
  width:70px;
  background:url(csindex.png) no-repeat;
  line-height:70px;
  text-align:center;
}

If you want to center it horizontally, add

text-align:center;

siric · May 28, 2010

Perfecto...

Thanks very much..

Sign In

Background image

Recommended Posts

siric

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

siric

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

siric

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

siric

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information