473,395 Members | 2,443 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > footer wouldn't to bottom of screen

Join Bytes to post your question to a community of 473,395 software developers and data experts.

footer wouldn't to bottom of screen

Hi everyone,

I want to have the footer div stick to the bottom of the screen and my code works until I add the <form></form> to the html. Can somebody spot the problem for me. I only know basic html.

Here is the code. If I remove <form name=...></form> then it works. I am writing php but the html shouldn't matter? I am building a user input page so I must have the form tag.

see attached

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
  3.  
  4. <head>
  5.     <title>scs</title>
  6.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.     <meta http-equiv="content-language" content="en,zh" />
  8.  
  9.     <link rel="Stylesheet" type="text/css" href="layout.css" />
  10.     <link rel="Stylesheet" type="text/css" href="menu.css" />
  11.     <link rel="shortcut icon" href="favicon.ico" />
  12.   <!--[if !IE7]>
  13.     <style type="text/css">
  14.       #wrap {display:table; height:100%}
  15.     </style>
  16.   <![endif]-->
  17. </head>
  18.  
  19. <body style="background:#FFFFFF">
  20. <form name="student1Form" method="post" onsubmit="return checkForm();" action="student2.php" id="student1Form">
  21. <div><div id="wrapper">
  22.   <div id="header">
  23.     <div id="menubar">
  24.       <table style="padding-top:37px; padding-left:5px; width:100%">
  25.         <tr>
  26.           <td>
  27.             <ul id="menu">
  28.               <li><a href="#">Home</a></li>
  29.               <li><a href="#">New User</a></li>
  30.               <li><a href="#">My Profile</a></li>
  31.               <li><a href="#" class="arrow">Students</a>
  32.                 <ul>
  33.                   <li><a href="#">Search</a></li>
  34.                   <li><a href="#">My sub menu item 2</a></li>
  35.                   <li><a href="#">My sub menu item 3</a></li>
  36.                 </ul>
  37.               </li>
  38.               <li><a href="#">Logout</a></li>
  39.             </ul>
  40.           </td>
  41.           <td>
  42.             <p style="padding-left:5px;">You are not logged in.</p>
  43.           </td>
  44.         </tr>
  45.       </table>
  46.     </div> <!-- menuBar div -->
  47.   </div> <!-- header div -->
  48.   <div id="main">
  49.     <div style="padding-left:100px; padding-right:100px; padding-top:50px; padding-bottom:100px;">
  50.       <table class="table1">
  51.         <tr>
  52.           <th>Resources</th>
  53.         </tr>
  54.         <tr>
  55.           <td>to be or not to be</td>
  56.         </tr>
  57.       </table>
  58.       <br />
  59.       <br />
  60.       <table class="table2">
  61.         <tr><th>head1</th><th>head2</th></tr>
  62.         <tr class="d0">
  63.           <td>john</td>
  64.           <td>andy</td>
  65.         </tr>
  66.         <tr class="d0">
  67.           <td>marc</td>
  68.           <td>noel</td>
  69.         </tr>
  70.       </table>
  71.      </div>
  72.   </div> <!-- main div -->
  73.   <div id="push"></div>
  74. </div> <!-- wrapper div -->
  75. <div id="footer">
  76.   <p>Copyright &copy 2011 - Sydney Chinese School</p>
  77. </div>
  78. </div>
  79. </form>
  80. </body>
  81. </html>
my 2 css files
menu.css

Expand|Select|Wrap|Line Numbers
  1. ul#menu ,
  2. ul#menu ul {
  3.  list-style-type: none;
  4.  margin: 0px;
  5.  list-style-image: none;
  6.  padding: 0px
  7. }
  8.  
  9. ul#menu li {
  10.  position: relative;
  11.  list-style-type: none;
  12.  margin: 0px;
  13.  width: 100px;
  14.  float: left;
  15.  list-style-image: none;
  16.  padding: 0px
  17. }
  18.  
  19. ul#menu li li {
  20.  width: auto;
  21.  float: none
  22. }
  23.  
  24. #menu a {
  25.  border: silver 1px solid;
  26.  text-align: left;
  27.  display: block;
  28.  font-family: verdana;
  29.  white-space: nowrap;
  30.  background: #f5f0dc;
  31.  color: black;
  32.  font-size: 13px;
  33.  text-decoration: none;
  34.  padding: 3px;
  35.  height: 17px;
  36. }
  37.  
  38. #menu a:focus {
  39.  outline-style: none;
  40.  outline-color: invert;
  41.  outline-width: medium
  42. }
  43.  
  44. #menu a.no-click {cursor: default}
  45.  
  46. #menu li a {margin: -1px -1px 0px 0px}
  47.  
  48. #menu li li a {margin: 0px 0px -1px}
  49.  
  50. #menu > li > a.arrow {padding-right: 14px}
  51.  
  52. #menu ul.arrow-pad > li > a {padding-right: 11px}
  53.  
  54. #menu li a.arrow ,
  55. #menu > li > a.arrow {
  56.  background-repeat: no-repeat;
  57.  background-position: right 50%
  58. }
  59.  
  60. #menu li:hover > a {
  61.  background-color: #5d9276;
  62.  color: #d9e32c;
  63.  text-decoration: underline;
  64. }
  65.  
  66. #menu li ul ,
  67. #menu li:hover ul ul ,
  68. #menu li:hover ul ul ul ,
  69. #menu li:hover ul ul ul ul ,
  70. #menu li:hover ul ul ul ul ul ,
  71. #menu li:hover ul ul ul ul ul ul ,
  72. #menu li:hover ul ul ul ul ul ul ul ,
  73. #menu li:hover ul ul ul ul ul ul ul ul ,
  74. #menu li:hover ul ul ul ul ul ul ul ul ul ,
  75. #menu li:hover ul ul ul ul ul ul ul ul ul ul ,
  76. #menu li:hover ul ul ul ul ul ul ul ul ul ul ul ,
  77. #menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
  78. #menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
  79. #menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
  80. #menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
  81. #menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
  82. #menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
  83. #menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
  84. #menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
  85. #menu li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
  86.  z-index: 999;
  87.  position: absolute;
  88.  display: none
  89. }
  90.  
  91. #menu li:hover ul {display: block}
  92.  
  93. #menu li li:hover ul ,
  94. #menu li li li:hover ul ,
  95. #menu li li li li:hover ul ,
  96. #menu li li li li li:hover ul ,
  97. #menu li li li li li li:hover ul ,
  98. #menu li li li li li li li:hover ul ,
  99. #menu li li li li li li li li:hover ul ,
  100. #menu li li li li li li li li li:hover ul ,
  101. #menu li li li li li li li li li li:hover ul ,
  102. #menu li li li li li li li li li li li:hover ul ,
  103. #menu li li li li li li li li li li li li:hover ul ,
  104. #menu li li li li li li li li li li li li li:hover ul ,
  105. #menu li li li li li li li li li li li li li li:hover ul ,
  106. #menu li li li li li li li li li li li li li li li:hover ul ,
  107. #menu li li li li li li li li li li li li li li li li:hover ul ,
  108. #menu li li li li li li li li li li li li li li li li li:hover ul ,
  109. #menu li li li li li li li li li li li li li li li li li li:hover ul ,
  110. #menu li li li li li li li li li li li li li li li li li li li:hover ul ,
  111. #menu li li li li li li li li li li li li li li li li li li li li:hover ul {
  112.  display: block;
  113.  margin-left: 100%
  114. }
  115.  
  116. #menu li:hover ul {margin-left: 0px}
  117.  
  118. #menu ul ul {
  119.  top: 1px;
  120.  left: -1px
  121. }
  122.  
  123. #menu li {top: -1px}

