Class'

[boen_robot]

Now, I hope that this is the very last thing that I have to ask about these Sudoku's I am trying to make, how do I center things in a class, here is my CSS:p { padding:0; margin:0; }p.n { padding:0; margin:2px; color:white; }p.a { font-weight:bold;color:red;padding-bottom:0px; }I have set it to bold.

The same way you would center anything else. "margin: 0 auto;" or "text-align: center;" depending if you want to center the element or it's content (text to be exact).

[holmedwa04]

Ah right, I was trying to use align:center, im sure there was someting else aswell :)Thanks, finally I have completed the coding for a Sudoku, ghee whiz, I didn't think it would be that hard.Oh well thankyou everyone who has helped me, and hopefully I will be able to upload lots of Sudokus soon, but I am currently back at school now, and so progress is slower now!

[holmedwa04]

Oh no, I hasn't done what I thought it had, this is my code, but the numbers are not centered:

#grid{border:3px solid #000;font-family:arial}#grid td{padding:0px;border:1px solid #000;text-align:center;width:33px;height:33px;text-align:center}#grid td.rcell{border-bottom:0px}#grid td.ncell{border-right:0px;border-bottom:0px}#grid td.bcell{border-right:0px}#grid td.xcell{border:0px;padding:0px;}p { padding:0; margin:0; text-align:center;}p.a { font-weight:bold;color:red;padding-bottom:0px align:center; text-align: center;}

Help please!

[boen_robot]

p { padding:0; margin:0; text-align:center;}p.a { font-weight:bold;color:red;padding-bottom:0px align:center; text-align: center;}

Did you tryed using "margin: 0 auto;" instead? And remove this align property, will you? It doesn't exist:

p { padding:0; margin:0 auto; text-align:center;}p.a { font-weight:bold;color:red;padding-bottom:0px; margin: 0 auto; text-align: center;}

[edit] I did. Can't you read? Look at my last code.[/edit]

[holmedwa04]

Ok, now I am confussed, can you just change my code, and then post it please?

[Jack McKalling]

There were some little things you should have removed, so here I did:

#grid{border:3px solid #000;font-family:arial}#grid td{padding:0px;border:1px solid #000;text-align:center;width:33px;height:33px;}#grid td.rcell{border-bottom:0px}#grid td.ncell{border-right:0px;border-bottom:0px}#grid td.bcell{border-right:0px}#grid td.xcell{border:0px;padding:0px;}p { padding:0; margin:0; text-align:center;}p.a { font-weight:bold;color:red;padding-bottom:0px; text-align: center;}

If this does not work, then take boen_robot's suggestion and replace the blue in this box with this: margin: 0 auto;

[holmedwa04]

No sorry, that doesn't seem to work

[holmedwa04]

Why wont it work?

[justsomeguy]

The CSS information they gave will center content. It's not enough to say it doesn't work, if it doesn't do what you are expecting you need to say what it is and what it is not doing so we know what the problem is.But, this information does center the text. If you don't think it is, post a screenshot and point out what the problem is.

[holmedwa04]

Im every so sorry about the late reply, I just really haven't gotround to posting a picture, here it is:To me the number dont seem to be centered.Edit: I just thought I better add the code that I am using to save you from having to scroll up and down, here it is:

#grid{border:3px solid #000;font-family:arial}#grid td{padding:0px;border:1px solid #000;text-align:center;width:33px;height:33px;}#grid td.rcell{border-bottom:0px}#grid td.ncell{border-right:0px;border-bottom:0px}#grid td.bcell{border-right:0px}#grid td.xcell{border:0px;padding:0px;}p { padding:0; margin:0; text-align:center;}p.a { font-weight:bold;color:red;padding-bottom:0px; text-align: center;}

[justsomeguy]

The numbers look slightly offset to the left. There might be a space character to the right of each number. Hit CTRL-A to select all and see if there is a space following the number. If that doesn't work, it might just be a minor bug, and you can probably add a little padding on the left to scoot it over a little bit.

[holmedwa04]

The numbers look slightly offset to the left. There might be a space character to the right of each number. Hit CTRL-A to select all and see if there is a space following the number. If that doesn't work, it might just be a minor bug, and you can probably add a little padding on the left to scoot it over a little bit.

Yeh, although there are no spaces in the coding, there does seem to be a space when I highlight some of it. How would I fix it, could you possibly modify the code?

[holmedwa04]

Please can you help me!

[holmedwa04]

Not sure actually why that code is even there, because it isn't the most up to date one that I am using, here it is:

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; }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;}#grid{border:3px solid #000;font-family:arial}#grid td{padding:0px;border:1px solid #000;text-align:center;width:33px;height:33px;}#grid td.rcell{border-bottom:0px}#grid td.ncell{border-right:0px;border-bottom:0px}#grid td.bcell{border-right:0px}#grid td.xcell{border:0px;padding:0px;}p { padding:0; margin:0; text-align:center;}p.a { font-weight:bold;color:red;padding-bottom:0px; margin: 0 auto}

