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 8 of 8
  1. #1
    New Coder
    Join Date
    May 2011
    Location
    NYC
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    tables min-height

    Hey guys, I'm pretty new to html but I've been fighting with tables for 2 days now.
    I made a table, which houses the rest of the page content, including other tables... sort of like a border for the whole page.
    What I needed to do, was set a min-height for the, lets call it "main" table, so that my footer table isnt up by my header table, but at least a page away, even on a page with no content in between.

    I've tried setting a min-height using css for the "main" table, but it just cuts my page in half. I guess I'll include my amateurish script, note I'm not all that into html, but need something basic to work with for now.

    http://pastebin.com/K8inS7tK - html
    http://pastebin.com/DE7ZwyKb -css

    What I'm after is this, the header table should be on top of the page, footer should be on bottom of the page, and the body anywhere in the middle. What happened when I added the min-height is that instead of everything being together up top, is now together in the middle!

    I'm already getting fed up with tables! I really don't want to resort to dreamweaver for something this simple.

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Hmm.. I'm not a very experienced coder but from what I see you could set your position of your header to the top in your css.

    position:fixed;
    top:10px;

  • Users who have thanked Dr3am3rz for this post:

    mrdemin (05-11-2011)

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    I have edited part of your codes, don't know whether is this what you wanted it to be.

    Code:
    <!DOCTYPE HTML>
    
    <HTML>
    
    <head>
    
    <meta name="description" content="">
    <meta name="keywords" content="">
    
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    
    <title>mySite</title>
    
    </head>
    
    <body>
    
    <table class="center_page">
    <tr>
    <td id="header">
    
    <table align="center">
    
    <tr>
    <td id="banner">mySite</td>
    </tr>
    
    <tr>	
    	<td>
    	<ul id="nav">
    
    	<li><a href="#" >Home</a></li>
    	<li><a href="#" >Articles</a></li>
    	<li><a href="#" >Profile</a></li>
    	<li><a href="#" >Register</a></li>
    	<li><a href="#" >Find</a></li>
    	<li><a href="#" >About</a></li>
    	
    	</td>
    </tr>
    
    
    <!-- end header table -->
    
    </table>
    
    
    </td>
    </tr>
    
    <hr>
    	
    
    <tr>
    <td>
    
    <div class="body">
    
    <form name="log in" action="" method="post">
    <fieldset>
    <legend>Log In </legend>
    
    	Username: <input type="text" size="30" name="username" 
    
    placeholder="Enter username"><br>
    	Password: <input type="password" name="password">
    
    	<input type="submit" value="Log In">
    </fieldset>
    
    </form>
    
    </div>
    
    </td>
    </tr>
    
    
    <tr>
    <td id="footer">
    <table>
    <tr>
    <td>Copyright © 2011 mySite</td>
    </tr>
    </table>
    
    
    <!--end center_page -->
     
    
    </td>
    </tr>
    </table>
    
    </body>
    
    </html>
    Code:
    .center_page
    {
    border:1px solid black;
    width:960px;
    margin-left:auto;
    margin-right:auto;
    min-height:600px;
    height:600px;
    }
    
    
    #header
    {
    border:1px solid black;
    height:80px;
    width:950px;
    margin-left:auto;
    margin-right:auto;
    vertical-align:top;
    }
    
    
    #footer
    {
    vertical-align:bottom;
    }
    
    #banner
    {
    font-size:40px;
    text-align:center;
    }
    
    #nav
    {
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:center;
    }
    
    #nav li
    {
    display:inline;
    }
    
    
    fieldset
    {
    width:400px;
    }

  • #4
    New Coder
    Join Date
    May 2011
    Location
    NYC
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks... The vertical align doesn't work for me, and the min height doesnt work in firefox...
    Setting a fixed position worked but its irrelevant to where the outer table is, it will always place the fixed table *px from the top! I want it to be in relation to the outer table...

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I would suggest instead of spending all this time and energy trying to get unrecommended practices(tables for layouts are bad) to work, you invest your time in working with a div/css based layout.
    Teed

  • Users who have thanked teedoff for this post:

    mrdemin (05-11-2011)

  • #6
    New Coder
    Join Date
    May 2011
    Location
    NYC
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    They still use a table in that article :P

    Anyway, I'm not actually designing the site, I just need something to work with for now, figured if I'm coding everything else might as well do this, didnt expect to get stuck so soon.

    So it's not possible to do what I am trying, or you just don't want me to proceed with tables?


    Actually, I just looked into it, and after 2 minutes I'm convinced.... thanks.
    Last edited by mrdemin; 05-11-2011 at 07:47 PM.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by mrdemin View Post
    They still use a table in that article :P

    Anyway, I'm not actually designing the site, I just need something to work with for now, figured if I'm coding everything else might as well do this, didnt expect to get stuck so soon.

    So it's not possible to do what I am trying, or you just don't want me to proceed with tables?


    Actually, I just looked into it, and after 2 minutes I'm convinced.... thanks.
    Well there are MANY tutorials and articles and code on the internet that is outdated and even sometimes just plain wrong.

    And no I wasn;t trying to suggest your way wouldn't work, nor would I refuse to help someone who isnt trying and learning own their own. I was just pointing out that instead of wasting valuable time learning a coding practice that is not the BEST solution, it would be more advantqageous to learn proper semantic coding techniques.

    But I'm glad you looked at the link I posted. If you're still having trouble with your current code, feel free to let us know.
    Teed

  • #8
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Teed: After reading that link, so it will ended up using tables just to display data in the div layout? But it is possible to display data by using div right? =x


  •  

    Posting Permissions

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