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

Thread: odd blank space

  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post

    odd blank space

    Hi. On this website, can you see why the #container_header background image is not extending down to the bottom of #container_header?

    There is a 4px or so gap underneath the navigation.

    Thanks.

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    It depends what type of image it is. If it is a fixed size then you need to declare the height / width and then set the repeat to no-repeat

    Code:
    #header_container {
      height: 150px;
      width: 150px;
      background-repeat: no-repeat;
    }
    You need to assign the background-repeat property accordingly
    http://www.w3schools.com/cssref/pr_b...und-repeat.asp
    Thanks!

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    The background image will be smaller than the div that contains it. The image is 153px tall, but #container_header is 167px tall.

  • #4
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Why does the container need to be larger? Why can't you do something like

    Code:
    <header>
      
      <div id="image"></div>
      
       <div id="sectionebelowimage">
          this is the area below the image  
       </div>
       
    </header>
    You still need to set the height, and repeat property.
    Last edited by stevenmw; 08-16-2013 at 04:33 AM.
    Thanks!

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    1) I want the image to be a background image so the navigation can be on top of it
    2) I want to the background image to touch the bottom of the header.

  • #6
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    By on top you mean in front of the image correct? Not literally on top? So set the height of the image in your css, and tell it how to repeat. Then put the div with the menu inside of the div with the image.
    Thanks!

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Adding background-repeat: no-repeat doesn't remove the gap, unfortunately.

  • #8
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    I don't see a gap on my screen. Can you explain where it is? There is an 8px border at the top. Is that what you mean? Oh I see. the navigation has a padding.

    Try changing

    Code:
    #header, #navigation, #content, #footer, #widgets {
        padding: 1em;
    
    
    }
    Last edited by stevenmw; 08-16-2013 at 04:42 AM.
    Thanks!

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post

  • #10
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Quote Originally Posted by stevenmw View Post
    By on top you mean in front of the image correct? Not literally on top? So set the height of the image in your css, and tell it how to repeat. Then put the div with the menu inside of the div with the image.
    Yes, I mean in front of.

    Do you mean to insert an IMG tag, or to keep the image as a CSS background image?

  • #11
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    The only thing i see that is keeping the menu from being at the bottom of the head container is that the menu div itself has a padding.
    Thanks!

  • #12
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    But the gap is smaller than #navigation's padding.

    The gap is more like the margin of #navigation, but it has no margin.


  •  

    Posting Permissions

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