Jump to content

Images as Backgrounds


holmedwa04

Recommended Posts

Hi,It is a long time since I have been online but I really need some help and so I must post this!I have been creating Sudokus and it is only now when I have made 28 that I realise when you click on print the white text used as spacers will print! I have tried   but this mess' up all of the spacings so it must be a number. So I set it to white but obviousl it still prints. The only way round this that I can think of is using an image that is the correct size. The only problem is I am having trouble making the cell padding work properly.This is a screen shot:

image1dx6.gif

This is my stylesheet coding:

a:link { color:#0000ff; text-decoration:none; }a:visited { color:#0000ff; text-decoration:none; }a:hover { color:#006633; text-decoration:underline overline; }a.2:link { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:visited { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:hover { color:#006633; text-decoration:underline overline; font-weight:bold; }a.3:link { color:#000000; text-decoration:none; }a.3:visited { color:#000000; text-decoration:none; }a.3:hover { color:#006633; text-decoration:underline overline; }a.4:link { color:#ff0000; text-decoration:none; }a.4:visited { color:#ff0000; text-decoration:none; }a.4:hover { color:#006633; text-decoration:underline overline; }a.5:link { color:#006633; text-decoration:none; }a.5:visited { color:#006633; text-decoration:none; }a.5:hover { color:#006633; text-decoration:underline overline; }body { scrollbar-3dlight-color:#000000;scrollbar-arrow-color:#FFFFFF;scrollbar-base-color:#000033;scrollbar-darkshadow-color:#000000;scrollbar-face-color:#000066;scrollbar-track-color:#000099;scrollbar-shadow-color:#000033; }body {font-family:arial;color:black;font-size:12pt;}td {font-family:arial;color:black;font-size:12pt;}td img {display: block;}#grid{border:3px solid #000;}#grid td{padding:0px; border:1px solid #000; width:120;text-align:center;}#grid td.rcell{border-bottom:0px; padding:0px; width:120px; text-align:center;}#grid td.ncell{border-right:0px;border-bottom:0px; padding:0px; width:120px; text-align:center;}#grid td.bcell{border-right:0px; padding:0px; wodth:120px; text-align:center;}#grid td.xcell{border:0px;padding:0px; padding:0px; width:120px; text-align:center;}p { padding:0; margin:0; }p.n { padding:0; margin:0; color:white; }p.a { color:red; font; }

...And this is my page coding:

<html><head><title>Sudoku Puzzle 28 (Hard)</title></head><LINK rel="stylesheet" type="text/css" href="sudokustylesheet.css"><body bgcolor="#000066" link="blue" vlink="blue"><font size="3"><font face="Arial"><font color="black"><center><table border="0" cellpadding="100" cellspacing="0" width="85%" bordercolor="#000000" bgcolor="#FFFFFF"><tr><td><BR><font size="5"> <center><b><u>Sudoku Puzzle 28 (Hard)</u></b><BR><BR></center><font size="2">You know the score, make sure that there is the numbers 1 - 9 in every row, column and 3 x 3 grid! Once you have finished,check your answers by clicking the back button at the bottom of this page and click the small A on the right to theappropiate puzzle.<BR><BR><BR><BR><center><table id="grid" cellspacing="0" cellpadding="0" width="120" height="120"> <tr>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="n"><img width="9" border="1" height="9" src="../images/white.gif"></p></td>     <td class="ncell"><p class="n">0</p></p></td>     <td class="rcell"><p class="">7</p></td>    </tr>    <tr>     <td class="ncell"><p class="">5</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="bcell"><p class="n">0</p></td>     <td class="bcell"><p class="">3</p></td>     <td><p class="n">0</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="">4</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="">2</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="bcell"><p class="">1</p></td>     <td class="bcell"><p class="n">0</p></td>     <td><p class="n">0</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="">9</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="bcell"><p class="">8</p></td>     <td class="bcell"><p class="n">0</p></td>     <td><p class="">4</p></td>    </tr>   </table>  </td> </tr> <tr>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="">6</p></td>    </tr>    <tr>     <td class="ncell"><p class="">9</p></td>     <td class="ncell"><p class="">1</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="bcell"><p class="n">0</p></td>     <td class="bcell"><p class="n">0</p></td>     <td><p class="n">0</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="bcell"><p class="n">0</p></td>     <td class="bcell"><p class="n">0</p></td>     <td><p class="n">0</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="">6</p></td>     <td class="rcell"><p class="">7</p></td>    </tr>    <tr>     <td class="bcell"><p class="">5</p></td>     <td class="bcell"><p class="n">0</p></td>     <td><p class="n">0</p></td>    </tr>   </table>  </td> </tr> <tr>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="">4</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="">2</p></td>    </tr>    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="bcell"><p class="n">0</p></td>     <td class="bcell"><p class="">8</p></td>     <td><p class="n">0</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="">9</p></td>    </tr>    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="">7</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="bcell"><p class="n">0</p></td>     <td class="bcell"><p class="">5</p></td>     <td><p class="n">0</p></td>    </tr>   </table>  </td>  <td class="xcell">   <table cellspacing="0" cellpadding="0" width="120" height="120">    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="">1</p></td>     <td class="rcell"><p class="n">0</p></td>    </tr>    <tr>     <td class="ncell"><p class="n">0</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="">3</p></td>    </tr>    <tr>     <td class="bcell"><p class="">6</p></td>     <td class="bcell"><p class="n">0</p></td>     <td><p class="n">0</p></td>    </tr>   </table>  </td> </tr></table></center><BR><BR><BR><center><BR><form> <input type="Button" value="Back" onclick="history.back()"> </form><BR>______________________________________________________<BR><font size=1>Edward Holmes, SMC @ CCMS, <a href="mailto:shapemakingclub@btconnect.com">shapemakingclub@btconnect.com</a></center></td></tr></table></center></body></html>

I would be very grateful if you could help me to get the image seen in the screen shot to worl properly. I have added the border code so that I can see wher the edges of the image are but they can go.

Link to comment
Share on other sites

table { empty-cells: show }That will make any cell that is empty have the full border around it, I am guessing that is sort of what you want?
No Sorry, not really, I am using 0's as retainers to make sure that the cells that appear to be empty stay the exact size, the only problem is is that it still prints the white text. Andf so I am trying to put a white picture in there to hold it to the right size but stop it from printing.I have just added the border so that I could see where the edge of the image is.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...