aligning boxes

[thebigman]

Hi was told to put this

align: center;

to center tables in an html page but where does it go, into css or html not got a clue thanks.

[kylethedarkn]

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:

<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:

<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.

[thebigman]

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.

[kylethedarkn]

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/

[thebigman]

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.

[thebigman]

/* Document-wide definitions */
body {background-color:#FFFFFF}
body {font-family:Calibri}
body.content {}
body.navigation {}
/* Common definitions for all elements */
#singleBorder {border-width:1px; border-style:solid; border-color:#282828}

/* Colors and frames for headlines and images */
h2, h3, h4 {color:#0000FF}
table, h2, h3, h4, img {margin-bottom:6px}
table img {margin-bottom:0px; border:0px}
table.header img {padding-right:12px}

/* definitions for "native" tables (i.e. lists) */
table.native {border-width:0px}
table.native tr.color0 {color:#282828; background-color:#FFFFFF}
table.native tr.color1 {color:#0000FF; background-color:#C0C0C0}
table.native tr.color2 {color:#0000FF; background-color:#D6E9E4}
table.native tr.color3 {color:#0000FF; background-color:#B5DBD3}
table.native tr.color4 {color:#0000FF; background-color:#54A095}
table.native tr.color5 {color:#0000FF; background-color:#C4D2D3}
table.native tr.color6 {color:#0000FF; background-color:#8BAFB1}
table.native tr.color7 {color:#0000FF; background-color:#5A989A}
table.native tr.color8 {color:#0000FF; background-color:#A7C0C2}
table.native tr.color9 {color:#0000FF; background-color:#76A8AA}
table.native tr.color10 {color:#0000FF; background-color:#429195}
table.native tr.color11 {color:#0000FF; background-color:#FFFFFF}
table.native tr.color12 {color:#0000FF; background-color:#FFFFFF}
table.native tr.separator {color:#0000FF; background-color:#FFFFFF} /* Intermediate headlines in result lists */
table.native tr.headFoot {color:#FFFFFF; background-color:#C0C0C0}  /* Headers and footers in lists */
table.native td {padding:1px; padding-left:4px; padding-right:4px; border-style:solid; border-color:#0000FF; border-width:0px; border-bottom-width:1px}
table.native tr.separator td {border-bottom-width:0px}
table.native td.sepBar {border-right-width:1px}
table.native td.noValue {padding-left:0px; padding-right:0px}
table.native td.firstCol {border-left-width:1px}
table.native td.lastCol {border-right-width:1px}
table.native img.tableImage {padding-left:2px; padding-right:4px}
#firstRow {border-top-width:1px}
#lastRow {}
table.native th {border-width:1px; border-style:solid; border-color:#282828; padding-left:4px; padding-right:4px}

/* Text fields with or without background and border lines */
td.textField {color:#282828; background-color:#E7F1EE; padding:2px; border-style:solid; border-width:1px; border-color:#282828}
td.transparent {color:#0000FF; background-color:#FFFFFF; border-width:0px}
p.textField {margin-top:0px; margin-bottom:6px}

table.composedRow td {padding-left:4px; padding-right:4px}

/* Result matrix (is a single large HTML table) */
table.matrix {border-width:0px}
table.matrix td {color:#0000FF; border-style:solid; border-color:#0000FF; border-width:0px;}
table.matrix #colorFrame {color:#0000A0; background-color:#FFFFFF}
table.matrix #colorTable {background-color:#FFFFFF; padding-left:3px; padding-right:3px}
table.matrix #colorTableSmall {background-color:#FFFFFF; padding-left:3px; padding-right:3px; font-size:80%}
table.matrix #colorTableNoValue {background-color:#FFFFFF; padding-left:0px; padding-right:0px}
table.matrix #colorTableSmallNoValue {background-color:#FFFFFF; font-size:80%; padding-left:0px; padding-right:0px}
table.matrix #color1 {background-color:#C0C0C0; font-size:80%}
table.matrix #color2 {background-color:#D6E9E4; font-size:80%}
table.matrix td.border_b {border-bottom-width:1px}
table.matrix td.border_br {border-bottom-width:1px; border-right-width:1px}
table.matrix td.border_r {border-right-width:1px}

[kylethedarkn]

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.

<table align="center">

[thebigman]

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,