Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.

    It looks like you have a little divitis 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. 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.

    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.
    An an example of a simple 2 column layout, 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 - again, it's really not needed for your layout.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •