SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 Equalising Column Layout with Tables

    Hi There,

    Before you start - Yes I know, I know!!! I should use CSS to create this technique. However, let me just explain...

    There is a site already in existence which I have been asked to create a new area / sub domain for. This must look exactly the same and I have been asked to use the same code in as many places as possible to retain consistency. However, the site has been made with only the slightest use of CSS - meaning that there are dozens of empty table cells and hundreds of spacer images.

    Although I am yet to move across to full layout design using CSS, I do use css for all formatting (So I'm halfway there!!! ). I have basically recreated the site - still using tables, but have moved all the formatting over to an external stylesheet (so at least all those redundant empty cells and spacers have gone).

    Right - now I've given you the background info, here's where the problem lies.

    They have created a three column equalising layout which has been acheived (as far as I can tell) by removing the doctype declaration. Now, this leads me to question the problems that may arise from this (I understand that browsers will read it in quirks mode - but that's about it). What actual problems will this create?

    Another question is (sorry for this) is it possible to have a 3 column equalising layout using tables and having a valid doctype? I've added the <!doctype HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> version which works - but again I think this will simply make the browser read the page in quirks mode?

    I'm employing styles to acheive this (Body height=100%, Table height=100%, the 3 columns height=100%, etc), so is there a way this can be done?

    P.s - Just to let you know that there is no footer. It's just the 3 columns that scroll down and need to end at the bottom of whichever column is the tallest. When using a valid doctype, I have managed to get the columns to be 100% high - but this creates an amount of space at the bottom of all the content .

    Any help would be greatly appreciated.

    Chris

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tables are valid

    The table and related elements are part of every recent (X)HTML recommendation, so any doctype will do as long as you avoid invalid attributes and the likes; there should be little trouble to get it to validate as XHTML 1.0 transitional, or even strict, but HTML 4.01 is already preferable by far over 3.2 .

    It is just that the use of tables for layout purposes is discouraged for all the known reasons, but in your case I think moving in the right direction as far as you did already is a major improvement.

    If your three columns are part of the same table and are three table cells in one row, you shouldn't need specifying any height; they should all be equally tall as the tallest cell.

    If you can manage to get the page / template online somewhere, people can take a look at it and maybe offer some more tips and tricks to improve things.
    Regards,
    Ronald.

  3. #3
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.

    Quote Originally Posted by ronaldb66
    If your three columns are part of the same table and are three table cells in one row, you shouldn't need specifying any height; they should all be equally tall as the tallest cell.
    The three columns are actually made up of three separate tables (one for each column), but this is just about the same thing. I agree that in using this technique it is easy to make all columns the same height. However, the main problem is in making them 100% height of the browser.

    e.g. If the page was 600 pixels tall - the columns wouldn't reach the bottom of the screen on a 1024x768 resolution or higher. Does that make sense? You could counter this by always making the page tall enough - but then of course at smaller resolutions you will have scroll bars.

    I think CSS is the only way to acheive this - but is there a way I could do this whilst still using table layout?

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Leave the height

    I personally have something against forcing the height to be anything other than needed to fit the content; this probably is a requirement from the client, right?

    Although horizontal scroll bar appearance is generally regarded as undesired, the vertical scrollbar is a perfectly accepted user interface tool. If a page has so little content that it doesn't fill the screen height, I much rather see it nicely enclosed in well-balanced design than filled out by yards of empty space. If it is taller than the available window height, well, I'll just scroll if I want to see the rest.

    The available window size is unpredictable to such an extent that I - again, personally - wouldn't invest too much effort in getting it to fit the window as far as height is concerned.

    By the way: if you don't use the nifty, inheritant property of table cells in the same row to be of equal height but are using three seperate tables, somehow positioned next to eachother, I really see no use in using tables anyway (unless they hold tabular data... ).
    Still, a look at the code would make giving directed comments a lot easier and much more valuable.
    Regards,
    Ronald.

  5. #5
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ronald for trying to help. I'll post the entire code to see if this helps

    You'll notice that it works with the old doctype - but then put an up-to-date one in and it simply doesn't work.

    This is also the first time I have used seperate tables for columns. I would usually just use one table with the cells used as columns - but this was giving me some strange results when resizing the window (header stretching vertically / navigation cells stretching). I think this was something to do with rowspan, so using separate tables cured it.

    Anyway - here's the code

    Code:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Creations</title>
    <style type="text/css">
    <!--
    body {
    	margin: 0px;
    	background-color: #FFFFFF;
    	height: 100%;
    }
    
    A.blackheader:visited
    {
        TEXT-DECORATION: none;
    	color: #ffffff;
    }
    A.blackheader:active
    {
        TEXT-DECORATION: none;
    	color: #ffffff;
    }
    A.blackheader:link
    {
        TEXT-DECORATION: none;
    	color: #ffffff;
    }
    A.blackheader:hover
    {
    	TEXT-DECORATION: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #de002a;
    	font-weight: bold;
    }
    
    A.rednav:visited
    {
        TEXT-DECORATION: none;
    	color: #ffffff;
    }
    A.rednav:active
    {
        TEXT-DECORATION: none;
    	color: #ffffff;
    }
    A.rednav:link
    {
        TEXT-DECORATION: none;
    	color: #ffffff;
    }
    
    A.rednav:hover
    {
    	TEXT-DECORATION: underline;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #ffffff;
    	font-weight: bold;
    }
    
    .siteheader {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 32px;
    	color: #000000;
    	text-align: center;
    	vertical-align: middle;
    }
    .topnavigationbar {
    	background-color: #de002a;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    	padding-top: 2px;
    	padding-left: 8px;
    	font-weight: bold;
    }
    .blacknavigationbar {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	background-color: #000000;
    	color: #FFFFFF;
    	border-bottom-width: thin;
    	border-bottom-style: solid;
    	border-bottom-color: #FFFFFF;
    	vertical-align: middle;
    	text-indent: 158px;
    }
    .leftnav {
    	background-color: #de002a;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #FFFFFF;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #FFFFFF;
    	font-weight: bold;
    	text-indent: 8px;
    	vertical-align: middle;
    }
    .rightnav {
    	background-color: #b0b2f5;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	padding: 4px;
    }
    .content {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    	padding: 8px;
    	text-align: justify;
    }
    .leftnavBottom {
    	background-color: #de002a;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #FFFFFF;
    	padding-left: 8px;
    }
    .rightheader {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFFFFF;
    	background-color: #000000;
    	padding-left: 8px;
    	border-top-width: 2px;
    	border-bottom-width: 2px;
    	border-top-style: solid;
    	border-bottom-style: solid;
    	border-top-color: #FFFFFF;
    	border-bottom-color: #FFFFFF;
    	font-weight: bold;
    	vertical-align: middle;
    }
    .rightnavbottom {
    	background-color: #b0b2f5;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	padding: 1px;
    }
    .rightheadertop {
    
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFFFFF;
    	background-color: #000000;
    	padding-left: 8px;
    	border-bottom-width: 2px;
    	border-bottom-style: solid;
    	border-bottom-color: #FFFFFF;
    	font-weight: bold;
    	vertical-align: middle;
    }
    .bodyheader {
    	background-color: #c8c9ef;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 20px;
    	color: #FFFFFF;
    	vertical-align: middle;
    	padding-left: 8px;
    	font-weight: bold;
    	border-top: 4px solid #FFFFFF;
    	border-right: 6px solid #FFFFFF;
    	border-bottom: 4px solid #FFFFFF;
    	border-left: 6px solid #FFFFFF;
    }
    .RedFooter {
    	background-image: url(RedBG.gif);
    	background-repeat: repeat-y;
    }
    table {
    	height: 100%;
    }
    .leftnavfooter {
    	background-color: #de002a;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #FFFFFF;
    	height: 100%;
    }
    .rightnavfooter {
    	background-color: #b0b2f5;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	padding: 1px;
    	height: 100%;
    }
    html {
    	height: 100%;
    }
    .siteheaderright {
    	text-align: center;
    	vertical-align: middle;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #999999;
    }
    .siteheaderleft {
    	vertical-align: middle;
    	border-left-width: 1px;
    	border-left-style: solid;
    	border-left-color: #999999;
    	padding-left: 8px;
    }
    .style4 {color: #DE002A}
    .contentfooter {
    
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    	text-align: justify;
    	height: 100%;
    }
    -->
    </style>
    </head>
    
    <body>
    
    
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="100" colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="150" height="63" valign="top" class="siteheaderleft">Logo</td>
              <td width="739" valign="top" class="siteheader">Title</td>
            <td width="151" valign="top" class="siteheaderright">&nbsp;</td>
            </tr>
            <tr class="topnavigationbar">
              <td height="19" colspan="3" valign="top">&nbsp;</td>
            </tr>
    		<tr>
              <td height="34" colspan="3" valign="top" class="blacknavigationbar"><div align="left">
    <a href="#" class="blackheader">FAQs</a> | <span class="style4">Information</span> | 
    <a href="#" class="blackheader">Training</a> | 
    <a href="#" class="blackheader">Support</a> | 
    <a href="#" class="blackheader">News</a> | 
    <a href="#" class="blackheader">Contact Us</a></div></td>
            </tr>
    		
        </table></td>
      </tr>
      <tr>
        <td width="150" height="100%" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="150" height="24" valign="top" class="leftnav"><p>&gt; <a href="#" class="rednav">Manual</a></p></td>
            </tr>
            <tr>
              <td height="24" valign="top" class="leftnav"><p>&gt; <a href="#" class="rednav">Release Notes</a></p></td>
            </tr>
    		<tr>
              <td height="24" valign="top" class="leftnav"><p>&gt; <a href="#" class="rednav">Patch Notes </a></p></td>
            </tr>
    		<tr>
              <td height="24" valign="top" class="leftnav"><p>&gt; <a href="#" class="rednav">Retailer Mapping Docs</a></p></td>
            </tr>
    		<tr>
              <td height="24" valign="top" class="leftnav"><p>&gt; <a href="#" class="rednav">Upgrade Instructions</a> </p></td>
            </tr>
    		<tr>
              <td height="24" valign="top" class="leftnav"><p>&gt; <a href="#" class="rednav">Lotus Admin Guide </a></p></td>
            </tr>
    		<tr>
              <td height="24" valign="top" class="leftnav"><p>&gt; <a href="#" class="rednav">ACL Guide</a></p></td>
            </tr>
            <tr>
              <td height="335" valign="top" class="leftnavfooter"><p>&nbsp;</p>
              <p><img src="spacer.gif" width="150" height="1"></p></td>
            </tr>
        </table></td>
        <td width="100%" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="100%" height="48" valign="top" class="bodyheader">Information</td>
            </tr>
            <tr>
              <td height="278" valign="top" class="content"><p><img src="Corporate-aboutus.jpg" width="250" height="187" hspace="8" align="right">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
     Phasellus in sapien. Vestibulum massa lectus, convallis at, mollis eget,
     faucibus ut, arcu. Curabitur ante metus, eleifend eu, gravida id, fringilla 
    quis, pede. Proin sit amet elit non orci viverra accumsan. In in mauris 
    nec lorem tristique eleifend. Maecenas malesuada ligula non metus. Duis 
    a lacus. Suspendisse at leo sit amet sem dignissim malesuada. Ut orci. 
    Fusce turpis. Phasellus sagittis imperdiet augue. Praesent purus mauris, 
    rhoncus eget, hendrerit id, porta vulputate, est. Vivamus eu nisl a sem 
    dapibus vestibulum. </p>            <p>Phasellus nunc. Duis nibh diam, 
    tempor vel, imperdiet vitae, consectetuer ac, est. Vestibulum orci. Proin
     ac odio a dui varius volutpat. Proin ac urna et neque volutpat tincidunt.
     Nunc elementum mi non sapien. Morbi in ligula aliquam sapien lacinia 
    vestibulum. Phasellus eget nibh eu nulla interdum accumsan. Curabitur 
    quis lorem feugiat risus egestas luctus. Mauris congue justo a arcu. </p>
              <p><img src="spacer.gif" width="400" height="50"></p></td>
            </tr>
            <tr>
              <td height="49" valign="top" class="contentfooter">&nbsp;</td>
            </tr>
        </table></td>
        <td width="150" height="100%" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="rightnav">
            <tr>
              <td width="150" height="24" valign="top" class="rightheadertop"><p>Latest News </p></td>
            </tr>
            <tr>
              <td height="30" valign="top" class="rightnav">News Item. <a href="#" class="rednav"><strong>More... </strong></a><br></td>
            </tr>
            <tr>
              <td height="24" valign="top" class="rightheader">Upcoming Events...</td>
            </tr>
            <tr>
              <td height="124" valign="top" class="rightnav"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus in sapien. </p>
              <p>Vestibulum massa lectus, convallis at, mollis eget, faucibus ut, arcu. Curabitur ante metus, eleifend eu, gravida id, fringilla quis, pede.<br>
                <br>
              </p></td>
            </tr>
            <tr>
              <td height="24" valign="top" class="rightheader">What Our Clients Say...</td>
            </tr>
            <tr>
              <td height="180" valign="top" class="rightnavbottom">&nbsp;</td>
            </tr>
            <tr>
              <td height="3" valign="top" class="rightnavfooter"><p><img src="spacer.gif" width="148" height="1"></p></td>
            </tr>
        </table></td>
      </tr><tr><td height="1"><img src="spacer.gif" alt="" width="150" height="1"></td><td></td><td><img src="spacer.gif" alt="" width="150" height="1"></td></tr>
    </table>
    </body>
    </html>
    Last edited by Willigogs; Jun 11, 2004 at 08:02.


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
  •