Website Layout Issue (HTML5)

Question

I'm designing my first website (for a start-up IT support company) and I have run into some issues in my learning. Problems are:

1. When I try to put a border around my nav element, it moves the nav box down the side to where it's still on the left, but below the the main (article?) section of the webpage. It also makes the border around my main header part thicker (only the side where the nav box is).

2. I cannot get the footer to align with the article section (even though both are supposed to be aligned to the center. I suspect the footer is not aligning because the nav box is changing the "center" alignment of the article).

P.S. I don't understand why this post is being downvoted into oblivion... I haven't found the answer to this question anywhere else, nor do I think it is a senseless one.

Here is the jsfiddle for my site: http://jsfiddle.net/EchoedTruth/a4CLL/

 `$` <nav style="background-color: red">
        <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>

    `$`

Answer 1

The code within your NAV element is invalid HTML.

You have this which is just all sorts of wrong:

<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>

Try changing it to this:

<nav>
  <ul>
    <li><a href="BTSMain.html">Home</a></li>
    <li><a href="BTSServices.html">Services We Offer</a></li>
    <li><a href="BTSAboutUs.html">About Our Company</a></li> 
    <li><a href="BTSTestPage.html">Testing Page</a></li> 
    <li><a href="BTSTestPage2.html">Testing Page 2</a></li>
  </ul>
</nav>

The reason your NAV element is moving out of place when you add a border will probably be because adding the border gives the NAV element a larger width.

e.g if your NAV element is 300px wide and you give it a border of 1px that will make the NAv element 302px.

Read up on the HTML Box Model to understand this better.

Answer 2

Your HTML structure is not correct, you have <li> within a <table>? <li> elements are only allowed withing a <ul> or <ol> elements. So I would fix your nav first before trying to style:

CSS:

ul {
    border:1px solid #000; // border around all li elements
}

ul li {
   border:1px solid #666; // border around each li element
}

HTML:

<nav style="background-color:red;">
    <ul>
        <li><a href="BTSMain.html"><b>Home</b></a></li>
        <li><a href="BTSServices.html"><b>Services We Offer</b></a></li>
        <li><a href="BTSAboutUs.html"><b>About Our Company</b></a></li>
        <li><a href="BTSTestPage.html"><b>Testing Page</b></a></li>
        <li><a href="BTSTestPage2.html"><b>Testing Page 2</b></a></li>
    </ul>
</nav>