|
|
Posted by Kim Andrι Akerψ on 02/14/07 12:47
Jim S wrote:
> On all the pages of www.priorysingers.org.uk the 'buttons' on the
> left is 7 1x1 tables inside the cells of a 7x1 (Or is it 1x7) table
> inside the table which makes up the main page.
> There must be an easier/slicker/more acceptable way of doing this
> using css, but my way is the only way I know to keep everything
> exactly in the right place in all browsers.
> Can anyone help or point me to understandable rehab.
Sure thing. In your stylesheet, do something like this:
div.navbutton {
width: 100px; height: 40px; background: #dcdcdc;
border: 3px ridge silver; font-size: 85%; font-weight: bold;
font-family: Arial, sans-serif;
}
div.navbutton a:link,hover,visited,active { text-decoration: none; }
And in your HTML code:
<div class="navbutton"><a href="index.html">Home</a></div>
Which replaces the following from your source code:
<tr>
<td align="center">
<table style="border-collapse: collapse;" id="AutoNumber2"
bgcolor="#dcdcdc" border="3" cellpadding="2" cellspacing="0">
<tr>
<td height="40" width="100">
<p align="center"><b><font face="Arial" size="2">
<a href="http://www.priorysingers.org.uk/index.html"
style="text-decoration: none;">Home</a></font></b></p>
</td>
</tr>
</table>
</td>
</tr>
When it comes to vertically centering the text, look at this:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
--
Kim AndrΓ© AkerΓΈ
- kimandre@NOSPAMbetadome.com
(remove NOSPAM to contact me directly)
[Back to original message]
|