boen_robot Posted September 11, 2006 Share Posted September 11, 2006 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). Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 11, 2006 Author Share Posted September 11, 2006 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! Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 11, 2006 Author Share Posted September 11, 2006 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! Link to comment Share on other sites More sharing options...
boen_robot Posted September 11, 2006 Share Posted September 11, 2006 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] Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 12, 2006 Author Share Posted September 12, 2006 Ok, now I am confussed, can you just change my code, and then post it please? Link to comment Share on other sites More sharing options...
Jack McKalling Posted September 12, 2006 Share Posted September 12, 2006 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; Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 12, 2006 Author Share Posted September 12, 2006 No sorry, that doesn't seem to work Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 12, 2006 Author Share Posted September 12, 2006 Why wont it work? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 12, 2006 Share Posted September 12, 2006 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. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 14, 2006 Author Share Posted September 14, 2006 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;} Link to comment Share on other sites More sharing options...
justsomeguy Posted September 14, 2006 Share Posted September 14, 2006 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. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 15, 2006 Author Share Posted September 15, 2006 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? Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 16, 2006 Author Share Posted September 16, 2006 Please can you help me! Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 16, 2006 Author Share Posted September 16, 2006 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! Link to comment Share on other sites More sharing options...
boen_robot Posted September 16, 2006 Share Posted September 16, 2006 Look for any "Â " in your HTML file and remove them. Also remove normal spaces in cells. Turn <td>1 </td> to <td>1</td> Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 16, 2006 Author Share Posted September 16, 2006 No, there are not any of them, sorry. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 17, 2006 Author Share Posted September 17, 2006 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. Link to comment Share on other sites More sharing options...
boen_robot Posted September 18, 2006 Share Posted September 18, 2006 Would you at east show your current (X)HTML code? Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 18, 2006 Author Share Posted September 18, 2006 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> Link to comment Share on other sites More sharing options...
boen_robot Posted September 18, 2006 Share Posted September 18, 2006 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 18, 2006 Share Posted September 18, 2006 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. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 18, 2006 Author Share Posted September 18, 2006 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!" Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 19, 2006 Author Share Posted September 19, 2006 @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 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 20, 2006 Share Posted September 20, 2006 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'. Link to comment Share on other sites More sharing options...
reportingsjr Posted September 20, 2006 Share Posted September 20, 2006 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? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now