Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML Design Help

    Greetings,

    Here is the basic framework of a Web site I am putting together.


    Code:
    <table id="site_table">
    	<tr>
                      <td class="site_left"></td>
                      <td class="site_center">
    		<table id="main">
    		     <tr>
    		          <td colspan="2" class="header">
                                            //HEADER AREA
    		          </td>
    		     </tr>
    		     <tr>
    		          <td class="navigation">
    			 //NAVIGATION
                                       </td>
                                       <td class="main">
    		             //BODY
                                       </td>
                                    </tr>
    	             </table>
    	      </td>
                       <td class="site_right"> </td>
              </tr>
    </table>
    CSS:

    body {
    background:#E3E8EE;
    width:100%;
    height:100%;
    }

    #site_table {
    width:100%;
    height:100%;
    border-collapse:collapse;
    }

    #site_table .site_left {
    width:50%;
    }

    #site_table .site_center {
    width:760px;
    min-width:760px;
    max-width:760px;
    height:100%;
    background:#ffffff;
    vertical-align:top;
    padding:0px;
    border: 1px solid #4A5C6F;
    border-style: none solid none solid;
    }

    #site_table .site_right {
    width:50%;
    }

    #main {
    margin:0px;
    border:0px;
    padding:0px;

    }

    #main .header{
    background:#ffffff;
    vertical-align:top;
    }

    #header {
    width:100%;
    text-align:center;
    background: #0B447F;
    height:100%
    padding:0px;
    margin:0px;
    border:0px;
    }

    #main .navigation {
    width:180px;
    min-width:180px;
    background:#0B447F;
    padding:1px;
    border:0px;
    margin:0px;
    vertical-align:top;
    height:100%;
    }

    #main .main {
    padding:15px;
    vertical-align:top;
    height:100%;
    }

    You can actually take a look at the site at www.neable.org. The bottom part of the site is what is stumping me. I need the navigational section (the column to the left that houses the navigational tree, dark-blue background) to be at 100%. I cannot get it to do that. Does anyone know how i can make the navigational section be 100%? Height="100%" does not work and plus its doesn't validate.

    TIA

    -Ironchef
    Last edited by ironchef; 10-04-2004 at 05:38 PM.

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looking at it in IE6 and NS7.1 on a PC, the site looks fine! What "bottom part" are you talking about?
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #3
    New Coder
    Join Date
    Sep 2002
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    you are probably looking at it in 1024X768 res

    Yes - it looks fine in all browsers and if a user has there resolution set at 1024 x 768; however, a small percentage of users might be using 1152 x 864 or larger it does not expand all the way to the bottom. I need it to do that. Any ideas, anyone?

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you explain "expand all the way to the bottom"? You don't have enough content to push it down to the bottom. Are you looking to have a bunch of white space in the content area if the resolution is bigger? You want the content box to be the height of the screen, regardless of resolution?
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    By "it", I assumed he was referring to the entire layout. If that is the case, you could also center it vertically. Here is an example used by a very helpful member from another forum site:

    Code:
    <table....>
    <tr....>
    <td valign="middle">
    The content of your body
    </td>
    </tr>
    </table>
    Note that it only used one table cell. Here is his demo:
    http://garyblue.port5.com/webdev/vcenter.html

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hate to say it, but since the min-height value is squirrelly, you might have to do it the old way with the table:
    Code:
    <table height="100%"...
    If that's not working, then it's because you've effected the table with you CSS sizing.

    otherwise you set your CSS in that table to have a:
    Code:
    min-height: 100%;
    So at minimum it is 100% of the browser window, but that will not work for every browser, so you may be stuck with the table height value. Not the nicest thing, but neither is using tables for layout always

    Also, please put your code in code brackets like I did -- it helps keep the forums fresh scented and clean

    ...you'll notice it is the number sign # button in reply screen

    If you want a validated version, which I prefer as well, this article has an excellent work around:
    http://www.alistapart.com/articles/footers/
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    (off-topic): Gotta love smilies!


  •  

    Posting Permissions

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