Moron Posted September 15, 2006 Share Posted September 15, 2006 Here's your trivia question for the day! I'm designing a system where an employee can authenticate and pull up a graphical representation of their latest pay stub. I scanned a stub as a .JPG image, set it as the table background image, then went to town plugging data in table containers in the appropriate places.My question is..... can PHP results be plugged into an image map of some sort? I used a style sheet to make the background image resize to whatever resolution the user is running, but the data only lines up properly at my resolution (800x600). At 1024x768, it's offset. So is there a way to directly stick the database items in a particular spot on the image -OR- can anyone suggest an alternate solution?Thanks! Quote Link to comment Share on other sites More sharing options...
markbett Posted September 15, 2006 Share Posted September 15, 2006 heres a solution...cssuse css and make <div>'s and put the correct data into the div and then using absolute positioning float the divs into the right location on top of the background image...css is very versitle this waysee csszengarden.com for more info on CSS styling Quote Link to comment Share on other sites More sharing options...
Moron Posted September 18, 2006 Author Share Posted September 18, 2006 [quote author=markbett link=topic=108221.msg435108#msg435108 date=1158349073]heres a solution...cssuse css and make <div>'s and put the correct data into the div and then using absolute positioning float the divs into the right location on top of the background image...css is very versitle this waysee csszengarden.com for more info on CSS styling[/quote]Didn't work. The absolute positioning works, but what looks perfect at 800x600 is way offset at 1024x768. Quote Link to comment Share on other sites More sharing options...
AndyB Posted September 18, 2006 Share Posted September 18, 2006 Fix the width of the div that shows the background image. Let the rest of the page do whatever it does at whatever resolution it likes, it will have no effect on a div that's a [b]defined[/b] size. Quote Link to comment Share on other sites More sharing options...
Moron Posted September 18, 2006 Author Share Posted September 18, 2006 [quote author=AndyB link=topic=108221.msg436612#msg436612 date=1158597469]Fix the width of the div that shows the background image. Let the rest of the page do whatever it does at whatever resolution it likes, it will have no effect on a div that's a [b]defined[/b] size.[/quote][code]<div style="position:absolute; z-index:-10"><CENTER><table width="100%" border="0" cellpadding="0" cellspacing="0"><div style="position:absolute; z-index:-10"><img src="http://orserva/images/paystub/paystubblank.jpg" width="100%"></div><!---; z-index:-10---> <tr > <td align=center valign=bottom> <BR><br><br><br><br><BR><BR><!---Table for top entry---><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr align=left valign=bottom> <td align=left valign=bottom width="8%"> <font size="3" color="#000000" face="courier">   <span style="position: absolute; top:+138; left:35;" class="fixed"><?php echo $RESULT['PAYCTR']; ?></font></span> </td> <td align=left valign=bottom width="8%"> <font size="3" color="#000000" face="courier">  <?php echo $RESULT['EMPNO']; ?></font> </td><td align=left valign=bottom width="35%"> <font size="3" color="#000000" face="courier">      <?php echo $RESULT['NAMEF']; ?> <?php echo $RESULT['NAMEMI']; ?> <?php echo $RESULT['NAMEL']; ?></font> </td><td align=left valign=bottom width="11%"> <font size="3" color="#000000" face="courier">      1 </font> </td><td align=left valign=bottom width="10%"> <font size="3" color="#000000" face="courier">   <?php echo $RESULT['EPEDAT']; ?></font> </td> <td align=center valign=bottom width="11%"> <font size="3" color="#000000" face="courier">   00000</font> </td> </tr></table><br><br><!---Second table---><table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr align=left valign=bottom> <td align=left valign=bottom width="8%"> <font size="3" color="#000000" face="courier">   <?php echo $RESULT['ECRUD']; ?></font> <td align=left valign=bottom width="8%"> <font size="3" color="#000000" face="courier">Cal. YTD</font> </td> </td> </tr> </table></div>[/code]So what am I doing wrong? I'm making the image the same size at any resolution, I'm using absolute positioning and absolute font size on the Pay Center, yet at 1024x768, the Pay center displays several lines above where it should be. I also tried relative positioning. Same result. Quote Link to comment Share on other sites More sharing options...
AndyB Posted September 18, 2006 Share Posted September 18, 2006 Assuming you have an image that's 800px wide ...Fix the width of the div it's displayed in to 800px and set the [i]background[/i] of that div using CSS. Position the numbers relative to the top left corner of the same div.<div id="paystub"> .... </div>CSS:#paystub {width:800px;background: url('path/to/your/image');} Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.