Unwanted Extra Space and Lost Links Help

Hi,

As a project for my grade 12 computer science class, I have been tasked with rebuilding our school's website. Going into this project, I had no prior knowledge of web design, and have just recently learned HTML and CSS through various resources.

After learning HTML and CSS, I wrote the first version of the page. After a few revisions -- and lessons learned, I have come across a problem which I cannot seem to solve.

The code and images together can be found in my DropBox here (http://dl.dropbox.com/u/26986139/School%20Website%20Project.rar). I was going to just quote the code here, but it was too long.

Frustrated with my result, I decided to re-write the code in Dreamweaver. In Dreamweaver, I improved my code by centering it to the middle of browsers, and cleaned up the CSS by changing "div#(BLANK)" to "#(BLANK)". I also narrowed down my extra space to being caused by the wrapper div. Unfortunately, Dreamweaver also caused all of my links to disappear, although they appear to be valid in the code.

The Dreamweaver code and images together can be found in my DropBox here (http://dl.dropbox.com/u/26986139/School%20Website%20Project%20--%20Dreamweaver.rar).

To conclude, it would be fantastic if someone could point me in the right direction about the space from the wrapper div and why my links have stopped working in Dreamweaver.

Thanks!

Hello RchrdJ,
You're using an HTML5 DocType and you should know there is limited support for much that HTML5 has to offer. There are a couple workarounds to get the basics working in though, have a look here (http://nopeople.com/CSS%20tips/HTML5/index.html).

It looks like you have a little divitis (http://www.apaddedcell.com/div-itis) going on. Why nest #content inside #wrapper when it does nothing that #wrapper can't already do?

You should also learn about the box model (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

Your p#header, for example, is actually 780px wide. Instead of splitting that header up into two columns and using floats, you use positioning to put one layer on top of another. That can bury links under another element and make them inaccessable.

Your links in #navigation might actually work if you used absolute positioning (too much relative positioning like you're doing rarely works as intended). See positioning here (http://www.barelyfitz.com/screencast/html-training/css/positioning/).

But why use positioning at all? If you let the document flow naturally it all falls into place and is much a cleaner/easier code. See the pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).
An an example of a simple 2 column layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html), since that's what your site is.

As it is now, #wrapper is the element that is layered over top of your left column links. Remove the negative z-index from #wrapper and it will uncover your links.
See about z-index and stacking orders here (http://www.dzinelabs.com/Pages/positioning_four.htm) - again, it's really not needed for your layout.