Newbie having trouble with tables - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

TonyP · 05-15-2007, 07:00 PM

I would like to thank you in advance for your indulgence

I'm having a number of problems setting up a website.

My preference would be to use divs, but I'm trying to add a couple of pages to a phpBB site and am using their table formats.

I've got two problems.

The first problem is the structure of the page. I'd like to have a row going across the top for the header (with image and superimposed title of "Light Rail Transit for Ottawa", a navbar of fixed width below that and to the left, and a (liquid) table to the right of the navbar for content.

So far, the header and navbar are the same width, and push the content table over to the corner, which seems to be in a different column.

The second problem is that I'm having trouble shrinking the image in the header (tram_mhl52.gif), over which I want to superimpose the title.

Here is some of the code, with deleted parts in [...].

<style type="text/css">
[...]
/* This is the border line & background colour round the entire page */
.bodyline { background-color: #FFFFFF; border: 1px #99cc99 solid; }
[...]/* This is the outline round the main forum tables */
.forumline { background-color: #FFFFFF; border: 2px #8FBC8F solid; }
[...]
/* Tram background for header */
.header {
background: url(templates/subGreen/images/tram_mhl52.gif);
background-repeat: no-repeat;
background-size: 15px;
height: 300px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 35px;
font-style: italic;
font-color: black;
vertical-align: middle; }

</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table width="300" height="50" cellspacing="0" cellpadding="2" border="0" align="left">
<tr>
<td class="header" width=15%>Light Rail Transit &mdash for Ottawa
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>

<table width="40px" cellspacing="0" cellpadding="2" border="0" align="left" align="top">
<tr valign="top">
<td width=15%>
<ul>
<li><a href="index.php"><p>Forum/Home</p></a></li>
<li><a href="index_primer.php"><p>LRT Primer</p></a></li>
<li><a href="index_maps"><p>Maps</p></a></li>
</ul>
</td>
</tr>
</table>
</td>
<td>
<table width="40px" cellpadding="2" cellspacing="1" border="0" class="forumline" align="right">

<th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> Forum </th>
<tr>
<td>

<b><h>What is Light Rail Transit?</h></b>
[...]
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Thanks!

Krishnaswamy · 06-08-2007, 10:55 AM

I recreated your code. Of course I can only see what I have in the code. For starters I changed border="0" to border="1" everywhere to see your intention. Your header and navbar sizes appear to be different (IE6.0). As to the size of your image, why not use some imaging program to resample the image for a smaller size. You could try height and width attributes for your image to get an idea as to what size you need to reduce. With the graphic you can create an image superposing the text on the image.

Hope this is helpful,

Jay