Forum Moderators: travelin cat
Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
<!--
.buttontext {color: #ffffcc;
text-decoration: none;
font: bold 12pt verdana;
font-style: oblique;
cursor: hand;}
.buttonover {color: #003300;
text-decoration: underline;
font: bold 12pt Verdana;
cursor: hand;} #logoutbutton {border-style: inset;
border-color: #003300;
background-color: #336633;
width: 150px;
text-align: center;}
#menubutton {border-style: inset;
border-color: #003300;
background-color: #336633;
width: 150px;
text-align: center;}
-->
</style>
<basefont color="#003300">
</head>
<body bgcolor="#003300">
<br><br>
<div align="center">
<table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr bgcolor="#ffffcc">
<td colspan="5" height="75" valign="middle">
<h1>Kelly Contacts</h1>
</td>
</tr>
</table>
</div>
<div align="center">
<table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr bgcolor="#ffffcc">
<td height="75" valign="middle"></td>
<td colspan="4" align="center">
<a href="index.php" class="buttontext"
onmouseover="this.className='buttonover';logoutbutton.style.background='#ccff66'"
onmouseout="this.className='buttontext';logoutbutton.style.background='#336633'">
<div id="logoutbutton">
Log Out
</div></a>
</td>
<td colspan="4" align="center">
<a href="menu.php" class="buttontext"
onmouseover="this.className='buttonover';menubutton.style.background='#ccff66'"
onmouseout="this.className='buttontext';menubutton.style.background='#336633'">
<div id="menubutton">
Menu
</div></a>
</td>
<td><br><br></td>
</tr>
</table>
</div>
</body>
</html>
You start by defining a base button:
a.button { }
then you do:
a.button:hover {} , a.button:link {}
etc just like for a normal link, recording the changes in relation to the basic button.
And do get rid of those tables and convert to <div>
You've also got a problem with having <a><div></div></a>
This means you are putting a block-level tag inside an inline tag, which normally isn't a good idea at all. If you need your <a>s to act like block-level tags, set 'display: block;', and to get them on the same line put them in a <div> and furthermore set 'float: left;'
Actually, from the code you have published here, you ought to be able to get rid of the table all together.
For a simple example of what's possible using styled <a>-tags take a look here: [dturunners.mathiesen.info...] . You are welcome to copy and paste as much as you like from there :-)
When you get more advanced, you can even set different background images depending on the button state.
THANKS!
The link I posted is to a site that works pretty much along the lines such as you have described your project:
-- Apache for the server
-- PHP for serverside scripting
-- MySQL for the database
and everything running under Mac OS X 10.2.6 of course
So, having XHTML, CSS, tables generated from databases, etc. etc. is no problem - just a lot of work and a steep learning curve :-)
I can point you to some *really* good books on the subjects if you are interested.
And I'll also recommend some other software soulitions than the ones that come bundled with Mac OS X.
I currently am using a pair of O'Reilly books; Programming PhP and Webdatabase Applications to help with mySQL and PHP and my references for html and javascript are Goodman's Dynamic HTML and Javascript Bible. Beyond that I mainly use plenty of searches and an occasional post.... What is missing is probably a good css reference.
My site: Of course, what you can't see is the server-side php-programming. Please feel free to ask if there's any particular point on the site you'd like an explanation on how was achieved.
I'll also recommend switching to Apache 2.0.47, PHP and MySQL from [serverlogistics.com...] if you don't already use them :-)