Please could you change my code, becuase I am not sure what you mean?Edit: Oops, I thought someone had replied, because I was on the wrong page, sorry!

[boen_robot]

Look for any " " in your HTML file and remove them. Also remove normal spaces in cells. Turn

<td>1 </td>

to

<td>1</td>

[holmedwa04]

No, there are not any of them, sorry.

[holmedwa04]

Please can anyone help, this thing is really annoying me, I wish I hadn't even thought of putting a SUDOKU page on my site, lol.

[boen_robot]

Would you at east show your current (X)HTML code?

[holmedwa04]

Right, sorry about this, as the topic is so long now, there appears to be alot of confussion about what code I am now using, and so I will post it below:This is my CSS:

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; }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;}#grid{border:3px solid #000;font-family:arial}#grid td{padding:0px;border:1px solid #000;text-align:center;width:33px;height:33px;}#grid td.rcell{border-bottom:0px}#grid td.ncell{border-right:0px;border-bottom:0px}#grid td.bcell{border-right:0px}#grid td.xcell{border:0px;padding:0px;}p { padding:0; margin:0; text-align:center;}p.a { font-weight:bold;color:red;padding-bottom:0px; margin: 0 auto}

... and this is my HTML:

<html><head><title>Sudoku Puzzle 01 Answers (Easiest)</title></head><LINK rel="stylesheet" type="text/css" href="sudokustylesheet2.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 01 Answers (Easiest)</u></b><BR><BR></center><font size="2">Check your answers by marking of all of the numbers that you have correct by checking them off with the red answers.<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">0</td>     <td class="ncell"><p class="">5</p></p></td>     <td class="rcell"><p class="">1</p></td>    </tr>    <tr>     <td class="ncell"><p class="a">3</p></td>     <td class="ncell"><p class="a">0</p></td>     <td class="rcell"><p class="a">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="">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="">4</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="">5</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="">4</p></td>     <td class="ncell"><p class="">3</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="">2</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="">6</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="">2</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="n">0</p></td>     <td class="bcell"><p class="">4</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="">3</p></td>     <td class="ncell"><p class="">9</p></td>     <td class="rcell"><p class="">1</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="">2</p></td>     <td class="bcell"><p class="">5</p></td>     <td><p class="">7</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="">7</p></td>     <td class="rcell"><p class="n">0</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="">8</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="n">0</p></td>    </tr>    <tr>     <td class="ncell"><p class="">6</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="">9</p></td>     <td><p class="">2</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="">5</p></td>     <td class="ncell"><p class="n">0</p></td>     <td class="rcell"><p class="">9</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="">8</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="">1</p></td>    </tr>    <tr>     <td class="bcell"><p class="">7</p></td>     <td class="bcell"><p class="">6</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>

[boen_robot]

For starters, remove the classes of no class "p" elements.Replace <p class=""> with <p> I mean.Also, there's no "p.n" class defined in the CSS, so if you intend to use

p.a { font-weight:bold;color:red;padding-bottom:0px; margin: 0 auto}

then use

p.n { font-weight:bold;color:red;padding-bottom:0px; margin: 0 auto}

instead.

[justsomeguy]

Also, <p> is a block-level element, so it might be producing the extra whitespace. Preferably, you would probably want to change all of your <p> tags into <span> tags. But adding a display attribute to the CSS might also work:p { padding:0; margin:0; text-align:center; display: inline; }Also,

Please can you help me!

Chill! When your question goes unanswered, it's usually because people haven't seen it yet. People will answer your question when they see it, so there's no reason to ask again.Be cool, honey bunney.

[holmedwa04]

Nope, sorry the display inline hasn't worked, I sort of get what you mean about the span thing, but not really.Sorry about the "Please can you help me!"

[holmedwa04]

@boen robot, sorry but that doesn't work and also the sugestion about span makes the text valign top, which I can seem to change

[justsomeguy]

Nope, sorry the display inline hasn't worked, I sort of get what you mean about the span thing, but not really.

The <p> element is a block-level element, meaning that it takes up its own line, and includes a line break after it. The <span> element is inline, meaning it can be displayed on the same line as other elements. The fact that you are using a block-level element in the td might be the reason for the extra space. So, you can change all of your <p> tags:<p class="xxx">1</p>to span:<span class="xxx">1</span>The margin on the <p> style might also be to blame. Instead of putting that margin there (just make it 0, remove the 'auto'), put this on the td class:text-align: center;That will center the content in the td. The margin on the p class might actually be setting a margin of several pixels because of the 'auto'.

[reportingsjr]

Be cool, honey bunney.

*slowly creeps away, far away* lol.Is there a chance you can upload it or something so people can actually view it? Maybe that would help a tad bit?