layout.css file

Expand|Select|Wrap|Line Numbers
  1. *
  2. {
  3.   margin: 0;
  4. }
  5.  
  6. html, body
  7. {
  8.   height: 100%;
  9. }
  10.  
  11. #header
  12. {
  13.  
  14.   height: 63px;
  15.   background-color: #b6cf98;
  16.   font-family: verdana,geneva,arial,sans-serif;
  17.   font-size: 13px;
  18. }
  19.  
  20. #wrapper
  21. {
  22.   min-height: 100%;
  23.   height: auto;
  24.   height: 100%;
  25.   width: 1000px;
  26.   float: center;
  27.   margin: 0 auto -3em;
  28. }
  29.  
  30. #footer, #push
  31. {
  32.   height: 3em;
  33.   clear: both;
  34. }
  35.  
  36. #footer
  37. {
  38.   width: 1000px;
  39.   background-color: #b6cf98;
  40.   text-align: center;
  41.   font-size: 16px;
  42.   float: center;
  43.   margin: 0 auto -3em;
  44. }
  45.  
  46. table.table1
  47. {
  48.   width: 500px;
  49.   min-height: 100px;
  50.   float:center;
  51.   margin-left:auto;
  52.   margin-right:auto;
  53.   background-color: #f5f5f5;
  54.   border: 1px silver solid;
  55.   font-family: verdana, geneva, arial, sans-serif;
  56. }
  57. table.table2
  58. {
  59.   width: 800px;
  60.   min-height: 100px;
  61.   float:center;
  62.   margin-left:auto;
  63.   margin-right:auto;
  64.   background-color: white;
  65.   border-collapse: collapse;
  66.   border: 1px red solid;
  67. }
  68.  
  69. table.table2 th, table.table2 td
  70. {
  71.   border: 1px grey solid;
  72. }
  73.  
  74. table.table2 th, table.table2 td
  75. {
  76.   height: 25px;
  77.   padding-left: 10px;
  78.   text-align: left;
  79. }
  80.  
  81. table.table2 th
  82. {
  83.   background-color: #b6cf98;
  84. }
  85.  
  86. table.table2 tr.d0 td
  87. {
  88.   background-color: #feffff;
  89. }
  90. table.table2 tr.d1 td
  91. {
  92.   background-color: #fdf8e4;
  93. }
Attached Images
File Type: jpg footer.jpg (20.8 KB, 120 views)
Mar 17 '11 #1
0 1184

Sign in to post your reply or Sign up for a free account.

Similar topics

82
How to make footer at the bottom in 5 box 3 columns layout
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
HTML / CSS
1
keeping a footer at the bottom of the page
by: Dan Langille | last post by:
Hi folks, On my websites, I like to put a footer at the bottom of the page. I'm finding that under Netscape 7.02, the footer isn't where I thought it would be. Under Opera 7.11 and IE 6, it's...
HTML / CSS
5
Tables VS. CSS (Footer at the bottom, 100% of the viewport)
by: Tyler Carver | last post by:
I've tried to get CSS to give me a basic layout where I can place a footer at the bottom of the page and the top of the page I can use for content. I don't however want the footer to pull away...
HTML / CSS
13
report footer at the bottom of the last page
by: Greg | last post by:
Most suggestions on this topic recommend to use a page footer and make it visible only on the last page. My problem is that the footer is half of the height of a page which means the detail would...
Microsoft Access / VBA
0
Keeping the footer at the bottom
by: Yorian | last post by:
Hey everybody, At the moment I am trying to build a website with a footer at the bottom of the viewport if the amount of text is too small and at the bottom of the page if there is enough text....
HTML / CSS
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!