During the coding process of my website, I came across a few problems. Such as my outer container containing all of my content hovering over to the left, putting my navigation bar half way down the page, and the footer bar hovering to the right and coming out of my outer container.
Navigation Bar & Outer Container Problem
As you can see on my Northern Graft website, the navigation bar is located on the bottom of the top image. This can cause confusion for the user when accessing my website, when clicking on the links they will expect the content to pop up straight away, and probably wouldn’t even think about scrolling down. This problem was fairly easy to resolve, all I did was place my navigation HTML code above the image, placing the navigation bar at the top of the image instead of at the bottom.
To fix my problem with the outer container hovering to the left, I located my outer container selector in my css style sheet and noticed I had written out two selectors for my outer container, that cancelled out the selector I was wanting to use. On the selector that was over riding my original selector, I had used the “Float: Left” element, this caused my outer container to move to the left, again a simple mistake and was easily resolved. Here is what the Northern Graft page looks like on the top now.
Footer Bar Problem
During the coding process of my Northern Graft page I noticed that my footer bar was hovering to the right of my outer container. When looking through my HTML code, I noticed the closing div tag was located above the footer tag, meaning my footer bar was not located on the inside of my outer container. I resolved this, but the footer was still coming out of my container. I then noticed in my CSS instead of setting the margin for my icons located in the footer, I had put the margin-left into the actual footer selector, so I had pushed the footer out of the container, I resolved this. Now my footer bar is on the inside of my outer container, as you can see from this image below.