drop shadow shifting layout

[gwh]

Hi everyone,

I'm trying to use css to create a drop shadow effect behind my layout. Before starting on the drop shadow I had everything contained in a wrapper div which correctly centered the layout within the browser window. I've since tried nesting the wrapper in another two divs to try to create the drop shadow effect but when I do this the layout shifts to the left of the browser window and only part of the drop shadow is appearing.

I've uploaded the page to this address:

http://www.officelinkonline.com.au/test/

and the css is at this address:

http://www.officelinkonline.com.au/test/main.css

Just wondered if someone wouldn't mind taking a look to see what might be happening?

The css relating to the shadow is as follows:

.alpha-shadow {
width: 770px;
margin:0 auto;
position: relative;
background: url(images/dropShadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.alpha-shadow div.shadowInner {
background: url(images/shadowPNG.png) no-repeat left top !important;
background: url(images/shadowGIF.gif) no-repeat left top;
padding: 0px 5px 10px 0px;
}

Would really appreciate any help.

[Paul O'B]

HI,

Its not centred because you have removed the auto margins.

.alpha-shadow {
  width: 770px;
   margin:0 auto;
  position: relative;
  background: url(images/dropShadow.gif) no-repeat bottom right;
   margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

You have over-riddden the auto margins which were centering the page and replaced them with 0 5px. Are you sure you didn't mean to add padding there instead of margins.

See the link below for some drop shadow techniques.


http://www.ploughdeep.com/onionskin/

[gwh]

Thanks for that - the centering is fixed now but I still can't get the drop shadow to move to the right. I'm trying to use the instructions given in the drop shadows article at the a list apart website but I'm ovbviously doing something wrong. Not sure if I should go with the onion skinning method you pointed out - it looks a lot harder than the one I'm doing.

If my current method only needs a simple fix, can you point it out? Otherwise I can see if the onionskin will work.

[gwh]

Hi,

Sorry to come back to this topic - I decided to take a different approach and try out the onionskin version of css drop shadows. Unfortunately this has pushed me back to where I began, ie. the layout is again not centered and I can't seem to offset the shadow at the bottom edge.

The page is again at the same address:

http://www.officelinkonline.com.au/test/

Would someone be able to take a look at this? The revised drop shadow related css is as follows:

.wrap1, .wrap2, .wrap3 {
display: inline-table;
/* \*/display: block;/**/
}

.wrap1 {
margin: 0 auto;
position: relative;
z-index: 1;
float:left;
background: url(images/shadow.gif) right bottom no-repeat;
}

.wrap2 {
background: url(images/corner_bl.gif) left bottom no-repeat;

}
.wrap3 {
padding: 0 8px 4px 0;
background: url(images/corner_tr.gif) right top no-repeat;
}
.wrap3 img {
display: block;
}

Also, if I can finally get it working there's still the problem of the corners of the shadow not matching my cornered layout - would I need to alter the shape of the drop shadow corners in Photoshop to make it fit my layout? The onion skinning article doesn't go into this sort of thing. Also not sure how to make the drop shadow match my background colour - again the article doesn't mention how to do this.

Thanks for any continued support.

[Paul O'B]

Hi,

You need to give wrap1 a width so that margin auto works which also means removing the float.

.wrap1 {
  position: relative;
  z-index: 1;
  background:red url(http://www.officelinkonline.com.au/test/images/shadow.gif) right bottom no-repeat;    
  margin: 0 auto;
  width:778px;
}

Alternatively wrap another element around the page and use the width and margin:auto to center it.

The shadow is not showing at the bottom because you have absolutely placed .back on top of it. You need to move .back by 10px to let the shadow show.

e.g.

.back{
    width: 770px;
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 10px;
    margin-top: 20px;
}

If you want the bottom right corner to match your layout then re-make shadow.gif with a round corner!!

The same goes for the background colour. Re-make those image so that they match your background colours. You could use transparent pngs instead but IE6 doesn't understand transparent pngs and you would need to hack for it which gets complicated. The easiest solution is to make the images fit your layout colours.

[gwh]

Thanks again. It seems whenever I fix one problem another one appears. I have text in a div with an id of 'content'. It's supposed to float and appear to the right of the nav div but it's being pushed right down below the layout. Can you tell me why this has happened?

http://www.officelinkonline.com.au/test/services.html

div#content {
width: 510px;
float: left;
margin: 0;
padding: 20px 80px 90px;
display: inline;
position: relative;
z-index: 1;
}

[Paul O'B]

The closing div of #main should be at the end of #content and not just surround #nav only.

[gwh]

great - thanks again