css footer position:fixed;bottom:0;} need help with navigation bar height
Hi you may have seen this question before I got help and I checked a few pages and taught it had worked and I closed the question. Well it did work realy but only on pages that you dont have to scrol down on.
I am still having an issue So I am posting again please help thanks.
So my footer is always displayed at the bottom of the page but on some of my pages there is
A lot of information so you have to scroll down the page but when you do that you see the navigation bar dose not stretches down to the bottom of the screen when you scroll is there any way you can have it move down with you on the screen or a way of making it stretch from top header all the way down to the bottom footer.
Attached is the code and pictures thanks for any help given
CSS
WEBPAGE
as you can see i am using alot of
to stretch the nav bar down to the footer but this only workis if you know the reselution of the screen used but not very good otherwise
once again thank you for any help given
image below is how the screen looks when you scrol down....with out the <p> </p> in the nav bar
table-size1.png
I am still having an issue So I am posting again please help thanks.
So my footer is always displayed at the bottom of the page but on some of my pages there is
A lot of information so you have to scroll down the page but when you do that you see the navigation bar dose not stretches down to the bottom of the screen when you scroll is there any way you can have it move down with you on the screen or a way of making it stretch from top header all the way down to the bottom footer.
Attached is the code and pictures thanks for any help given
CSS
html,body{margin:0;padding:0;height:100%}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-color:#FFFFFF;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#C0C0C0;height:100%}
div#navigation1{background:#C0C0C0;height:100%}
div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#navigation1 ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation1 li{margin-bottom:5px;}
div#extra{background:#C0C0C0;}
div#footer{background:#C0C0C0;position:fixed;bottom:0;}
div#footer p{margin:0;padding:5px 10px}
div#container{width:1300px;margin:0 auto}
div#content{float:right;width:1150px}
div#navigation{float:left;width:150px}
div#navigation1{float:right;width:150px}
div#footer{clear:both;width:100%}WEBPAGE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Absent Teacher 1</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">
function syncSelects(objSel) {
for(var i=2; i<=9; ++i) {
objSel.form.elements['sickteacher['+i+']'].selectedIndex = objSel.selectedIndex;
}
}
</script>
</head>
<?php
// First we execute our common code to connection to the database and start the session
require("common.php");
// At the top of the page we check to see whether the user is logged in or not
if(empty($_SESSION['user']))
{
// If they are not, we redirect them to the login page.
header("Location: login.php");
// Remember that this die statement is absolutely critical. Without it,
// people can view your members-only content without logging in.
die("Redirecting to login.php");
}
// Everything below this point in the file is secured by the login system
// We can display the user's username to them by reading it from the session array. Remember that because
// a username is user submitted content we must use htmlentities on it before displaying it to the user. The
// fact that we retrieved it from a database and not directly from the user does not matter.
?>
<body>
<div id="container">
<div id="header"> <img name="Logo" src="images/logo.png" width="233" height="76" alt=""></div>
<div id="content">
<p><caption><h2>Absent Teacher 1 </h2></caption>
<form action="http://localhost/absent1.1.php" method="POST">
<?php include('php.php'); ?>
<?php
for($i=1;$i<=9; ++$i): ?>
<pre>
<fieldset>
<legend>Absent Teacher 1 </legend>
Period: <input type="text" name="period[<?php echo $i; ?>]" size="1" readonly value="<?php echo $i; ?>" ><br>
Absent Teacher: <select name="sickteacher[<?php echo $i ?>]"<?php echo ($i==1)?' onchange="syncSelects(this);"':''; ?>><?php echo $options ?></select><br>
Subject: <select name="subject[<?php echo $i ?>]"><?php echo $subject_options ?></select><br>
Class: <select name="class[<?php echo $i ?>]"><?php echo $class_options ?></select><br>
Room: <select name="room[<?php echo $i ?>]"><?php echo $room_options ?></select><br>
Cover Teacher: <select name="coverteacher[<?php echo $i ?>]"><?php echo $options ?></select>
</fieldset>
</pre>
<?php endfor; ?>
<input type="submit" value="Add Teacher 1 Cover">
<input type="reset" value="Reset">
<p> </p>
<p> </p>
</form>
</body>
</html></p>
<p>
</div>
</div>
<div id="navigation">
<p><strong>Navigation Here</strong></p>
<ul>
<li><a href="http://localhost/absent2.php">Absent Teacher 2</a></li>
<li><a href="http://localhost/absent3.php">Absent Teacher 3</a></li>
<li><a href="http://localhost/absent4.php">Absent Teacher 4</a></li>
<li><a href="http://localhost/absent5.php">Absent Teacher 5</a></li>
<li><a href="http://localhost/absent6.php">Absent Teacher 6</a></li>
<li><a href="http://localhost/absent7.php">Absent Teacher 7</a></li>
<li><a href="http://localhost/absent8.php">Absent Teacher 8</a></li>
<li><a href="http://localhost/absent9.php">Absent Teacher 9</a></li>
<li><a href="http://localhost/absent10.php">Absent Teacher 10</a></li>
<li><a href="http://localhost/absent11.php">Absent Teacher 11</a></li>
<li><a href="http://localhost/absent12.php">Absent Teacher 12</a></li>
<li><a href="http://localhost/absent13.php">Absent Teacher 13</a></li>
<li><a href="http://localhost/absent14.php">Absent Teacher 14</a></li>
<li><a href="http://localhost/absent15.php">Absent Teacher 15</a></li>
<li><a href="http://localhost/absent16.php">Absent Teacher 16</a></li>
<li><a href="http://localhost/absent17.php">Absent Teacher 17</a></li>
<li><a href="http://localhost/absent18.php">Absent Teacher 18</a></li>
<li><a href="http://localhost/absent19.php">Absent Teacher 19</a></li>
<li><a href="http://localhost/absent20.php">Absent Teacher 20</a></li>
<li><a href="http://localhost/tables.php">Absent Tables Display</a></li>
<li><a href="http://localhost/empty.php">Empty Absent Tables</a></li>
<li><a href="http://localhost/administrator.php">Administrator Page </a></li>
<li><a href="http://localhost/logout.php">Logout</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
<div id="wrapper"></div>
<div id="footer">
<p>my site</p>
</div>
</div>
</body>
</html>as you can see i am using alot of
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>to stretch the nav bar down to the footer but this only workis if you know the reselution of the screen used but not very good otherwise
once again thank you for any help given
image below is how the screen looks when you scrol down....with out the <p> </p> in the nav bar
table-size1.png
ASKER
but the footer is not my issue its my nav bar is not linking up with the footer if the user needs to scrol down page
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
Although in html 5 there is a footer html element that may work better
see
http://www.w3schools.com/tags/tag_footer.asp