Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 220
  • Last Modified:

HTML Newbie question

Hi,

I am about to update a very old, very basic HTML website, which gives me the perfect opportunity to learn HTML5.  I have been on to the W3C website and ended up with a very basic template that is almost perfect.  However, I need to have the Footer fixed to the bottom of the screen/page and 0 border on the top.

I'd really appreciate it if someone could take a look at the code, and let me know (the right way) to do it.

Thank you.

<!DOCTYPE html>
 <html>
 <body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
 <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
 <b>Menu</b><br>
 HTML<br>
 CSS<br>
 JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
 Content goes here</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
 Footer to be at the bottom of the screen</div>
 
</div>
 
</body>
 </html> 

Open in new window

0
Andy Brown
Asked:
Andy Brown
1 Solution
 
Element1910Commented:
Footer:
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center; width: 100%; margin: 0%; position: fixed; bottom: 0%; border-top-width: 0px;">
 Footer to be at the bottom of the screen</div>

Open in new window

0
 
Andy BrownAuthor Commented:
Thank you so much - that's a big help (which is a little worrying :)
0
 
Dave BaldwinFixer of ProblemsCommented:
The next thing is to move the styles from 'inline' to a 'style section in the <head> which you also don't have.  An empty or non-existent head section will fail validation.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 page</title>
<style type="text/css">
#container {width:500px}
#header {background-color:#FFA500;}
#menu {background-color:#FFD700;height:200px;width:100px;float:left;}
#content {background-color:#EEEEEE;height:200px;width:400px;float:left;}
#footer {background-color:#FFA500;clear:both;text-align:center; width: 100%; margin: 0%; position: fixed; bottom: 0%; border-top-width: 0px;}
</style>
</head>
<body>
 
<div id="container">
 
<div id="header"><h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
 
<div id="menu">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content">Content goes here</div>
 
<div id="footer">Footer to be at the bottom of the screen</div>
                                            
</div>
 
</body>
 </html> 

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now