SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Lock table size

  1. #1
    Accredited Master scotty2260's Avatar
    Join Date
    Apr 2004
    Location
    California
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lock table size

    Is there any way to lock a table's size? I am making the template for my site, and there is white space between two images (top and bottom).
    The white space (a cell) will expand and condense with the browser window, instead of staying the correct size.

    Here you can see what I mean: http://www.southhillsfootball.com/shfootball/new.php

    Here is the code I am using:
    PHP Code:
    <html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </
    head>

    <
    body bgcolor="#003300">
    <
    div align="center">
      <
    table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
        <
    tr>
          <
    td height="98" colspan="3"><div align="center"><img src="style/header.jpg" width="876" height="96"></div></td>
        </
    tr>
        <
    tr>
          <
    td width="60" height="437" align="center">&nbsp;</td>
          <
    td width="876" align="left" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
          <
    td width="52">&nbsp;</td>
        </
    tr>
        <
    tr>
          <
    td colspan="3"><div align="center"><img src="style/bottom.jpg" width="876" height="206"></div></td>
        </
    tr>
      </
    table>
    </
    div>
    </
    body>
    </
    html
    Scott

  2. #2
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simple. Don't use tables. They weren't meant for layout. Search here or for table-less layouts.
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  3. #3
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a CSS style for your table's size. It will keep it locked no matter what. You should be doing complete css for your layout but if it is on a deadline I wouldn't. Hope this helps!
    HTMLGuy

  4. #4
    SitePoint Zealot metho's Avatar
    Join Date
    Feb 2005
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Scotty, the transition to coding in full CSS layout takes time. No one should enforce an overnight transition on you. Take your time to get to know all the painful CSS idiosyncrasities that makes life hell for CSS newbies. There's an excellent css resource in the Sitepoint CSS forms which covers 100% height and width elements (http://www.sitepoint.com/forums/showthread.php?t=171943).

    In the meantime, here a solution with some css and html corrections which gets your template working in IE, FF and NN:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    #tblBody {
    	height: 100%;
    }
    #tdFtr {
    	height: 206px;
    }
    #tdHdr {
    	height: 98px;
    }
    -->
    </style>
    </head>
    <body bgcolor="#003300">
    <div align="center">
      <table width="100%" border="0" cellpadding="0" cellspacing="0" id="tblBody">
        <tr valign="bottom">
          <td id="tdHdr" colspan="3"><div align="center"><img src="style/header.jpg" width="876" height="96"></div></td>
        </tr>
        <tr>
          <td align="center">&nbsp;</td>
          <td width="876" align="left" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
          <td >&nbsp;</td>
        </tr>
        <tr>
          <td colspan="3" id="tdFtr"><div align="center"><img src="style/bottom.jpg" width="876" height="206"></div></td>
        </tr>
      </table>
    </div>
    </body>
    </html>

  5. #5
    Accredited Master scotty2260's Avatar
    Join Date
    Apr 2004
    Location
    California
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I used the code givin, but the box still move with the browser.

    Here is the link again: http://www.southhillsfootball.com/shfootball/new.php
    Scott

  6. #6
    Accredited Master scotty2260's Avatar
    Join Date
    Apr 2004
    Location
    California
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my current code (php tags are the only code blocks that display for me)
    PHP Code:
    <html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    style type="text/css">
    <!--
    #tblBody {
        
    height100%;
    }
    #tdFtr {
        
    height206px;
    }
    #tdHdr {
        
    height98px;
    }
    -->
    </
    style>
    </
    head>

    <
    body bgcolor="#003300">
    <
    div align="center">
      <
    table width="100%" border="0" cellpadding="0" cellspacing="0" id="tblBody">
        <
    tr valign="bottom">
          <
    td id="tdHdr" colspan="3"><div align="center"><img src=style/header.jpg width=876 height=96></div>
          </
    td>
        </
    tr>
        <
    tr>
          <
    td width="58">&nbsp;</td>
          <
    td width="853"bgcolor="#FFFFFF"></td>
          <
    td width="58">&nbsp;</td>
        </
    tr>
        <
    tr>
          <
    td colspan="3" id="tdFtr"><div align="center"><img src=style/bottom.jpg width=876 height=206></div>
          </
    td>
        </
    tr>
      </
    table>
    </
    div>
    </
    body>
    </
    html
    Scott

  7. #7
    SitePoint Zealot metho's Avatar
    Join Date
    Feb 2005
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The given code will work better. Usually when you lock a content cell to a certain height, the table breaks when a user bumps up the font size or a user with large default font sizes loads the page.

  8. #8
    Accredited Master scotty2260's Avatar
    Join Date
    Apr 2004
    Location
    California
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a simple CSS code to get this working?
    All I need is for the space in between the two images to be able to stretch (up and down) to fit content. Whether by table or CSS.

    Again, I can't see the code you gave??? I cn only see things in the PHP blocks.
    Scott

  9. #9
    Accredited Master scotty2260's Avatar
    Join Date
    Apr 2004
    Location
    California
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I used the tables and put clear images to make sure they are sized correctly. All is fine now, thanks for your input and help!
    Scott


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
  •