CSS troubleshooting—Center Page Elements

Looking at the awesome works of my friends, I can't help being, wacha-may-call-it, jealous un poco so I decided to keep working on the projects I have started and never finished.

First,I started with my non-organization website. It was such a pain looking at my code. So many swap images and very unorganized! Plus, this undone part of the website is a tour to raise money for the organization which leads me back to my first website, the "restaurant" or resort website.

Let me describe my first website a little bit: It was plain use of HTML and the simple swap images, anything you can find from the user guide of HTML. I have a habit of staring at my work for a long time. As long as I don't get bored with it, it will survive from the trash can. If I do get bored, I will save a copy of it and start re-design using the same concept (or a new one, who knows!). Anyway, I was really bored of my first website after several times using it as an advertising tool for my web skills. I can name thousands of mistakes or what I don't like about it. I admit I was ONCE proud of it, but not any more.

So I started to really organize everything from the documents to PsD files and images files from the web folder. Since this is the second time I do this project, it's easier for me to know where to target and what to change. Secondly, I fixed the design a little bit so that it looks like I have paid more attention and make the images in the way that I can code the CSS better plus make the page load faster.

Here are the screen shot of the design before and after. The after version is a photoshop file so use your imagination a bit :-)

Before:



After:


Once I came to the coding part, I couldn't center all of the page elements. Still trouble shooting. I found a lot of advices online but didn't have time to try them. I will post my codes here to get help if I can't solve my problems.

Updated: My very good coder friend has helped me out. He pointed out that I didn't uniform lowercase and uppercase letters therefore the browser couldn't understand what I was telling it to do. For example, in my HTML file, I typed in a div id=page-wrap and #Page-wrap in my CSS file.

However, that's not the end of all of the trouble, I have to find out how to stick the footer to the bottom of the page (not nearly/close to bottom like it is now). I will post my corrected coding up here when I get all of the things under control.