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

Thread: what is wrong?

  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts

    what is wrong?

    Can somebody please tell me what I'm doing wrong here? I'm just learning how to build with DIVs. http://simpledark.webs.com/template-divs/index.html

    I'm trying to figure out why the "Put stuff here" section is on top of my "Navigation" section instead of under it, and why it is dropping down the news on the right.

    It is supposed to look like this http://pmportfolio.net/tester/
    I'm trying to recreate that site with divs instead of tables.

  • #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
    Hello jimmyd,
    The ul contains all those list items, so it is much taller than the height: 20px; you put on it.
    Those ul's are the full width of containing #nav so there is no need to float them. Float the container instead.

    I add 2px width to #nav to account for the extra width added to li#topli by your border. According to the box model, margin/padding/border all count when figuring total width.

    Try it like this -
    Code:
    #wrapper #body #nav {
      width: 232px;
    float: left;
    }
    
    #wrapper #body #nav ul {
      /*height: 20px;
      float: left;*/
      display: block;
      list-style-type: none;
      text-align: center;
      font-family: verdana;
      font-size: 11px;
      font-weight: bold;
    }
    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:

    jimmyd (12-22-2010)

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks so much, Excavator. Problem has been resolved by doing exactly what you have said and adding a bottom margin to the ul.

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Seems I'm having another very similar problem.. Now the footer is way bigger than it should be, and it is behind the other content, instead of under it. Any suggestions?

    http://simpledark.webs.com/template-divs/index.html

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jimmyd View Post
    Seems I'm having another very similar problem.. Now the footer is way bigger than it should be, and it is behind the other content, instead of under it. Any suggestions?

    http://simpledark.webs.com/template-divs/index.html
    Try adding this bit in red -
    Code:
    #wrapper #footer {
      width: auto;
      margin-top: 5px;
    clear: both;
    }
    You should not be re-using those id's. Check in with the validator to see which ones.
    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:

    jimmyd (12-22-2010)

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thank you once again. it worked. what exactly does that mean though?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jimmyd View Post
    thank you once again. it worked. what exactly does that mean though?
    Clearing it makes it recognize your floated elements so it will go below them where it belongs.


    This also works in it's place -
    Code:
    #wrapper #body {
      width: auto;
      margin-top: 5px;
    overflow: auto;
    }
    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:

    jimmyd (12-22-2010)


  •  

    Posting Permissions

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