CSS Layout, Padding occurring.

Discussion in 'Web Design and Development' started by Dal123, Aug 19, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    I was pretty sure default padding set in most browsers so overid it in my css by declaring 0. I want my logo centred (see my css), my background is generating a box, I just want it flat, no padding. :confused:
    The book I bought has faulty code on it's website, I've already emailed them complaining about this.:mad:
    HTML:
    #masthead {
    background-image:url(Images/Graphics/Logo_Web.gif);
    width:972px;
    height:190px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding:0px;
    clear:both;
    }
     

    Attached Files:

  2. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #2
    Any chance of seeing the said css and HTML code? Or else a link to the site.
     
  3. m3kilpat macrumors regular

    Joined:
    Jul 6, 2009
    #3
    Do you want the image at the very top of the page? If so, the issue is that the background image is in a div. You need to either set the background in the body or else set positioning for the div you are using. You don't need to set the padding to 0 unless the div is inheriting padding set in a parent div, which is probably not the case here.
     
  4. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #4
    Are you talking about the black 1 px border going around the outside of the pale yellowbox?
     
  5. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #5
    I want it flush with the top of the page; but wanted a different color at the top of the background too. What I don't understand is if you look at the attached image there is padding all the way around (white space). I want it all yellow. By the sound of it that's not possible with a <div> :confused:.
    Was hoping to create a 'masthead' with my logo and navigation bar, that way could easily place it on my pages.
     
  6. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #6
    Is the masthead itself sitting inside another div? If it is the first element within the body, put

    Code:
    body {
    padding:0px;
    margin:0px;
    }
    
    Remember, padding applies to a div's content not to the div itself.
     
  7. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #7
    I think I already tried that, I don't think the div is in another; it's by itself: here is my css:
    Code:
    /* Masthead */
    #masthead {
    background-image:url(Images/Graphics/Logo_Web.gif);
    width:972px;
    height:190px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding:0px;
    clear:both;
    }
    /* Horizontal Navigation Bar */
    #navlist li
    {
    font-size:20px;
    font-family: 'Gill Sans', Lucidia Grande, Lucidia Sans Unicode, Arial, sans-serif;
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    margin-left:auto;
    margin-right:auto;
    }
    /* Styles for Sidebar Lists */
    #sidebar
    ul {
    list-style-type:none;
    margin: 5px;
    padding:20 20px 20px 20px;
    width:350px;
    }
    #sidebar li {
    background: #DDD;
    margin: 2px 10px;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    padding:0 10px;
    line-height:3em;
    text-align:right;
    font-size:20px;
    font-family: 'Gill Sans', Lucidia Grande, Lucidia Sans Unicode, Arial, sans-serif;
    font-style:none;
    }
    
    
    /* Footer */
    #footer {
    padding:10px;
    border:1px solid #000;
    background-color:#ffffcc
    }
    /*------------------------------
    Header Formats Whole Document*/
    
    h2 {
    text-decoration:underline;
    font-style:bold;
    paddign:0;
    margin:0;
    font: 20px Futura, Helvetica, Arial, sans-serif;
    }
    Here is my html:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <head>
    <title>Concrete Stairs</title>
    <link rel="stylesheet" media="screen" type="text/css" href="layout.css"/>
    </head>
    
    <body>
    
    <div id="masthead"></div>
    <ul id="navlist">
    <li>home</li>
    <li>previous projects</li>
    <li>guarantee</li>
    <li>contact us</li>
    </ul>
    
    <div id="sidebar">
    <ul>
    <li><h2>Staircases</h2></li>
    <li>Gutter Concrete Staircase</li>
    <li>2 Flight Mirrored Concrete Staircase</li>
    <li>3 Flight Mirrored Concrete Stairs</li>
    <li>Reinforced Concrete Staircase</li>
    <li>Concrete Stairs</li>
    <li><h2>Reinforced Concrete Structures</h2></li>
    <li>Waterproof Concrete Basement</li>
    <li>Caltite Basement</li>
    <li>Retaining Wall</li>
    <li>Concrete Roof</li>
    <li>Concrete Frame</li>
    </ul>
    </div>
    
    <div id="footer">
    <ul>
    <li>Precise Formwork Limited</li>
    <li>Office: 01708 736500</li>
    <li>Mobile: 07590657295</li>
    <li>email@preciseformwork.co.uk</li>
    </ul>
    </div>
    
    </body>
    </html>
    My navbar's need work, I'm just trying to learn and play with layout, teach myself. Can't believe the book has let me down :mad:.
    Thanks for all your help so far:).
     
  8. m3kilpat macrumors regular

    Joined:
    Jul 6, 2009
    #8
    The size of the div, width and height, need to be the exact size of the image or else extra white space will be around it. Also, as I said before, if the image is not exactly lined up with the top then you need to set the positioning of the div that the image is in.
     
  9. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #9
    Then it's not possible to place a yellow background at the top, and a grey one in the middle of the page.
     
  10. m3kilpat macrumors regular

    Joined:
    Jul 6, 2009
    #10
    Yes it is. You can do anything you want. If you want a yellow background at top in the masthead div set the position to relative with top at -8 px. That gets the div touching the top like you want.

    What is this gray box you are talking about now? Anyways, learn about positioning because that's how you move everything to where you want it.
     
  11. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
  12. m3kilpat macrumors regular

    Joined:
    Jul 6, 2009
    #12
    I really don't think you need to do the positioning with top of -8px but it works. I think the actual issue is that the defined size of your div is larger than your image so that extra space shows up as white.
     
  13. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #13
    It doesn't work, I've just tried it. Thanks anyway though bud, think I need to buy another book:mad:.
     
  14. m3kilpat macrumors regular

    Joined:
    Jul 6, 2009
    #14
    What doesn't work? The -8px? I tried it and it does, at least in firefox it does. Maybe you are doing something wrong?
     
  15. LightningEXPERT macrumors newbie

    Joined:
    Aug 19, 2009
    #15
    What book(s) are you reading and if possible I would recommend calling the author(s) too.
     
  16. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #16
    Yeah the 8px thing buddy, could you please post exactly how you did it with a line or two of my existing code so I know exactly where and how to place it.
    I am using book called "Beginning CSS web development from novice to professional" contacted the publisher "Apress" and they were to lazy to forward my email to the correct department :mad:. I also did a google search on the author and contacted him directly on his personal site :).
    Cheers people.
     
  17. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #17
    I believe he means to try the following in your masthead.

    Code:
    #masthead {
    background-image:url(Images/Graphics/Logo_Web.gif);
    width:972px;
    height:190px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding:0px;
    clear:both;
    position:relative;
    top:-8px;
    }
    
     
  18. m3kilpat macrumors regular

    Joined:
    Jul 6, 2009
    #18
    Yup that's what I meant. I thought it was easy enough to understand without the code.
     
  19. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #19
    Cheers buddies :). -40px worked well. But why I am I having to use negative; You would think zero would be the point. Also when resizing the browser window left to right the image does centre. However it does not go to exactly to the left. There must be default padding or something like that :confused:. Why is it happening?
    It seems that it is not the norm! Sorry for the silly questions but I just don't understand.
    How do you specify the size of the <div> I have set the size of the image correctly: 972px 190px is the correct size.
     
  20. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #20
    body width is set to 972px,
    image is set to 972 px.
    padding and margin all set to 0px
    yet still there is padding all round background-image
     

    Attached Files:

  21. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #21
    You say it's set to 972, but the attached has a width of 1001. When I measure the ruler part it has a width of 900. Are you certain the image itself doesn't have padding? I base that on what I saw when you attached that image in this thread where you can see it has padding in the image itself.
     
  22. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #22
    I've just checked the image in image ready and it's 972px wide by 190px high. This is image size and canvas size, I assume if there was padding it would come up there.
    I know I can get rid of the padding at the top by doing -40px but I want the container to define the width of my whole site (centred in the middle) at the moment it moves left and right but then there is a gap (padding) at the side (white colour) so deffinitely the body of the page.
     
  23. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #23
    Here's your image in GIMP. Notice the empty space around the image and the image size in the title bar.
     

    Attached Files:

    • dal.png
      dal.png
      File size:
      123.8 KB
      Views:
      25
  24. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #24
    I am stunned :eek:
    How do I remove this in photoshop, image ready? It says 972px by 190px in mine but I see what you're saying, image programs have their own padding too not just internet.
    How do I remove this padding?:confused:
     
  25. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #25
    With Gimp there's an option under the Image menu for auto-crop that did it quickly. I'm sure it's in Photoshop as well, just not sure under what menu.
     

Share This Page