...

View Full Version : tables min-height



mrdemin
05-11-2011, 01:13 AM
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.

Dr3am3rz
05-11-2011, 04:15 AM
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;

Dr3am3rz
05-11-2011, 06:46 AM
I have edited part of your codes, don't know whether is this what you wanted it to be.



<!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>




.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;
}

mrdemin
05-11-2011, 06:08 PM
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...

teedoff
05-11-2011, 06:32 PM
I would suggest instead of spending all this time and energy trying to get unrecommended practices(tables for layouts are bad (http://www.hotdesign.com/seybold/)) to work, you invest your time in working with a div/css based layout.

mrdemin
05-11-2011, 06:43 PM
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.

teedoff
05-11-2011, 07:18 PM
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.

Dr3am3rz
05-12-2011, 03:46 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum