Layout Gone CRAZAYYYYYYYYY!!!

Now that I have been able to echo out information on the user from the database I decided to add the html structure that i have developed so far. Previously i created the HTML pages of each of the sections that will be included within the website, now that the functionality has started to come into place i will be adding the structure to the PHP file instead of adding the php code to the HTML file. 

Once I added the HTML code to the php file I run the page to see how all the code appeared together, unfortunately it did not work out very effectively. The HTML code has been brought further down due to the PHP code not knowing where it is meant to be, I adjusted the css code in order to place the information within the  <div id=centrepiece"> but there still seems to be some form of conflict.

The main issues were found to be on the header and navigation of pages section, the focus is on the login header as it is out of place within the design. The php code has been displayed on the top of the page although this is because I have not assigned it an area therefore the system has displayed it were it was able to. 

The jQuery within the document also encountered some errors that needed to be resolved. As you can see form the screen capture the login header it on one side of the page and the content within that header is displayed on the other side once clicked by the user. Part of the text within the login window is also out of place floating randomly over the centre div. Within this window I also need to adjust the login form as as somehow i have managed to implement 2 forms within the same container. 

Identifying errors within the code will enable me to alter and solve them before my next tutorial, my aim is to have some solid functionality in order to begin user testing as from the 2nd March.