Hi -
I'm converting this table/Front Page document (<!-- m --><a class="postlink" href="http://kdla.ky.gov/resources/kysymbols.htm">http://kdla.ky.gov/resources/kysymbols.htm</a><!-- m -->) to CSS/strict doctype. I can't figure out how to center the divs in the first column.
I changed the <td align="center"> to divs with text-align, but that doesn't seem to work....
Here's a piece of the table:
<table style="border: 0; margin: 0; padding: 4px;">
<tr valign="middle">
<td>
<div style="text-align: center;">
<div style="background-image: url(../Images/KYSymbols/04english.jpg); width: 116px; height: 75px; background-repeat: no-repeat;"></div>
</div>
</td>
<td>
<p class="content"><strong>State Language</strong>: English,
adopted 1984 (<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lrc.state.ky.us/krs/002-00/013.PDF">KRS 2.013</a>)</p>
</td>
</tr>
<tr valign="middle">
<td>
<div style="text-align: center;">
<div style="background-image: url(../images/kysymbols/04seal.jpg); width: 75px; height: 75px; background-repeat: no-repeat;"></div>
</div>
</td>
<td>
<p class="content"><strong>State Seal</strong>, adopted 1942
(KRS 2.020)<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"kyseal.htm">more about the state seal...</a></p>
<p class="content"><strong>State Motto</strong>: "United
We Stand, Divided We Fall," adopted 1942</p>
<p class="content"><strong>Official Latin Motto</strong>: "<em>Deo
gratiam habeamus"</em> ("Let us be grateful to God"),
adopted 2002 (KRS 2.105)</p></td>
</tr>
<tr valign="middle">
<td>
<div style="text-align: center;">
<div style="background-image: url(../images/kysymbols/04flag.jpg); width: 122px; height: 83px; background-repeat: no-repeat;"></div>
</div>
</td>
<td>
<p class="content"><strong>State Flag</strong>, adopted 1962
(<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lrc.state.ky.us/krs/002-00/030.PDF">KRS
2.030</a>)<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"kyflag.htm">more about the
state flag...</a></p>
<p class="content"><strong>Pledge of Allegiance to State Flag</strong>:
"I pledge allegiance to the Kentucky flag, and to the Sovereign
State for which it stands, one Commonwealth, blessed with diversity, natural wealth, beauty, and grace from on High." Adopted 2000.
(<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lrc.state.ky.us/krs/002-00/035.PDF">KRS
2.035</a>)</p>
</td>
</tr>
</table>
(Some of the coding is stinky right now, but it does pass validation.)
Thanks,
KDLATry adding text-align: center; and margin: auto; to your background image
<div style="background-image: url(../Images/KYSymbols/04english.jpg); width: 116px; height: 75px;
background-repeat: no-repeat; text-align: center; margin: auto;">For horizontally centered images you can put them in the foreground like so.
<div style="text-align:center;..."><img src=http://www.webdeveloper.com/forum/archive/index.php/"..."></div>
For backgrounds try
<div style="background:url(...) 50% 50% no-repeat"></div>NICE!
Thanks, Ray!
I'm converting this table/Front Page document (<!-- m --><a class="postlink" href="http://kdla.ky.gov/resources/kysymbols.htm">http://kdla.ky.gov/resources/kysymbols.htm</a><!-- m -->) to CSS/strict doctype. I can't figure out how to center the divs in the first column.
I changed the <td align="center"> to divs with text-align, but that doesn't seem to work....
Here's a piece of the table:
<table style="border: 0; margin: 0; padding: 4px;">
<tr valign="middle">
<td>
<div style="text-align: center;">
<div style="background-image: url(../Images/KYSymbols/04english.jpg); width: 116px; height: 75px; background-repeat: no-repeat;"></div>
</div>
</td>
<td>
<p class="content"><strong>State Language</strong>: English,
adopted 1984 (<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lrc.state.ky.us/krs/002-00/013.PDF">KRS 2.013</a>)</p>
</td>
</tr>
<tr valign="middle">
<td>
<div style="text-align: center;">
<div style="background-image: url(../images/kysymbols/04seal.jpg); width: 75px; height: 75px; background-repeat: no-repeat;"></div>
</div>
</td>
<td>
<p class="content"><strong>State Seal</strong>, adopted 1942
(KRS 2.020)<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"kyseal.htm">more about the state seal...</a></p>
<p class="content"><strong>State Motto</strong>: "United
We Stand, Divided We Fall," adopted 1942</p>
<p class="content"><strong>Official Latin Motto</strong>: "<em>Deo
gratiam habeamus"</em> ("Let us be grateful to God"),
adopted 2002 (KRS 2.105)</p></td>
</tr>
<tr valign="middle">
<td>
<div style="text-align: center;">
<div style="background-image: url(../images/kysymbols/04flag.jpg); width: 122px; height: 83px; background-repeat: no-repeat;"></div>
</div>
</td>
<td>
<p class="content"><strong>State Flag</strong>, adopted 1962
(<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lrc.state.ky.us/krs/002-00/030.PDF">KRS
2.030</a>)<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"kyflag.htm">more about the
state flag...</a></p>
<p class="content"><strong>Pledge of Allegiance to State Flag</strong>:
"I pledge allegiance to the Kentucky flag, and to the Sovereign
State for which it stands, one Commonwealth, blessed with diversity, natural wealth, beauty, and grace from on High." Adopted 2000.
(<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lrc.state.ky.us/krs/002-00/035.PDF">KRS
2.035</a>)</p>
</td>
</tr>
</table>
(Some of the coding is stinky right now, but it does pass validation.)
Thanks,
KDLATry adding text-align: center; and margin: auto; to your background image
<div style="background-image: url(../Images/KYSymbols/04english.jpg); width: 116px; height: 75px;
background-repeat: no-repeat; text-align: center; margin: auto;">For horizontally centered images you can put them in the foreground like so.
<div style="text-align:center;..."><img src=http://www.webdeveloper.com/forum/archive/index.php/"..."></div>
For backgrounds try
<div style="background:url(...) 50% 50% no-repeat"></div>NICE!
Thanks, Ray!