Hey,
Als ik jou was zou ik niet meer met tables werken om je website te stylen, tables dienen namelijk voor tabulaire data, etc...
Om te stylen gebruik je div's, pre anno 2000 gebruikte ze wel tables om te stylen daar er geen div's bestonden.
Om te beginnen pas je enkele zaken aan in je html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="container">
<div class="lukas"><img src="images/lukas.png"></div>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="700" class="body">
<tr>
<td colspan="4" align="center" height="30" width="700"></td>
</tr>
<tr>
<td rowspan="5" width="25"></td>
<td align="center" height="400" width="650" colspan="2">
<img src="images/logo.png" align="center">
</td>
<td rowspan="5" width="25"></td>
</tr>
<tr>
<td align="center" height="45" colspan="2">
<iframe src="nav.html" height="45" width="650" margin="0" padding="0" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
<tr>
<td align="center" height="*" colspan="2">
<!-- Content -->
<!-- End content -->
</td>
</tr>
<tr>
<td height="50" colspan="2"></td>
</tr>
<tr>
<td height="50" width="325" align="center" class="foot">
<a href="http://www.mozilla.org/firefox?WT.mc_id=aff_en01&WT.mc_ev=click" target="_blank"><img src="http://www.mozilla.org/contribute/buttons/110x32arrow_b.png" alt="Firefox Download Button" border="0" class="a"/></a>
</td>
<td width="325" align="center" class="foot">
<a href="http://www.cyanfishwebdesign.co.cc" target="_blank"><img src="http://www.9lives.be/forum/images/cyanfish.png" class="a" alt="Cyan Fish Webdesign ©"/></a>
</td>
</tr>
</table>
</div>
</body>
</html>
Zoals je kan zien heb ik <div class="lukas"> uit je table gehaald en in een containing div (<div id="container">) geplaatst, ook je table wordt hierin gewrapped.
Vervolgens de CSS (vervang gewoon 'div.lukas' en 'div.lukas:hover' met onderstaande):
Code:
#container {
margin: 0 auto;
width: 700px;
position: relative;
}
div.lukas
{
position: absolute;
bottom: 0px;
right: -90px;
transition: right 0.25;
-moz-transition: right 0.25s;
-webkit-transition: right 0.25s;
-o-transition: right 0.25s;
}
div.lukas:hover
{
right: -275px;
}
En nogmaals, ik raad je af om tables te gebruiken bij het ontwerpen van een site.