Need to remove spacing between header and content

  • Resolved danieray

    (@danieray)


    12 years ago

    I’ve been trying to take a website that was originally built using tables (ugh) and use the same layout for a blog. I’m using the Bones theme to work from. I am close to having the layout finished, but can’t seem to remove the spacing between the header and the content area.

    Everything I try either doesn’t work or messes up the spacing of something else (adjusting margins, padding)!

    Any help would be MUCH appreciated.

    https://www.palmettogrants.com/blog/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Kurt

    (@highfxmedia)

    danieray:

    If you don’t like table layout, which you shouldn’t, why are you using a table for the header and header image?

    The first row, first cell has a defined height of 83px. The second row is taking the height of the image – 219px in height.

    You’ll have to change one or both to move the content up.

    Note: The #main content div has a background image that coordinates with the header image.

    Thread Starter danieray

    (@danieray)

    Yes Kurt, I don’t like the tables, but am only getting a limited amount of time to work on this so I just copied the header code from the original site… I know it needs updating! The whole site needs to be updated at some point – The code is a mess ?? I want to start from scratch, but just don’t have that option right now.

    I removed the height of the first table row and it is not solving the problem. There is still the (gray) spacing between the header image and content area. The #main background image is what needs to align up against the header image.

    Thanks for your suggestion though! Any other ideas?

    Thread Starter danieray

    (@danieray)

    BTW – I went ahead and removed the table in the header, but the spacing issue is still a problem!

    Kurt

    (@highfxmedia)

    danieray:

    Give the div that surrounds your heading an ID like #heading. It should look like this:

    <div id="heading" ...
<div ...
<div ...
<img ...
</div>
</div>
</div>

    Add this to your CSS:

    #heading {
    line-height: 0;
}

    You’ll want to add some padding or margin to the div or elements that precede the header image.

    Thread Starter danieray

    (@danieray)

    That solved my problem! Thanks for your help Kurt!

    Kurt

    (@highfxmedia)

    Glad I could help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Need to remove spacing between header and content’ is closed to new replies.