SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Table Heights

  1. #1
    SitePoint Addict avstu's Avatar
    Join Date
    May 2005
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table Heights

    Just wondering if somebody could help me. Ive just designed a new layout and everything looks great except theres one thing i need to do. I want to make my layout so it fills the whole screen heightwise if you get me.

    At the moment it fits flush at the top of the page but doesnt reach all the way down to the bottom of the page unless i have lots of content in the table.

    Heres my coding (thanks in advcance)


    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Welcome to DESIGNLAD.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
    <!--
    body {
    background-image: url(images/bk.gif);
    }
    -->
    </style></head>
    <body>
    <table width="750" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td height="175" colspan="3" valign="top"><table id="Table_01" width="750" height="175" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td rowspan="4"> <img src="images/01.gif" width="24" height="175" alt=""></td>
    <td rowspan="4"> <img src="images/02.gif" width="168" height="175" alt=""></td>
    <td colspan="3"> <img src="images/03.gif" width="532" height="51" alt=""></td>
    <td rowspan="4"> <img src="images/05.gif" width="26" height="175" alt=""></td>
    </tr>
    <tr>
    <td> <img src="images/07.gif" width="156" height="57" alt=""></td>
    <td> <img src="images/08.gif" width="215" height="57" alt=""></td>
    <td> <img src="images/09.gif" width="161" height="57" alt=""></td>
    </tr>
    <tr>
    <td colspan="3"> <img src="images/10.gif" width="532" height="17" alt=""></td>
    </tr>
    <tr>
    <td colspan="3"> <table width="532" height="50" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="middle" bgcolor="#F2F2F2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="20"><div align="left"><img src="images/home.gif" width="15" height="14"></div></td>
    <td width="50"><div align="left">Home</div></td>
    <td width="20"><div align="left"><img src="images/about.gif" width="11" height="14"></div></td>
    <td width="50"><div align="left">About</div></td>
    <td width="20"><div align="left"><img src="images/tutorial.gif" width="15" height="14"></div></td>
    <td width="60"><div align="left">Tutorials</div></td>
    <td width="20"><div align="left"><img src="images/download.gif" width="15" height="14"></div></td>
    <td width="67"><div align="left">Downloads</div></td>
    <td width="20"><div align="left"><img src="images/shop.gif" width="15" height="14"></div></td>
    <td width="72"><div align="left">Online Store </div></td>
    <td width="20"><div align="left"><img src="images/link.gif" width="14" height="13"></div></td>
    <td width="50"><div align="left">Links</div></td>
    <td width="20"><div align="left"><img src="images/contact.gif" width="15" height="15"></div></td>
    <td width="50"><div align="left">Contact</div></td>
    </tr>
    </table> </td>
    </tr>
    </table></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td width="22" height="203" background="images/04.gif">&nbsp;</td>
    <td width="706" bgcolor="#F2F2F2"><p>Content here</p> </td>
    <td width="22" height="203" background="images/06.gif">&nbsp;</td>
    </tr>
    <tr>
    <td height="100%" background="images/04.gif">&nbsp;</td>
    <td height="100%" bgcolor="#F2F2F2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><div align="center">
    <? 
    $lbt = microtime (); // start 
    $lba = explode ( " " , $lbt); 
    $lbt = $lba[ 0 ] + $lba[ 1 ]; 
    $let = microtime (); // end 
    $lea = explode ( " " , $let); 
    $let = $lea[ 0 ] + $lea[ 1 ]; 
    $total = $let - $lbt; //little bit of maths
    
    echo "Page Generated in " .round ($total, 5 ) . "seconds" ; // add more place values by changing the 5 
    ?>
    <br>
    &copy; 2006 Designlad.com and all its content. All rights reserved.<br>
    <br>
    </div></td>
    </tr>
    </table></td>
    <td height="100%" background="images/06.gif">&nbsp;</td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    Last edited by stymiee; Sep 9, 2006 at 10:39.

  2. #2
    SitePoint Zealot bobber205's Avatar
    Join Date
    Sep 2006
    Location
    Oregon
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couple of pointers. Please wrap your code in the appropraite tags, like [HTML]. It makes it much easier to read.

    Other than that, I don't quite understand why what's appearing isn't aqueqate. If you could post a link, that would be awesome!

  3. #3
    SitePoint Addict avstu's Avatar
    Join Date
    May 2005
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok then (apologise)

    http://www.designlad.com/new/?designlad=links

    see how the layout doesnt go to the bottom of the page? i want it to go to the bottom no matter how much content is in the tables.

  4. #4
    SitePoint Zealot bobber205's Avatar
    Join Date
    Sep 2006
    Location
    Oregon
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could set the table to have a height property and fill in content, while hoping it doesn't go too far. Depends on your page design if this is viable or not.

  5. #5
    SitePoint Addict dbr's Avatar
    Join Date
    Aug 2006
    Location
    Tucked away in the mountains...
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Table Height Woes

    For years and years, like many web designers, I've been making use of the height attribute within a table to get the layouts that I want, often I've used a system whereby the navigation will be a coloured vertical strip; an easy way to acheive this and maintain backward compatibilty with old borwsers was to use height=100% in a table like so:

    <table height="100%">
    <tr><td valign="top" bgcolor="#cccccc">Navigation</td>
    <td valign="top">Content</td></tr>
    </table>

    Unfortantly, the HTML standard published by the World Wide Web Consortium (W3C) and now adopted by most browsers is that there isn't a height attribute for tables. The thinking seems to be, that tables should be used for presenting tabular information and not for layouts. Fair enough, but what can the real world use to get the layouts our clients want?

    Hope that helps,

    Dave
    "Three components make an entrepreneur:
    the person, the idea, and the resources to make it happen."
    Anita Roddick ~British entrepreneur
    dbr founder of: ProximityCast.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •