i hav an id with other classes inside it, and i want the id to fill teh page. however there is no actual text content in the id as it has the other classes inside it. iv tried putting a height attribute on it at 100% but it didnt do anything. heres the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Epic Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {background:#CC0000;color:white;font-family:OCR A Extended;font-size:11pt}
table {font-size:11pt}
#main {position:absolute;margin:0 0 0 0;width:100%;background:black;border:2px solid white;color:white;font-family:OCR A Extended;font-size:12pt}
.menu {position:absolute;left:40%;top:1%;font-size:13pt}
.logout {position:absolute;top:90%;left:2%}
a{color:red;font-family:OCR A Extended;font-size:12pt;text-decoration:none;font-size:9pt}
a:hover{color:red;text-decoration:underline;font-size:9pt}
</style>
</head>
<body>
<div id="main">
<div style="font-size:12pt"> Welcome, <?php echo $uname; ?></div>
<div class="menu">
<table style="font-size:15pt"><nobr>
<tr><td>|<a href=http://www.webdeveloper.com/forum/archive/index.php/"work.php">Work</a>|</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"infpage.php">Infantry Store</a>|</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"vehpage.php">Vehicle Store</a>|</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"shippage.php">Ship Store</a>|</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"war.php">Battle</a>|</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"profile.php">User Profile</a>|</td>
</tr></nobr>
</table>
</div>
<table style="position:absolute;left:10%;top:10%;border:solid 1px white">
<tr><td><b>Soldiers</b></td></tr>
<tr><td>Infantry: <?php echo $data['inf']; ?></td></tr>
<tr><td>FlameTroops: <?php echo $data['flam']; ?></td></tr>
<tr><td>Commandos: <?php echo $data['com']; ?></td></tr>
</table>
<table style="position:absolute;left:40%;top:10%;border:solid 1px white">
<tr><td><b>Vehicles</b></td></tr>
<tr><td>Jeeps: <?php echo $data['jeep']; ?></td></tr>
<tr><td>Tanks: <?php echo $data['tank']; ?></td></tr>
<tr><td>Transports: <?php echo $data['trans']; ?></td></tr>
</table>
<table style="position:absolute;left:70%;top:10%;border:solid 1px white">
<tr><td><b>Soldiers</b></td></tr>
<tr><td>Infantry: <?php echo $data['inf']; ?></td></tr>
<tr><td>FlameTroops: <?php echo $data['flam']; ?></td></tr>
<tr><td>Commandos: <?php echo $data['com']; ?></td></tr>
</table>
<table style="position:absolute;left:10%;top:35%;border:solid 1px white">
<tr><td><b>Ships</b></td></tr>
<tr><td>Airships: <?php echo $data['aship']; ?></td></tr>
<tr><td>Fighters: <?php echo $data['fight']; ?></td></tr>
<tr><td>Bombers: <?php echo $data['bomb']; ?></td></tr>
</table>
<table style="position:absolute;left:40%;top:35%;border:solid 1px white">
<tr><td><b>Work status</b></td></tr>
<tr><td>Workers: <?php echo $data['work']; ?></td></tr>
<tr><td>Food: <?php echo $data['food']; ?></td></tr>
<tr><td>Fuel: <?php echo $data['fuel']; ?></td></tr>
<tr><td>Cash: $<?php echo $data['cash']; ?></td></tr>
</table>
<table style="position:absolute;left:70%;top:35%;border:solid 1px white">
<tr><td><b>Battle Status</b></td></tr>
<tr><td>Battles won: <?php echo $data['bwon']; ?></td></tr>
<tr><td>Battles lost: <?php echo $data['blost']; ?></td></tr>
<tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/"table.php" style="background:white;font-size:12pt">View Rank</a></td></tr>
</table>
<div class="logout"><a href=http://www.webdeveloper.com/forum/archive/index.php/"logout.php" style="background:white;font-size:12pt">LogOut</a></div>
</div>
</body>
</html>
and heres where its uploaded: <!-- m --><a class="postlink" href="http://members.lycos.co.uk/home.php">http://members.lycos.co.uk/home.php</a><!-- m -->
login using the username "guest" and the password "password". thanksIn CSS, set the properties for the <body> tag as follows:
body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: scroll; /* this may not be needed */
}
The body's content area is only as tall as the content inside it. Setting it's height to 100% in CSS makes the browser size the body to be 100% of the height of the viewable area of the browser window.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Epic Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {background:#CC0000;color:white;font-family:OCR A Extended;font-size:11pt}
table {font-size:11pt}
#main {position:absolute;margin:0 0 0 0;width:100%;background:black;border:2px solid white;color:white;font-family:OCR A Extended;font-size:12pt}
.menu {position:absolute;left:40%;top:1%;font-size:13pt}
.logout {position:absolute;top:90%;left:2%}
a{color:red;font-family:OCR A Extended;font-size:12pt;text-decoration:none;font-size:9pt}
a:hover{color:red;text-decoration:underline;font-size:9pt}
</style>
</head>
<body>
<div id="main">
<div style="font-size:12pt"> Welcome, <?php echo $uname; ?></div>
<div class="menu">
<table style="font-size:15pt"><nobr>
<tr><td>|<a href=http://www.webdeveloper.com/forum/archive/index.php/"work.php">Work</a>|</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"infpage.php">Infantry Store</a>|</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"vehpage.php">Vehicle Store</a>|</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"shippage.php">Ship Store</a>|</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"war.php">Battle</a>|</td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"profile.php">User Profile</a>|</td>
</tr></nobr>
</table>
</div>
<table style="position:absolute;left:10%;top:10%;border:solid 1px white">
<tr><td><b>Soldiers</b></td></tr>
<tr><td>Infantry: <?php echo $data['inf']; ?></td></tr>
<tr><td>FlameTroops: <?php echo $data['flam']; ?></td></tr>
<tr><td>Commandos: <?php echo $data['com']; ?></td></tr>
</table>
<table style="position:absolute;left:40%;top:10%;border:solid 1px white">
<tr><td><b>Vehicles</b></td></tr>
<tr><td>Jeeps: <?php echo $data['jeep']; ?></td></tr>
<tr><td>Tanks: <?php echo $data['tank']; ?></td></tr>
<tr><td>Transports: <?php echo $data['trans']; ?></td></tr>
</table>
<table style="position:absolute;left:70%;top:10%;border:solid 1px white">
<tr><td><b>Soldiers</b></td></tr>
<tr><td>Infantry: <?php echo $data['inf']; ?></td></tr>
<tr><td>FlameTroops: <?php echo $data['flam']; ?></td></tr>
<tr><td>Commandos: <?php echo $data['com']; ?></td></tr>
</table>
<table style="position:absolute;left:10%;top:35%;border:solid 1px white">
<tr><td><b>Ships</b></td></tr>
<tr><td>Airships: <?php echo $data['aship']; ?></td></tr>
<tr><td>Fighters: <?php echo $data['fight']; ?></td></tr>
<tr><td>Bombers: <?php echo $data['bomb']; ?></td></tr>
</table>
<table style="position:absolute;left:40%;top:35%;border:solid 1px white">
<tr><td><b>Work status</b></td></tr>
<tr><td>Workers: <?php echo $data['work']; ?></td></tr>
<tr><td>Food: <?php echo $data['food']; ?></td></tr>
<tr><td>Fuel: <?php echo $data['fuel']; ?></td></tr>
<tr><td>Cash: $<?php echo $data['cash']; ?></td></tr>
</table>
<table style="position:absolute;left:70%;top:35%;border:solid 1px white">
<tr><td><b>Battle Status</b></td></tr>
<tr><td>Battles won: <?php echo $data['bwon']; ?></td></tr>
<tr><td>Battles lost: <?php echo $data['blost']; ?></td></tr>
<tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/"table.php" style="background:white;font-size:12pt">View Rank</a></td></tr>
</table>
<div class="logout"><a href=http://www.webdeveloper.com/forum/archive/index.php/"logout.php" style="background:white;font-size:12pt">LogOut</a></div>
</div>
</body>
</html>
and heres where its uploaded: <!-- m --><a class="postlink" href="http://members.lycos.co.uk/home.php">http://members.lycos.co.uk/home.php</a><!-- m -->
login using the username "guest" and the password "password". thanksIn CSS, set the properties for the <body> tag as follows:
body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: scroll; /* this may not be needed */
}
The body's content area is only as tall as the content inside it. Setting it's height to 100% in CSS makes the browser size the body to be 100% of the height of the viewable area of the browser window.