943,589 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > aligning boxes
Ad:
Permalink
Oct 21st, 2008
0

aligning boxes

Expand Post »
Hi was told to put this
HTML and CSS Syntax (Toggle Plain Text)
  1. align: center;

to center tables in an html page but where does it go, into css or html not got a clue thanks.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
thebigman is offline Offline
7 posts
since Sep 2008
Permalink
Oct 21st, 2008
0

Re: aligning boxes

Well you could do it one of two ways. The first way is against the current standards but it still works and that is to do something like this:
HTML and CSS Syntax (Toggle Plain Text)
  1. <div align="center> Text/Whatever</div>

The other way is to use CSS which could be done several different ways but I'll just show you the one where you put it straight into the tag:
HTML and CSS Syntax (Toggle Plain Text)
  1. <div style="position:absolute;left:15%;">Text/Whatever</div>

That says start the box at point 0,0 of whatever its contained in and move it 15% away from the left side. You can play with the percent to align it perfectly center.

There are probably other ways as well, but I can't name any off the top of my head.
Team Colleague
Reputation Points: 55
Solved Threads: 39
A.K.A. The Laughing Man
kylethedarkn is offline Offline
600 posts
since May 2006
Permalink
Oct 22nd, 2008
0

Re: aligning boxes

Will that align everything underneath or will i have to put that a few times.

Is there any good software that can be recomended that does all this for?

Thanks again.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
thebigman is offline Offline
7 posts
since Sep 2008
Permalink
Oct 22nd, 2008
0

Re: aligning boxes

Well the div tag basically makes an imaginary box around whatever is inside it and yes it will align everything in between the two div tags.

If you want a good program I recommend Adobe Dreamweaver CS3, but that cost a good chunk of money I believe, however there is a free trial you can download on the adobe site.

http://www.adobe.com/products/dreamweaver/
Team Colleague
Reputation Points: 55
Solved Threads: 39
A.K.A. The Laughing Man
kylethedarkn is offline Offline
600 posts
since May 2006
Permalink
Oct 22nd, 2008
0

Re: aligning boxes

I forgot to mention, I am using a programme that i use to create league standings and player stats. It then exports to a couple of html pages and creates a css file. It only updates changed files. The league tables are all displayed in these html pages so i dont know if that makes any difference. I can post the css code or index file etc to see what i mean. Its the whole league tables i need centred. I can give you the web address to let you see what i mean if you want.

Thanks.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
thebigman is offline Offline
7 posts
since Sep 2008
Permalink
Oct 22nd, 2008
0

Re: aligning boxes

