SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Advice re layout please

    I'm a complete amateur with a book trying to put a small website together and my layout's gone wrong. I've got 3 floating elements effectively forming 3 columns which all seem to fit together fine except that there is a gap between the tops and the horizontal navigation bar. It is the same in both Firefox and IE and I would like to get rid of it. I've put most of the layout code here because I don't know which bit is wrong and any help would be much appreciated. I can't post a link to the site to look at because the forum won't let me!

    html,body{margin:0;padding:0}
    body{font: 76% arial,sans-serif;text-align:center; background:navy}

    p{margin:10px 20px 20px}


    div#header h1{height:120px;line-height:80px;margin:0;
    padding-left:10px;
    background: navy url(pictures/header10.jpg) center;
    border-bottom: 1px solid navy;
    border-top: 3px solid navy;
    color: white;}


    div#container{text-align:left;}
    div#container{width:1000px;margin:0 auto}

    div#content p{line-height:1.4}
    div#content{background:white; }
    div#content{margin-right: 400px; height: 640px}


    div#middle{background:white}
    div#middle{float:left;width:100px;margin-left:-400px; }

    div#extra{background:white}
    div#extra{float:left;width:300px;margin-left:-300px; }




    div#footer{background: #E7E7E7;color: black; border-bottom: 1px solid navy;

    }
    div#footer p{margin:0;padding:5px 10px}
    #extra a {
    text-transform: uppercase;

    }

    div#wrapper{float:left;width:100%; background: white}



    div#footer{clear:left;width:100%}


    #nav li {
    float: left;
    width: 142.6px;
    list-style-type: none;

    }
    #nav a {
    color: #000;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid navy;
    padding: 5px 10px 5px 10px;
    display: block;
    background: #E7E7E7;
    border-left: none;
    }

    #nav a:hover {
    color: white;
    background-color: red;


    }
    #nav a:active {
    color: white;
    background-color: aqua;


    }

    ul#nav {
    margin-left: 0px;
    margin-top: 0px;
    padding: 0;
    list-style: none;
    border-left: 1px solid navy;
    float: left;

    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    We'd need to see your html to be sure, but it may be that you have an element at the top of one or more of the columns—or at the bottom of the header—that has default browser margins on it. (This would be a case of "collapsing margins".)

    A way to test it would be to add this rule to the top of your style sheet (preferably for testing purposes only):

    Code:
    * {margin:0; padding:0;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, guessing from a standard structure, I'm guessing #nav is a <ul>. Some browsers apply a bottom margin too, and you only cleared the top margin, so thus the bottom margin is pushing the 3 columns down
    Code:
    ul#nav {
    margin-left: 0px;
    margin-top: 0px;
    padding: 0;
    list-style: none;
    border-left: 1px solid navy;
    float: left;
    
    }
    Add margin-bottom:0; there and that should patch it up. However I didn't have the HTML to work off of. You should use a reset as Ralph indicated.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    It now works perfectly; thank you so much !

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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