SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with applying margin

    hi bros

    i have designed a three column page.
    at the top of the page, inside the wrapper div, i have header div.
    inside header div i have two other div:
    1- logo div
    2- navigation div

    i have navigation div that this div is child of header div
    i want to apply margin to navigation div and move it to bottom of the header div. i want to make a horizontal navigation bar.
    but when i apply margin to navigation div, the margin will apply to all header div and make a space between wrapper div and header div (instead of making space between navigation div and header div).
    please see this picture



    my page code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    /* reset all browsers */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100&#37;;font-family:inherit;vertical-align:baseline;}
    /* remember to define focus styles! */
    :focus {outline: 0;}
    body {line-height: 1;color:black;background:white;}
    ol, ul {list-style:none;}
    /* tables still need 'cellspacing="0"' in the markup */
    table {border-collapse: separate;border-spacing:0;}
    caption, th, td {text-align:left;font-weight:normal;}
    blockquote:before,blockquote:after,q:before,q:after {content: "";}
    blockquote,q {quotes: "" "";}
    /* reset all browsers */
    body {
    margin: 20px 0;
    text-align:center;
    }
    #header {
    background:#6699FF;
    height: 100px;
    }
    #logo {
    padding: 20px 0 0;
    height: 50px;
    }
    #nav {
    margin: 30px 0 0;
    padding:0;
    position relative;
    }
    #nav li {
    display: inline;
    
    }
    
    #wrapper {
    margin: 0 auto;
    text-align: right;
    width: 95%;
    background:url(bg.gif) -215px 0px repeat-y;
    border: 1px solid #CCCCCC;
    position: relative;
    }
    #content {
    float: right;
    margin-left: 345px;
    
    display: inline;
    }
    #maintext {
    padding: 10px;
    line-height: 1.5;
    }
    #sidebars {
    float: left;
    width: 340px;
    margin-right: -345px;
    border: 1px solid #CCCCCC;
    display: inline;
    }
    #sidebar1 {
    float: right;
    width: 168px;
    border: 1px solid #CCCCCC;
    display: inline;
    }
    #sidebar2 {
    float: left;
    width: 168px;
    border: 1px solid #CCCCCC;
    display: inline;
    }
    #footer {
    clear: both;
    background:#CCCCCC;
    height: 1.5em;
    }
    -->
    </style>
    </head>
    <body class="main">
    <div id="wrapper">
    <div id="header">
    
    <div id="nav">
      <ul>
        <li>amir</li>
        <li>abbas</li>
        <li>persia</li>
        <li>cms</li>
        <li>com</li>
      </ul>
      </div>
    </div>
    <div id="content"><div id="maintext"><p>In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Cupidatat non proident, lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Velit esse cillum dolore mollit anim id est laborum.</p>
      <p>Sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Excepteur sint occaecat ut aliquip ex ea commodo consequat. Quis nostrud exercitation mollit anim id est laborum. Sunt in culpa ut labore et dolore magna aliqua. Ullamco laboris nisi cupidatat non proident.</p>
      <p>Velit esse cillum dolore ut aliquip ex ea commodo consequat. Excepteur sint occaecat quis nostrud exercitation duis aute irure dolor. Ut enim ad minim veniam, sunt in culpa mollit anim id est laborum. Ut aliquip ex ea commodo consequat.</p>
      <p>Lorem ipsum dolor sit amet, cupidatat non proident, sed do eiusmod tempor incididunt. Quis nostrud exercitation in reprehenderit in voluptate consectetur adipisicing elit. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet, duis aute irure dolor velit esse cillum dolore. Ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit. Ut enim ad minim veniam, in reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p></div></div>
    <div id="sidebars">
    <div id="sidebar1">
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Sed do eiusmod tempor incididunt</li>
        <li>Ut labore et dolore magna aliqua</li>
        <li>Ut enim ad minim veniam</li>
      </ul>
    </div>
    <div id="sidebar2">
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Sed do eiusmod tempor incididunt</li>
        <li>Ut labore et dolore magna aliqua</li>
        <li>Ut enim ad minim veniam</li>
      </ul>
    </div>
    </div>
    <div id="footer">
      <p>Ut labore et dolore magna aliqua.</p>
    </div>
    </div>
    </body>
    </html>
    how can i solve this problem

    thank you beforehand
    Attached Files Attached Files
    Last edited by amirabbas; Sep 15, 2007 at 23:31.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You can just post code between [code ] [/code ] blocks, then they don't have to be approved to be viewed.

    But, the short answer is use padding not margins for this. It never behaves like this where the margins escape

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another thing I would do is separate the header from the menu in the HTML, then slide the menu on top of the header by using a combination of negative margins and padding.

    But I'd need to see the code first to be able to determine if that really is the appropriate decision here.

  4. #4
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can just post code between [code ] [/code ] blocks, then they don't have to be approved to be viewed.
    yes, you are right. i thought that everybody are able to download the attachment, now i find out that attachment must be approved by moderators.
    i edited my first post and i have added the code of the page.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Like I said, just use padding instead and you won't have this problem.

    Code:
    #nav {
      margin: 0;
      padding: 30px 0 0 0;
      position relative;
    }

  6. #6
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like I said, just use padding instead and you won't have this problem.
    thanks markbrown4. i know that i can use padding instead of margin but im searching for the reason.
    why i can not use margin in this case ?
    why browsers render that margin in wrong way ?

    thanks

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    why i can not use margin in this case ?
    why browsers render that margin in wrong way ?
    The reason is due to collapsing margins and the fact is that actually mozilla is rendering the margin the correct way and IE gets it wrong once again.

    The fact that IE dusplays it how you want is down to yours and IE's lack of understanding on how the specs define that this should work. I have a detailed explanation here that should show you where you are going wrong .

    Vertically adjacent elements (with nothing solid between them like a border or padding) will collapse their margins to the largest of the margins present and ignore the smaller margins. it can be thought of as though margins overlap each other and therefore only the largest margin remains in effect.

    In the case of nested elements the margin on the inner element effectively becomes the margin on the parent instead and thus pushing the parent further way from the content above. In order to stop margin collapse you need to have something solid in the way such as padding or a border as padding and borders never collapse.

    Read the article I linked to as it explains it in details with pretty pictures

    There is also another article here in case you are still confused.

    Hope that helps

  8. #8
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh no. again margin collapsing
    i must pay more attention to margin collapsing. two broblem in just three day.
    thanks a bunch, paul


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
  •