how to create gap between header and body using CSS?

  • Resolved developdesign

    (@developdesign)


    12 years, 5 months ago

    Hello,

    I’m trying to create a space or gap below the header area, so the header ( logo and menu ) are separated from the main content / side bar. Typically if I add a margin-bottom or margin-top in one of the DIVs, then it will create a visible, but with hueman there is always a white background.

    I’d like to create a gap that separates the first sidebar from the content / second sidebar. I want to see the background in the gap. Again if I use margin, I create space, but there’s still a white background so I can’t see the background.

    What is the DIV ID or CLASS that is creating the white background in the CSS?
    ( between header area and content / sidebars; and, between first sidebar and content / sidebar )

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter developdesign

    (@developdesign)

    12 years, 5 months ago

    I’ve continued playing with the CSS and if I put margin:20px or margin-bottom:20px I’m always getting the white #FFF background.

    In other words, the way that the footer separates from the rest of the layout ( content / sidebar ) and you can see the background. I want to do the same thing with the header and possibly the sidebar.

    Help please?!

    Alexander Agnarson

    (@alxmedia)

    12 years, 5 months ago

    Hi – something like this perhaps?

    #header { padding-bottom: 0; }
#page { margin-top: 20px; }

    To change color of the bg, you do:

    body { background: red; }

    Thread Starter developdesign

    (@developdesign)

    12 years, 5 months ago

    When I apply ‘red’ to “body” in style.css or do same to child theme css, it doesn’t change anything.

    Thread Starter developdesign

    (@developdesign)

    12 years, 5 months ago

    The header / page code works, thanks!

    Alexander Agnarson

    (@alxmedia)

    12 years, 5 months ago

    When I apply ‘red’ to “body” in style.css or do same to child theme css, it doesn’t change anything.

    If you have body background set in Theme Options > Styling, then you need to do !important to override it.

    body { background: red!important; }

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘how to create gap between header and body using CSS?’ is closed to new replies.