menu problem

[xxx]

Here is part of my code:

<div align="center">
<table width="80%" border="1">
<tr>
<td colspan="4">
<div align="center"><img src="hovedlogo.bmp"></div>
</td>
</tr>
<tr>
<td>
<div align="center"><a href="main.html">Main</a></div>
</td>
<td>
<div align="center"><a href="member.html">Members</a></div>
</td>
<td>
<div align="center"><a href="work.html">Work</a></div>
</td>
<td>
<div align="center"><a href="login.asp">Login</a> </div>
</td>
</tr>
<tr>
<td colspan="4">
<p align="center"> This is the main area!!!</p>
</td>
</tr>
<tr>
<td colspan="4">
<div align="center">Last updated 1 September 2003</div>
</td>
</tr>
</table>
</div>
What I'd like to happen is that when the user i.e. clicks on the main link
that the main.html is shown inside the table, where I at the moment have
"This is the main area" text, and when the user clicks on login the
login.asp file is shown there and so on. How is this possible ?

 

[Kris]

[tables for layout code snipped]

What I'd like to happen is that when the user i.e. clicks on the main link
that the main.html is shown inside the table, where I at the moment have
"This is the main area" text, and when the user clicks on login the
login.asp file is shown there and so on. How is this possible ?

By serving each page as a new document and repeating the menu on every
page.

Reduce the code by doing it right and I see little objection repeating
it:

<div id="content">
<!-- content in each page goes here -->
</div>

<div id="nav">
<ul>
<li><a href="main.html">Main</a></li>
<li><a href="member.html">Members</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="login.asp">Login</a></li>
</ul>
</div>

And its CSS as a preferrably external file:

body {
text-align: center;
}

#content {
text-align: left;
width: 80%;
margin: 220px auto 20px;
padding-top: 1.4em;
}

#nav {
position: absolute;
top: 0;
width: 100%;
text-align; center;
color: #000;
background: url("path/to/picture") transparent no-repeat;
}

#nav ul {
width: 80%;
padding: 0;
margin: 200px 0 0;
}

#nav li {
list-style: none;
float: left;
width: 20%;
margin: 0;
padding: 0;
}

And don't use .BMP for images on the Web. Use .JPG, .GIF or .PNG instead.