Jump to content

Spanning the whole page...


V-Man

Recommended Posts

Alright, Maybe I'm going about this all wrong.  I need to get a table to take up the whole page regardless of wether there is content to fill it or not.  The code I have thus far is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
</style>
</head>

<body leftmargin='0' rightmargin='0' topmargin='0' bottommargin='0' marginheight='0' marginwidth='0'>
<table width="739" height="240" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="20" background="images/left_grad.jpg"> </td>
    <td width="699" background="images/header.jpg" valign="bottom">

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="76%" height="188"><div align="center" class="title">
          <p>Champlain Valley Outfitters </p>
          <p class="nav">Offering only the best <br />
            in traditional waterfowl hunts </p>
        </div></td>
        <td width="24%"> </td>
      </tr>
      <tr>
        <td height="26" colspan="2" class="nav"> <div align="center">:: Home :: Services :: Articles :: Recipes :: Guest Book :: Contact Us :: </div></td>
        </tr>
    </table></td>
    <td width="20" background="images/right_grad.jpg"> </td>
  </tr>
</table>

<table width="739" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="20" background="images/left_grad.jpg"> </td>
    <td width="699" background="images/bot_grad.jpg"> </td>
    <td width="20" background="images/right_grad.jpg"> </td>
  </tr>
</table>

<table width="739" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="20" background="images/left_grad.jpg"> </td>
    <td width="699" background="images/bot_grad.jpg"><div align="center" class="copyright">© 2008 Champlain Valley Outfitters <br />Site designed and maintained by Pat Litke in conjunction with MDM Solutions</div></td>
    <td width="20" background="images/right_grad.jpg"> </td>
  </tr>
</table>
</body>
</html>

 

I thought by setting the center table height to 100% would make it .. well, you know, 100% of the page height.  But no.  The closest example that I can find of what I need (though, NOT full page width, a fixed width of 739 w/ a column down each side thats 20px wide) is located:  here

 

Is this making sense?  On the example I linked above, see how the footer is at the bottom of the page no matter what?  Thats what I need to do.  ..

Link to comment
Share on other sites

Im not talking about width.  Height my boy, HEIGHT!  No matter how much or how little "content" is in the main part of the page, I need the footer/bottom to always be attatched to the bottom of the screen...

 

:)

Link to comment
Share on other sites

sorry - not got reading glasses on (think I amy have a bit of dyslexia!!!)

 

well first off - drop the tables divs are far superior for layout.... (whole debate which will ensue where people argue over relative merits - I stop that by saying tables for layout have no merits what so ever)

 

when you have done that - give all parent elements 100% height and position relative. then give the footer position: absolute; bottom: 0;

 

Link to comment
Share on other sites

Oh god, this could take a very long while to finish as i have never used div's other than for alignment...  shiit... well, ill see what i can get done.  Im more of a PHP person, not so much HTML, can you tell? :P

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.