siric Posted May 28, 2010 Share Posted 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] Link to comment https://forums.phpfreaks.com/topic/203158-background-image/ Share on other sites More sharing options...
haku Posted May 28, 2010 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/203158-background-image/#findComment-1064449 Share on other sites More sharing options...
siric Posted May 28, 2010 Author Share Posted 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> Link to comment https://forums.phpfreaks.com/topic/203158-background-image/#findComment-1064624 Share on other sites More sharing options...
haku Posted May 28, 2010 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/203158-background-image/#findComment-1064675 Share on other sites More sharing options...
siric Posted May 28, 2010 Author Share Posted 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] Link to comment https://forums.phpfreaks.com/topic/203158-background-image/#findComment-1064700 Share on other sites More sharing options...
haku Posted May 28, 2010 Share Posted 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; Link to comment https://forums.phpfreaks.com/topic/203158-background-image/#findComment-1064728 Share on other sites More sharing options...
siric Posted May 28, 2010 Author Share Posted May 28, 2010 Perfecto... Thanks very much.. Link to comment https://forums.phpfreaks.com/topic/203158-background-image/#findComment-1064800 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.