1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

margin:0 does not work

Discussion in 'HTML & Website Design' started by Igozorus, Mar 23, 2013.

  1. #1
    Hello.Can someone help me?I have this code in css:

    #outer { width: 660px; margin: 0 auto; background-color:#FFF; }

    And margin:0 should say that i don't want my whole content to be with a gap from top and bottom.But still there is.
    I tried a lot of stuff: body { margin: 0; } tried body,html {margin:0; } then body,html { margin:0; padding:0; }
    Nothing works,there is a gap at the top and bottom.
    Can someone help?Maybe i wrote too little code here for you,then you tell me,because i don't really know,i just recently started to create web sites.
    Solved! View solution.
    Igozorus, Mar 23, 2013 IP
  2. essadik34

    essadik34 Active Member

    Messages:
    67
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #2
    add this code :
    *
    {
    margin : 0;
    padding : 0;
    }
    if you still have the problem, try a negative number like this :
    body
    {
    padding-top : -10px;
    }
    essadik34, Mar 23, 2013 IP
  3. cronik

    cronik Active Member

    Messages:
    490
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    80
    #3
    add 100% height to the body of the page?
    cronik, Mar 23, 2013 IP
  4. kk5st

    kk5st Well-Known Member

    Messages:
    2,906
    Likes Received:
    191
    Best Answers:
    9
    Trophy Points:
    190
    #4
    kk5st, Mar 23, 2013 IP
  5. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #5
    Thank you guys.Tried everything you said.essadik34,you almost said right,but instead of doing padding-top:-10px; i needed to do margin-top:-30px.
    But i really don't understand why?Shouldn't margin: 0 do the thing?
    Igozorus, Mar 23, 2013 IP
  6. kk5st

    kk5st Well-Known Member

    Messages:
    2,906
    Likes Received:
    191
    Best Answers:
    9
    Trophy Points:
    190
    #6
    Not necessarily. Read the article I linked.

    g
    kk5st, Mar 23, 2013 IP
  7. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    827
    Best Answers:
    144
    Trophy Points:
    395
    #7
    Setting a negative top isn't a great idea either in most cases as the problem is likely NOT the element, but what's BEFORE it.

    Gary pretty much hit it on the head -- without seeing the site in question or it's code, we're guessing wildly at best and cannot dial in a proper answer for you.
    deathshadow, Mar 23, 2013 IP
  8. Dan_Sheen

    Dan_Sheen Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #8
    How i've been taught, margin: 0 auto; places your website in the middle to create a fixed layout.
    Dan_Sheen, Mar 24, 2013 IP
  9. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #9
    The code is messy,but i will write it down here now.
    styles.css is this(before i put negative top):
    /* CSS Document */

    h1 {font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    color:#FF3535
    }

    p {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:12px;
    }


    ul { list-style-type:none
    }
    #outer { width: 660px; margin: 0 auto; background-color:#FFF; }
    #wrapper {width:600px; margin:0 auto; background-color:#FFF;
    }
    #logo { margin: 30px 0; }
    #navigation { }
    #navigation ul { border-top: 1px #000 solid; border-bottom: 1px #000 solid;
    margin: 30px 0; padding: 20px 0; }
    #navigation ul li { display:inline; }
    #navigation ul li a { padding: 0 15px; }
    body {background-color:#CD9C9C; margin:0px;;
    }
    #navigation a:link {color:#393; text-decoration:none; }

    #content { width: 350px; float:left; }

    #right {width: 150px; float:right; }

    #footer { clear: both; }

    And this is Source code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Naruto fan site</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
    </head>
    <body>
    <div id="outer">
    <div id="wrapper">
    <div id="logo">
    <img src="images/22763_naruto-logo.jpg" />
    </div>
    <div id="navigation">
    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="characters.html">CHARACTERS</a></li>
    <li><a href="more.html">MORE INFO</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    </ul>
    </div>
    <div id="banner">
    <img src="images/banner/narutoimages1.jpg" />
    </div>
    <div id="content">
    <h1>Welcome to Naruto fan site</h1>
    <p>Content here</p>
    </div>
    <div id="right">
    <h2>News</h2>
    <h3>21 March,2013</h3>
    <p>Some news</p>
    <h3>20 March,2013</h3>
    <p>Some news</p>
    </div>
    <div id="footer">
    <p>2013</p>
    </div>
    </div>
    </div>
    </body>
    </html>
    Igozorus, Mar 24, 2013 IP
  10. wiicker95

    wiicker95 Active Member

    Messages:
    437
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    75
    #10
    You have a margin:30px applied to your #logo and #navbar.

    But seriously, that code you have is not something you would want to use on an actual website.
    wiicker95, Mar 24, 2013 IP
  11. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #11
    Yes,but my #logo and #navigation are inside the #wrapper and #outer.How it's affect what's outside?
    So what should i do if i want margin for logo and outer but no space at the top?
    Also,what's wrong with my code?
    Igozorus, Mar 24, 2013 IP
  12. #12
    It's what Gary meant when he mentioned "margin collapse" -- margins pass outside elements that are not set to contain 'out of flow, still in layout' parts of elements like margins or floats. It'll pass right through. Overflow:hidden for modern browsers and a haslayout trigger (zoom:1) good as always for making it stay inside the parent. though really the best answer is... well, that's your next question.

    You could as I just said set overflow:hidden on the parent, but a better way is to pad the parent instead of margin the child. Good rule of thumb, margin should be your last resort due to issues that are hard to predict like margin collapse, IE margin doubling, etc, etc... when you can pad a parent element instead of margin on the child, do that instead!

    You may also want to set that logo IMG to display:block, and could probably lose that DIV for nothing around it -- IMG is a inline-level element so it defaults to display:inline, which can ALSO leave odd spacings around it. Also some browsers have a default padding on body and HTML, which is why essadik34 suggested adding the universal reset.

    I dislike the universal reset because it messes up form elements. There are bigger resets like Eric Meyer's "reset reloaded", but that fat bloated pig of code is more framework than reset, wasting time setting things I'd never use or would be setting different values on anyways. (honestly much of it reeks of presentational tag choices)

    The one I use is a nice happy middle-ground:
    Code (Text):
    1. /* null margins and padding to give good cross-browser baseline */
    2. html,body,address,blockquote,div,
    3. form,fieldset,caption,
    4. h1,h2,h3,h4,h5,h6,
    5. hr,ul,li,ol,ul,dl,dt,dd,
    6. table,tr,td,th,p,img {
    7.     margin:0;
    8.     padding:0;
    9. }
    10.  
    11. img,fieldset {
    12.     border:none;
    13. }
    Nulls just the elements that need it, strips borders just where needed, leaves everything else alone.

    In the CSS -- setting paragraphs (which should be your flow content) to fixed metric (px) sizes and using a fixed width is an accessibility train wreck, you're double wrapping for christmas only knows what, it's hard to read/follow when you stuff everything one one line, your dual float method is likely too fragile and will likely have a 'float drop' in IE at some point, which also has the problem of not being fluid design.

    In the markup, HTML 5 BS for nothing since it's HTML 3.2 inside (in other words the worst of 1997), endless pointless DIV for nothing, I suspect your -logo.jpg is a presentational image not content, so it should be applied to a structural element (like a h1) using a image replacement technique like Gilder-levin (absolute position a empty span inside the H1 over it's text), you've got a DIV aroung the menu UL for nothing, DIV around the (likely completely pointless and space wasting) banner for nothing, I very much doubt that 'news' is a subsection of the "welcome to" website -- which is what a H2 means, the start of a subsection of the H1 before it. (though you did at least use H3 properly), it is unlikely the text in the footer is part of the content/primary copy, so it probably wouldn't qualify as a paragraph... and you've got no ALT text on your images for people who have images unavailable or intentionally blocked.

    Though not seeing the images being used it's hard to say if you've made one of the classic mistakes that makes the page not viable for fluid/semi-fluid and responsive layout... but usually anything called "banner" and a logo image inlined in the markup like that basically falls into that category.

    If I was writing that same site, the code would likely go more like this:

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html
    4.     xmlns="http://www.w3.org/1999/xhtml"
    5.     lang="en"
    6.     xml:lang="en"
    7. ><head>
    8.  
    9. <meta
    10.     http-equiv="Content-Type"
    11.     content="text/html; charset=utf-8"
    12. />
    13.  
    14. <meta
    15.     http-equiv="Content-Language"
    16.     content="en"
    17. />
    18.  
    19. <meta
    20.     name="viewport"
    21.     content="width=device-width; initial-scale=1.0"
    22. />
    23.  
    24. <link
    25.     type="text/css"
    26.     rel="stylesheet"
    27.     href="screen.css"
    28.     media="screen,projection,tv"
    29. />
    30.  
    31. <title>
    32.     Naruto fan site
    33. </title>
    34.  
    35. </head><body>
    36.  
    37. <div id="pageWrapper">
    38.  
    39.     <h1>
    40.         Naruto Fan Site
    41.         <span><!-- image replacement --></span>
    42.     </h1>
    43.    
    44.     <ul id="mainMenu">
    45.         <li><a href="index.html">HOME</a></li>
    46.         <li><a href="characters.html">CHARACTERS</a></li>
    47.         <li><a href="more.html">MORE INFO</a></li>
    48.         <li><a href="contact.html">CONTACT</a></li>
    49.     </ul>
    50.    
    51.     <img
    52.         src="images/banner/narutoimages1.jpg"
    53.         alt="DESCRIBE THIS IMAGE!"
    54.         class="plate"
    55.     />
    56.    
    57.     <div id="contentWrapper"><div id="content">
    58.         <!-- double wrapper for fluid content column first layout -->
    59.        
    60.         <h2>Welcome to Naruto fan site</h2>
    61.         <p>
    62.             Content here
    63.         </p>
    64.        
    65.     <!-- #content, #contentWrapper --></div></div>
    66.    
    67.     <div id="subContent">
    68.    
    69.         <h2>News</h2>
    70.        
    71.         <h3>21 March,2013</h3>
    72.         <p>
    73.             Some news
    74.         </p>
    75.        
    76.         <h3>20 March,2013</h3>
    77.         <p>
    78.             Some news
    79.         </p>
    80.        
    81.     <!-- #subContent --></div>
    82.  
    83.     <div id="footer">
    84.         &copy; Whoever
    85.     <!-- #footer --></div>
    86.    
    87. <!-- #pageWrapper --></div>
    88.  
    89. </body></html>
    Though that's assuming the design elements are viable for a proper modern responsive layout -- something I'm not convinced you have. (though again, wild guess without seeing the images being used)
    deathshadow, Mar 24, 2013 IP
  13. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #13
    deathshadow,thank you for this informative answer.
    Didn't really understood everything,that you've wrote,like i said,i just recently started to learn create websites.Overflow:hidden helped me.
    Don't know what <!-- --> in your code means.
    I learn by video,and everything is going alright,except this space at top and bottom.
    Igozorus, Mar 24, 2013 IP
  14. wiicker95

    wiicker95 Active Member

    Messages:
    437
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    75
    #14
    You use these to insert comments. In this case, he uses them to mark the closing tags of his containers. Note that places all the comments BEFORE these closing tags, since doing it the other way around can cause bugs. Sounds silly, but it is true.
    wiicker95, Mar 24, 2013 IP