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:

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

    `$`

Please post some code, or a link to [jsfiddle](http://jsfiddle.net/) with some information provided so that we may get a better understanding of what's going on. Also, remember to read up on [block vs. inline](http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm) elements because I think that is the root of your issue. — oomlaut, Jan 28 '13 at 16:58
can you post your code on jsfiddle or codepen? it sounds like you're running into issues with the css box model. Adding a border (or padding) affects the total width of an element, which may affect your layout. — Brian O'Neill, Jan 28 '13 at 16:58
Ok I added the code as best I could... still not exactly sure how to post it properly :( — EchoedTruth, Jan 28 '13 at 17:01
No, I hope to be good enough at it one day though. I don't understand why people would downvote this post when I'm clearly new though. — EchoedTruth, Jan 28 '13 at 17:03
@EchoedTruth It was downvoted so much mainly because for the lack of information and sample code. — gSaenz, Jan 29 '13 at 19:16

score 2 · Accepted Answer · answered Jan 28 '13 at 17:10

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.

I tried the code you posted but that removes the borders around the individual links. What else would you say is wrong with the code? And thank you for the reply. — EchoedTruth, Jan 28 '13 at 17:16

keeg · Answer 2 · 2013-01-28T17:28:11.877

0

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>

edited Jan 28 '13 at 17:28

answered Jan 28 '13 at 17:12

keeg

3,860
8
44
92

I put it within a table in order to have the border around the nav box and the links... is that not correct? Thanks – EchoedTruth Jan 28 '13 at 17:18
no you cannot have `
– keeg Jan 28 '13 at 17:26

Website Layout Issue (HTML5)

2 Answers2