0

My main content area overlaps the header (sandy brown) and I am trying to accomplish a drop shadow around the white content area.

I have four images that make up that content area: the top, the bottom, the part that tiles with the sandy brown background for 99px (notice the white space in the img) and the part that tiles the rest with the white background to match the background of the rest of the page.

The problem I am having is when I tile the background image that includes the sandy brown color and the background image that contains the white. As you can see in the image attached, I want the text to move up.

The way I have my html setup:

<div id="main-content">

 <div id="content-header"></div>
 <div id="content-header-tile"></div>
 <div id="content">

  <div id="content-body">
   <p>Text here</p>
  </div>

 </div>
</div>

I imagine along the way I could cut down on how many div's I use

CSS for those div's

#main-content {
margin-top:-120px;
margin-right:auto;
margin-left:auto;
height:500px;
width:960px;
background: url('..img/content_bg.png') repeat-y top left;
}

/* top of box, with drop shadow img */
#content-header {
height:11px;
background: #fff url('../img/content_header_bg.png') top left;
width:960px;
}

/* tiles bg img with same sandy brown color as the header above, for 99px */
#content-header-tile {
background: #fff url('../img/content_header_tile_bg.png') repeat-y top left;
width:960px;
height:99px;
}

/* begins tiling after 99px (after the div above is done tiling) */
#content {
background: #fff url('../img/content_white_tile_bg.png') repeat-y top left;
width:960px;
}

/* like #content-header, but this displays the bottom piece of the box */
#content-footer {
height:12px;
width:960px;
background: #fff url('../img/content_footer_bg.png') no-repeat top left;
}

enter image description here

Brad
  • 12,054
  • 44
  • 118
  • 187

2 Answers2

1

This rule:

  #main-content {margin-top:-120px;}

Is what moves your white box ontop of the lighter top box, but doesn't get you past the fact that you have two divs within #main-content (#content-header and #content-header-title) adding up to 120px in height.

I believe this will get you closer:

#content-body {margin-top:-120px;}

Have you considered though, just using css box shadows? http://css-tricks.com/snippets/css/css-box-shadow/

Andrew Bacon
  • 546
  • 3
  • 6
  • I tried using the filter for a box shadow, but I can not get it to work within IE7 http://jsfiddle.net/vn3Hg/4/ – Brad Feb 24 '12 at 13:27
  • 1
    Everything is a tradeoff. To ensure that IE7 gets this minor aesthetic improvement, you're making your markup pretty complicated and burning a lot of cycles figuring it out. All this for a browser that's clocking in at about 5% (and dropping) market share. – Andrew Bacon Feb 24 '12 at 13:34
  • I think I'll use the box shadow style, I got this to work in IE7 http://stackoverflow.com/a/7841114/26130 – Brad Feb 24 '12 at 14:38
0

Another option, perhaps, would be to cut the main <div> sections down to three:

  • Header (brown... but with just the tip of the top edge)
  • Middle (white... the only part that tiles)
  • Footer (white... with just the tip of the bottom edge)

This way, your text would be near the top of that imaginary white box... instead of being pushed down by that extra (brown) tile piece.

Also, there was an article about something like this from a few years back, if I recall correctly: http://www.alistapart.com/articles/fauxcolumns/

summea
  • 7,390
  • 4
  • 32
  • 48