Staredit Network

Staredit Network -> Computers and Technical -> [XHTML] 100% height and justification

Report, edit, etc...Posted by Pie_Sniper on 2006-08-03 at 23:38:06

Okay, I have to questions in XHTML:

1. Apparently, since there is no standard height (but there is a width), you cannot set "height: 100%" on a div in XHTML. Can I get around this?

2. When using "text-align: justify", it only justifies if it is an entire line or more. Is there any way I can force justification on text less than a line long?

And, by the way, I still haven't fixed my PHP cookies problem, either.

Report, edit, etc...Posted by slayer766 on 2006-08-03 at 23:57:27

For number one, couldn't you set up this in the CSS:

CODE

body {
margin:0;
padding:0;
height:100%;
}

Then in the <div> tags after that it should work right?

Report, edit, etc...Posted by Pie_Sniper on 2006-08-04 at 00:18:50

It's not working... Here's the body and the div styles:

CODE

body
{
background-repeat: repeat;
background-image: url( "Images/Back.png" );
padding: 0px;
margin: 0px;
height: 100%;
}
div.Main
{
background-color: #FFFFFF;
border-color: #000000;
border-style: solid;
border-width: 0px 1px 0px 1px;
margin-right: auto;
margin-left: auto;
min-height: 100%;
padding: 0px;
height: 100%;
width: 40%;
}

Report, edit, etc...Posted by slayer766 on 2006-08-04 at 00:31:19

How do you have your <div> tags set up man?

Report, edit, etc...Posted by Pie_Sniper on 2006-08-04 at 00:42:18

Do you want the whole thing? Here it is minus all the PHP/Javascript:

CODE

<?php header('Content-type: text/html; charset=utf-8'); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>HOUSEMOULD</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
<script type="text/javascript">
//Code here
</script>
</head>

<body>
<div class="Main"> 
<div class="PageTitlebar"><h1>HOUSEMOULD</h1></div>
<div class="Darkbar"></div>
<div class="Navbar"><ul class="Navbar">
<li class="Navitem"><a href="?Act=Index">Home</a></li>
<li class="Navitem"><a href="?Act=Downloads">Downloads</a></li>
<li class="Navitem"><a href="?Act=Projects">Projects</a></li>
<li class="Navitem"><a href="?Act=Programming">Programming</a></li>
<li class="Navitem"><a href="?Act=Links">Links</a></li>
</ul></div>
<?php
//Lots and lots of code here
?>
<div class="Foot"><a href="?Act=Login">Login</a>
<p class="Copyright"> <a class="Hidden" href="ManagerPassword.php">©</a>2006 Robin O'Connell</p></div>
</div> 
</body>

</html>

Report, edit, etc...Posted by LeMerovingian on 2006-08-04 at 16:42:14

You guys were close

Observe.

CODE

html,body {
margin:0px;
paddng:0px;
height:100%;
}
.Main {
height:100%;
}

That's the bare CSS that you need to resize the div. Obviously you need to add all the other data.

Report, edit, etc...Posted by Pie_Sniper on 2006-08-04 at 16:54:47

Okay, the height of the div.Main is 100% now, but div.Foot is still staying where the bottom of the div was before.

CODE

div.Foot
{
background-color: #F0F0F0;
vertical-align: bottom;
border: 0px;
}

:: Edit
Actually, now I have a new problem: div.Main stays at exactly 100% even if the contents extend below. I've also tried absoluted positioning with the footer but it also stays at the bottom. I'm willing to let it just be automatically sized if this is impossible, but I prefer it stretched from top to bottom.

Report, edit, etc...Posted by LeMerovingian on 2006-08-04 at 18:45:12

Okay...I think I know what you're trying to do. I made my own sample pages because I couldn't really see your site without the CSS. Either you want the nav to stay at the bottom of the content:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body {
margin:0px;
paddng:0px;
height:100%;
}
#frame {
height:100%;
position:relative;
margin:0px;
padding:0px;
}
#nav {
position:relative;
height:30px;
margin:0px;
padding:0px
}
#footer {
position:relative;
height:60px;
margin:0px;

}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
</head>

<body>
<div id="frame">
<div id="nav">Navigation Here</div>
<div id="content">
<p>Content Here</p>
</div>

<div id="footer">Footer Here</div>

</div>
</body>
</html>

Or you want the footer to stay at the bottom no matter what the page scroll is:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body {
margin:0px;
paddng:0px;
height:100%;
}

#nav {
position:relative;
height:30px;
margin:0px;
padding:0px
}
#footer {
position:fixed;
height:60px;
margin:0px;
bottom:0px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
</head>

<body>
<div id="nav">Navigation Here</div>
<div id="content">
<p>Content Here</p>
</div>

<div id="footer">Footer Here</div>
</body>
</html>

If you test these in a browser, it'll make sense. Just one warning: position:fixed doesn't work in the most recent version of Internet Explorer.

Next Page (1)