Well, I don't have a link to my page, but I got rid of all the images and such, and put in some borders to make it easier to understand, and took a screenshot.
http://67.18.37.18/1003/49/upload/p3407516.gif
And, of course, my
html code and
css.
- HTML: Select all
<html>
<head>
<link rel=stylesheet href="templateCSS.css" type="text/css">
<title>DURT Web Site Template</title>
</head>
<body bgcolor=#FFFFFF>
<table class=template>
<tr><td class=mainhead colspan=2>Main Head</td></tr>
<tc><td class=menuhead>Menu Head</td></tc>
<tc><td class=mainbody rowspan=4 height=102>
<table class=maincontent><tr><td>
Main Body
</td></tr></table></td></tc>
<tr><td class=menubody height=12>
<table class=menucontent><tr><td>
Menu Body
</td></tr></table></td></tr>
<tr><td class=menufoot>Menu Foot</td></tr>
<tr><td class=menublnk height=12>Menu Blank</td></tr>
<tr><td class=mainfoot colspan=2>Main Foot</td></tr>
</table>
</body>
</html>
- Code: Select all
<style type="text/css">
table.maincontent {width: 97%; background: none; border-style: none;
border-collapse: collapse; border-spacing: 0px;
padding: 0px; margin: 4px 0px 5px 10px}
table.menucontent {width: 68%; background: none; border-style: none;
border-collapse: collapse; border-spacing: 0px;
padding: 0px; margin: 3px 0px 5px 18px}
table.maincontent tr, table.menucontent tr,
table.maincontent td, table.menucontent td {padding: 0px;}
table.template {width=800; background: none;
border-style: solid; border-size: 2px; border-color: #FF0000; padding: 0px}
table.subtemplate {background: none;
border-style: solid; border-size: 2px; border-color: #FF0000; padding: 0px}
table.template tr, table.template tc {padding: 0px}
td.mainhead {background-image: url(headbar.gif); height: 95px; padding: 0px;
border-style: solid; border-size: 2px; border-color: #0000FF;}
td.mainbody {background-image: url(mainbg.gif); width: 630px; padding: 0px;
border-style: solid; border-size: 2px; border-color: #0000FF;}
td.mainfoot {background-image: url(footbar.gif); height: 93px; padding: 0px;
border-style: solid; border-size: 2px; border-color: #0000FF;}
td.menuhead {background-image: url(subheadbar.gif); width: 170px; height: 39px; padding: 0px;
border-style: solid; border-size: 2px; border-color: #0000FF;}
td.menubody {background-image: url(subbg.gif); width: 170px; padding: 0px;
border-style: solid; border-size: 2px; border-color: #0000FF;}
td.menufoot {background-image: url(subfootbar.gif); width: 170px; height: 39px; padding: 0px;
border-style: solid; border-size: 2px; border-color: #0000FF;}
td.menublnk {background-image: url(subblank.gif); width: 170px; height: 20px; padding: 0px;
border-style: solid; border-size: 2px; border-color: #0000FF;}
</style>
Again, I took the images out, but based on those images, the Menu Head and Menu Foot sections have to be 39 pixels high or the image repeats. The Main and Menu Body sections are where text goes, and I've figured out that Menu Body will only need to be 160 pixels high. The problem is that when Main Body is higher than 238 pixels (39 + 39 + 160), rather than stretch Menu Blank, the browser stretches the other three menu parts and puts Menu Blank at 1 pixel, even when I specifically define the height of the other three. Note that this is not the case in the screenshot I gave. Is there some way I could force the browser to stretch only Menu Blank, or is there some way I could calculate what height exactly it needs to be and
php it in?
Table sizing problem
Jan 5th, 2006, 21:13
Similar Threads
