Hello everyone, I posted a thread on this before but I believe it was unclear in what I was seeking. Here are my issues: 1. I am trying to get the layout of my site correct, and currently the footer is going under my nav section, and I do not know how to prevent this. I want my footer to stretch across the very bottom of the page without interfering with other elements. 2. I would like to put frames around the links in my nav section. I was using the table element to do this but I was told that was wrong. Any input? 3. I would like to learn how to better lay-out my page, if anyone has any tips, or a good web tutorial, I would appreciate it. Thank you. Here is my code: <!DOCTYPE html> <head> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title> My Magical World </title> <style> html, body { margin: 0px; padding: 0px; border: 0px } article { margin: 10px; padding: 10px; border: 2px solid black; display: table; } footer { background-color: red; border:5px solid black; } .b { border:5px solid black; text-align: center; background-color: red; } </style> </head> <body> <header class="b"> <h1> Hello World! </h1> <h2> Welcome to a magic world </h2> </header> <nav style="background-color: red; border: 2px solid black; margin: 10px; padding: 10px; float: left; "> <table> <ul> <tr><td><li><a href="BTSMain.html"><b>Home</b> </a></li></td></tr> <tr><td><li><a href="BTSServices.html"><b>Services We Offer</b></a></li></td></tr> <tr><td><li><a href="BTSAboutUs.html"><b>About Our Company</b></a></li></td></tr> <tr><td><li><a href="BTSTestPage.html"><b>Testing Page</b></a></li></td></tr> <tr><td><li><a href="BTSTestPage2.html"><b>Testing Page 2</b></a></li></td></tr> </ul> </table> </nav> <article> My world is a strange place... it is populated by lemurs, lobsters, larvae, lampreys, and llamas. <h4> <b> Llamas...... </b> </h4> </article> <footer> <h1> About My World </h1> </footer> </body> </html> HTML:
My first advice is to use an external stylesheet for your css code to make your code clearer. http://www.w3schools.com/css/css_howto.asp To solve this, add this to your stylesheet: footer { clear:both; } Code (markup): Probably you are referring to borders. In this case , you should give list tags classes , like eg. <li class="navlink"><a href="">Link</a></li> Code (markup): and after that add some borders in css stylesheet like : .navlink { border:1px solid #FFF; } Code (markup): You can add padding, background or whatever you want. You are right, table usage for website layout is not a good practice . Nowadays you can get similar result using HTML and css . You should probably wrap the content after body tag in another div to get more control over the layout and also add another section or div that contains navigation menu and main content area . Some of the best places to learn css and Html are: http://www.w3schools.com/css/ and http://www.w3schools.com/html/
I mean that you can do something like this, just to organize your code better and maybe you want to add some margins to your layout in the future or a background color to main content section or something else: <body> <div id="content-wrapper"> <!-- Content Wrapper Start --> <header class="b"> <h1> Hello World! </h1> <h2> Welcome to a magic world </h2> </header> <section id="main-content-area"> <!-- Section Main Content Area Start --> <nav style="background-color: red; border: 2px solid black; margin: 10px; padding: 10px; float: left; "> <table> <ul> <tr><td><li><a href="BTSMain.html"><b>Home</b> </a></li></td></tr> <tr><td><li><a href="BTSServices.html"><b>Services We Offer</b></a></li></td></tr> <tr><td><li><a href="BTSAboutUs.html"><b>About Our Company</b></a></li></td></tr> <tr><td><li><a href="BTSTestPage.html"><b>Testing Page</b></a></li></td></tr> <tr><td><li><a href="BTSTestPage2.html"><b>Testing Page 2</b></a></li></td></tr> </ul> </table> </nav> <article> My world is a strange place... it is populated by lemurs, lobsters, larvae, lampreys, and llamas. <h4> <b> Llamas...... </b> </h4> </article> </section><!-- # Section Main Content Area End --> <footer> <h1> About My World </h1> </footer> </div><!-- # Content Wrapper End --> </body> HTML: