SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    annoying gap between div bg image & div above

    http://mrcpsychmentor.com/testsite/
    http://mrcpsychmentor.com/

    if you compare the homepage versions above the following will make sense

    i want to get rid of the white gap between the background image on the 'branding' div & the blue border above it (which is part of the horizontally tiled background image of the 'header' div above - but crucially, not at the bottom of it). http://mrcpsychmentor.com/testsite/ shows this

    [ NOTE: you may notice that the main site (http://mrcpsychmentor.com/) doesn't actually have a background image on the 'branding' div at all - the tape measure background image is actually applied to a div contained within it, called 'brandingImage', but i'll be changing this in time ]

    basically, i wanna have a background image on the 'branding' div that stretches - vertically - from the blue border below it to the blue border above it. WITHOUT THE ANNOYING WHITE GAP. if you do inspect element on Firebug on the header div it should be clear why the white gap is there in the first place

    i can probably fix it by altering the CSS & HTML of the header, but apart from being messy i'm not sure if the guy who does the HTML/PHP coding will be ok with that

    so, does anyone have any ideas for a quick & easy solution? doesn't matter how hacky it is. something like perhaps adding an extra div somewhere, maybe with an absolute positioning value, or something else possibly with margins?


    any ideas welcome anyway, as per


    PS: you have to view the site with a window size greater than 1150px. otherwise the image on the testsite will just be another tape measure - not the 'exam note' image i replaced it with so you can clearly see the white gap

    PS2: i couldn't attach images before. i tried creating this post with just screenshots instead of links, & whilst sitepoint seemed to let me upload the images it wouldn't insert them into the post. anyone know why this might've been?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,226
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Is this too extreme?

    Looks like the height of the header is too tall. The background image at the top of the page is height:104px as should be the height of the header box in which it resides, not height:120px, so:
    Code:
    mrc_index_main.css  Line 70
    
    #header {height:104px;}     /* from 120px */
    The white line below the brandingImage will not exist after you increase the height of the container in which the brandingImage resides (by 16px to compensate for the reduced height of the header box).
    Code:
    mrc_index_main.css  Line 187
    
    #branding {height:324px}    /* from 308px */
    Regarding the Mentor logo:
    Code:
    mrc_index_main.css  Line 16
    
    #pagewidth  {position:relative}    /* add this property */
    
    common.css  Line 43
    
    #header {position:relative}    /* delete this property */
    
    mrc_index_main.css  Line 79
    
    #headerimage {
        position: absolute;
        top: 30px;
        z-index: 1;    /* add this property */
    }
    I think that'll do it.

    Speculation:

    My feeling is that you will not like the 3px dithered-to-white line above the brandingImage, but that's part of the header image. The height of the box for the brandingImage could probably be extended 3 more pixels and could be given a negative margin-top of 3px to extend it over the header image.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    An alternative would be to reduce the height of the header (say 102px), remove the overflow: hidden on the header, and set the logo image to z-index: 100 (or any number). That will move the branding section up, though, so you'll have to adjust that next.
    Last edited by ralph.m; Oct 3, 2012 at 16:53.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,226
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Nice, Ralph!

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers ralph. bacon saved again


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
  •