...

View Full Version : Css or Html or whatever can get me 100% height?



westmatrix99
09-25-2007, 11:35 AM
Hi I am using a template:
The left hand side has a column called "categories"
I would like to get that to fit 100% of the page on the left.
How do I do this in css or html or whatever can do this?
I have been searching for days now to find a solution - that hopefully someone has a fix for, but nothing!!!
Attached is the css that is the problem?

html {
/*overflow:hidden;*/
}
body{
background-color: #ffffff;
font-family: tahoma, arial, sans-serif;
font-size: 10px;
text-align: center;
background-position: 0px 0px;
margin: 0 auto;
padding:0;
height:100%; /*this is what I need*/
border:none;
background-image: url(../images/background.gif);
overflow:auto;
}
#container {
margin: 0px auto;
width: 780px;
border-color: #000000;
border-width: 0px 1px 1px;
border-style: solid;
}
#categories{
margin-bottom: 1px;
padding: 1px 1px 1px 0px;
border-color: #000000;
border-width: 1px 1px 1px 0px;
border-style: solid;
height:100%!important; /* real browsers */
height:100%; /* IE6: for min-height*/
min-height:100%; /* real browsers */
position:relative;
}
.categories{
margin-bottom: 1px;
padding: 1px 1px 1px 0px;
border-color: #000000;
border-width: 1px 1px 1px 0px;
border-style: solid;
height:100%!important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
position:relative;
}
Cheers
West

effpeetee
09-25-2007, 11:54 AM
Not quite sure what you mean. Is this url any help

http://www.communitymx.com/content/article.cfm?cid=afc58

Frank

westmatrix99
09-25-2007, 11:58 AM
Thanks am reading it now.

Cheers
West

ess
09-25-2007, 01:00 PM
I am not sure that you can do this without either

1) using JavaScript...which can be difficult considering the amount of code to write in order to calculate elements heights, widths...etc...plus, users may disable JavaScript..and as such...not a good approach in my opinion.

or, 2) using tables...which is simple and straight forward.

I have created a sample that demonstrate how to use a table for this purpose. Please read notes written inside the code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en" />
<title>Sample Page</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
border:0;
}
#pageLayout {
height: 100%;
width: 100%;
padding:0;
margin:0;
border:0;
border-collapse:collapse; /* remove cellspacing etc */
background-color: #369;
color: #fff;
}
#header{
height: 80px; /* remove this..if your site doesn't contain headers*/
}
#left{
width: 200px;
background-color: #fff;
color: #222;
vertical-align:top; /* display text at the top of the cell.*/
}
#right{
vertical-align:top;
background-color: #2a2;
color: #222;
}
#footer{
height: 80px; /* remove this..if your site doesn't contain footer*/
}
</style>
</head>
<body>
<table id="pageLayout">
<tr> <!-- if you have a website header...otherwise remove the whole row -->
<td colspan="2" id="header">
<h1>Web site header</h1>
</td>
</tr>
<tr>
<td id="left">
<p>
place contents to be displayed on the left over here
</p>
</td>
<td id="right">
<p>
place contents to be displayed on the right over here
</p>
</td>
</tr>
<tr><!-- if you have a website footer...otherwise remove the whole row -->
<td colspan="2" id="footer">
<h1>Website footer</h1>
</td>
</tr>
</table>
</body>
</html>

If you have any problems with the above code, please don't hesitate to ask.

Cheers,
~E

westmatrix99
09-25-2007, 04:37 PM
Thanks for that one.
It is pretty simple and it works but...

I prefer to use tables myself as I can't fully understand how css is better than tables.

The template that I am using is a bit more complicate for some reason.

westmatrix99
09-25-2007, 04:48 PM
This my page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>&copy;</title>
<link href="css/style.css" rel="stylesheet" type="text/css" title="default"/>
</head>
<body>
<div id="container">
<?php include('topnav.php'); ?>
<?php include('menu.php'); ?>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="200" valign="top"><table border="0" align="left" cellpadding="0" cellspacing="2" class="categories">
<tr>
<td colspan="3" class="categories_header"><div align="center">Header</div></td>
</tr>
<tr>
<td colspan="3" nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
</tr>
<tr>
<td colspan="3" nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
</tr>
<tr>
<td colspan="3" nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
</tr>
<tr>
<td colspan="3" nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
</tr>
<tr>
<td colspan="3" nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
</tr>
<tr>
<td nowrap="nowrap"class="categories_header"><div align="center">Header</div></td>
</tr>
<tr>
<td nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
</tr>
<tr>
<td nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
</tr>
<tr>
<td nowrap="nowrap"><div class="categories_choices"><a href="#" class="categories_links">menu</a></div></td>
</tr>
<tr>
<td colspan="3" nowrap="nowrap">&nbsp;</td>
</tr>
</table></td>
<td valign="top"><table width="100%%" border="0" cellpadding="5" cellspacing="0" class="bhome">
<tr>
<td valign="top"><h1 align="left" id="header">header</h1></td>
</tr>
<tr>
<td valign="top"><p align="left">TEXT</p></td>
</tr>
</table></td>
<td width="200" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top"><div align="center"><img src="imagename" alt="" border="0" /></div>
<br />
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td width="200">&nbsp;</td>
<td>&nbsp;</td>
<td width="200">&nbsp;</td>
</tr>
</table>
</div>
<div>
<?php include('footer.php'); ?>
</div>
</map></body>
</html>

garydarling
09-25-2007, 05:55 PM
This might help.

http://bonrouge.com/3c-hf-fluid.php

Gary

westmatrix99
09-25-2007, 07:04 PM
Thanks am busy with that one too.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum