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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    118
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Tempate Demo Help

    I have created a template trying to use the modern html 5 way but columns can't seem to get the right with and margin. also with having borders on some parts it makes it look bigger but not I have created a link for you all to see feel free to play around with it and if you have ago tell me what you think I have done wrong so I can learn

    Here is the link http://codepen.io/vipercode/pen/eGyDz

    Full Page View Link is Here: http://codepen.io/vipercode/full/eGyDz

    I also would like each section to have a background width 100% with different Colors. And the container stays at 960px;

    I use to do it ok with html 4 but not new html 5 won't take me long to learn once I get a demo from somewhere.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning vipercode,
    You should check this with the validator. You have title and meta in the body of the document. You also re-use #main a lot.

    Your .col's don't make three columns because you don't follow the box model.
    See the box model here. 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.

    ---An example of your box model being off:
    header#main is 60em wide
    In that you put 60em wide #logo PLUS 2px of borders.

    You also don't clear your floats.
    One handy thing about using overflow: auto; to clear floats with is it will show you when your box model is off by giving you a scrollbar.
    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

  • Users who have thanked Excavator for this post:

    riwakawd (02-16-2013)

  • #3
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    118
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Going to watch some more learning videos on html 5 elements etc.


    Quote Originally Posted by Excavator View Post
    Good morning vipercode,
    You should check this with the validator. You have title and meta in the body of the document. You also re-use #main a lot.

    Your .col's don't make three columns because you don't follow the box model.
    See the box model here. 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.

    ---An example of your box model being off:
    header#main is 60em wide
    In that you put 60em wide #logo PLUS 2px of borders.

    You also don't clear your floats.
    One handy thing about using overflow: auto; to clear floats with is it will show you when your box model is off by giving you a scrollbar.


  •  

    Tags for this Thread

    Posting Permissions

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