HTML and CSS Syntax (Toggle Plain Text)
  1. /* Document-wide definitions */
  2. body {background-color:#FFFFFF}
  3. body {font-family:Calibri}
  4. body.content {}
  5. body.navigation {}
  6. /* Common definitions for all elements */
  7. #singleBorder {border-width:1px; border-style:solid; border-color:#282828}
  8.  
  9. /* Colors and frames for headlines and images */
  10. h2, h3, h4 {color:#0000FF}
  11. table, h2, h3, h4, img {margin-bottom:6px}
  12. table img {margin-bottom:0px; border:0px}
  13. table.header img {padding-right:12px}
  14.  
  15. /* definitions for "native" tables (i.e. lists) */
  16. table.native {border-width:0px}
  17. table.native tr.color0 {color:#282828; background-color:#FFFFFF}
  18. table.native tr.color1 {color:#0000FF; background-color:#C0C0C0}
  19. table.native tr.color2 {color:#0000FF; background-color:#D6E9E4}
  20. table.native tr.color3 {color:#0000FF; background-color:#B5DBD3}
  21. table.native tr.color4 {color:#0000FF; background-color:#54A095}
  22. table.native tr.color5 {color:#0000FF; background-color:#C4D2D3}
  23. table.native tr.color6 {color:#0000FF; background-color:#8BAFB1}
  24. table.native tr.color7 {color:#0000FF; background-color:#5A989A}
  25. table.native tr.color8 {color:#0000FF; background-color:#A7C0C2}
  26. table.native tr.color9 {color:#0000FF; background-color:#76A8AA}
  27. table.native tr.color10 {color:#0000FF; background-color:#429195}
  28. table.native tr.color11 {color:#0000FF; background-color:#FFFFFF}
  29. table.native tr.color12 {color:#0000FF; background-color:#FFFFFF}
  30. table.native tr.separator {color:#0000FF; background-color:#FFFFFF} /* Intermediate headlines in result lists */
  31. table.native tr.headFoot {color:#FFFFFF; background-color:#C0C0C0}  /* Headers and footers in lists */
  32. table.native td {padding:1px; padding-left:4px; padding-right:4px; border-style:solid; border-color:#0000FF; border-width:0px; border-bottom-width:1px}
  33. table.native tr.separator td {border-bottom-width:0px}
  34. table.native td.sepBar {border-right-width:1px}
  35. table.native td.noValue {padding-left:0px; padding-right:0px}
  36. table.native td.firstCol {border-left-width:1px}
  37. table.native td.lastCol {border-right-width:1px}
  38. table.native img.tableImage {padding-left:2px; padding-right:4px}
  39. #firstRow {border-top-width:1px}
  40. #lastRow {}
  41. table.native th {border-width:1px; border-style:solid; border-color:#282828; padding-left:4px; padding-right:4px}
  42.  
  43. /* Text fields with or without background and border lines */
  44. td.textField {color:#282828; background-color:#E7F1EE; padding:2px; border-style:solid; border-width:1px; border-color:#282828}
  45. td.transparent {color:#0000FF; background-color:#FFFFFF; border-width:0px}
  46. p.textField {margin-top:0px; margin-bottom:6px}
  47.  
  48. table.composedRow td {padding-left:4px; padding-right:4px}
  49.  
  50. /* Result matrix (is a single large HTML table) */
  51. table.matrix {border-width:0px}
  52. table.matrix td {color:#0000FF; border-style:solid; border-color:#0000FF; border-width:0px;}
  53. table.matrix #colorFrame {color:#0000A0; background-color:#FFFFFF}
  54. table.matrix #colorTable {background-color:#FFFFFF; padding-left:3px; padding-right:3px}
  55. table.matrix #colorTableSmall {background-color:#FFFFFF; padding-left:3px; padding-right:3px; font-size:80%}
  56. table.matrix #colorTableNoValue {background-color:#FFFFFF; padding-left:0px; padding-right:0px}
  57. table.matrix #colorTableSmallNoValue {background-color:#FFFFFF; font-size:80%; padding-left:0px; padding-right:0px}
  58. table.matrix #color1 {background-color:#C0C0C0; font-size:80%}
  59. table.matrix #color2 {background-color:#D6E9E4; font-size:80%}
  60. table.matrix td.border_b {border-bottom-width:1px}
  61. table.matrix td.border_br {border-bottom-width:1px; border-right-width:1px}
  62. table.matrix td.border_r {border-right-width:1px}
Reputation Points: 10
Solved Threads: 0
Newbie Poster
thebigman is offline Offline
7 posts
since Sep 2008
Permalink
Oct 22nd, 2008
0

Re: aligning boxes

Ok I see your using tables. In which case the easiest way to do this is to open the html in notepad or something similar and find the top most <table> tag and just add align=center to it like this.

HTML and CSS Syntax (Toggle Plain Text)
  1. <table align="center">
Team Colleague
Reputation Points: 55
Solved Threads: 39
A.K.A. The Laughing Man
kylethedarkn is offline Offline
600 posts
since May 2006
Permalink
Oct 23rd, 2008
0

Re: aligning boxes

Does that mean i have to do this everytime? They get updated every week sometimes more than once. Doesnt really matter if so just a hastle. Thanks,
Reputation Points: 10
Solved Threads: 0
Newbie Poster
thebigman is offline Offline
7 posts
since Sep 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: How do I center a basic <li>
Next Thread in HTML and CSS Forum Timeline: How can I use CSS & div instead of table layouts in this case??





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC