asked on

CSS Onion Skinned Drop Shadow Problem

Hi everyone,

I'm trying to use the instructions from the following site:

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

...to create a drop shadow effect around the perimeter of a site. Before trying out the shadow effect I had the following css code that basically centered the layout:

#wrapper {
      position: relative;
      text-align: left;
      width: 540px;
      margin-right: auto;
      margin-left: auto;
}

So my problem is twofold: 1) the layout is no longer centred and 2) the drop shadow isn't appearing correctly.

I've uploaded the page to the following address so you can see what I mean:

http://www.example.com/User/index.php

The related css is here:

http://www.example.com/User/main.css

Is someone able to tell me what I might be doing wrong? The shadow should be looking like one of the images in this gallery: http://www.ploughdeep.com/onionskin/gallery.html

Really appreciate any help.

KTMC

OK, I think I've solved it, there's a few things that are causing problems:

Starting with .wrap1, there should be no width attribute for any of the skin <div>s so that needs to go, and you can't use css shortcutting for background-repeat and background position in this case (honestly I've never seen it written this way before so this shortcut may not be viable at all, but I'm not 100% so I won't say for sure that it can never be used this way, but in this case it's screwing things up) so write the background attributes out the long way for all three .wraps.

Also I noticed that the paths for the background gifs are different on the corner pieces than on the shadow (they move up one folder level), I took a look and they aren't there, so I removed the instruction for both.

.wrap1 {
float:left;
width: 560px;
background:url(/Pauline/img/shadow.gif) right bottom no-repeat;
}

Next up we should move into the xhtml for a moment, in order for the auto - margining to function the Wrapper div needs to contain everything else, so we move it's start tag to immediately follow the opening of the body tag.

Third up, you've got css code for a footer tag, but no footer tag, and since that's where you're clearing your floats all your floated elements are askew (it's what's causing the strange gap in the shadow about 1/4th the way down the left side) So the footer div needs to be just after the end tag for th #navigation div.

Finally since we've contained the shadow within the wrapper we need to add the 8 pixels of padding to the #wrapper width attribute in the css so that the floats don't overlap & push everything down the page.

I tested this without your graphics and got a properly aligned and centered result, so here's the code with the changes I've made. Let me know if it works for you! (nice drop shadow effect BTW, I might use it myself...)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
 
/* ------------ generic styles ------------ */
 
 
body {
margin-top: 50px;
padding: 0;
font: small Verdana, Arial, Helvetica, sans-serif;
background: #fff;
color: #000;
text-align: center;
}
 
a img {
	border: 0;
}
 
a {
	text-decoration: none:
}
 
/*------------------------------------------*/
 
.wrap1, .wrap2, .wrap3 {
  display:inline-table;
  /* \*/display:block;/**/
  }
  
.wrap1 {
	float:left;
	background-image: url(/Pauline/img/shadow.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
  }
  
.wrap2 {
	background-image: url(/Pauline/img/corner_bl.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
  }
  
.wrap3 {
	padding:0 4px 4px 0;
	background-image: url(/Pauline/img/corner_tr.gif);
	background-repeat: no-repeat;
	background-position: right top;
  }
  .wrap3 img {
  display:block;
  }
 
#wrapper {
	position: relative;
	text-align: left;
	width: 548px;
	margin-right: auto;
	margin-left: auto;
}
 
#header {
background-image:url(../Pauline/img/header-540x113-clear.jpg);
background-repeat: no-repeat;
background-position: top left;
height: 113px;
position: relative;
}
 
#content {
float: right;
width: 417px;
height: 402px;
background-image:url(../Pauline/img/main-417x402-clear.jpg);
background-repeat:no-repeat;
background-position: top left;
/*padding: 0 10px 0 0;*/
}
 
#content p {
color: #fff;
font-size: 80%;
line-height: 1.8em;
}
 
#navigation {
float: left;
width: 123px;
height: 402px;
background-image: url(../Pauline/img/left-side-clear-123x402.jpg);
background-repeat: no-repeat;
background-position: top left;
}
 
#navigation ul {
list-style: none;
margin: 1em 0 0 0;
padding: 0;
border: none;
}
 
#navigation li {
font-size: 90%;
}
 
#navigation a:link, #navigation a:visited {
color: #fff;
background-color: transparent;
display: block;
border-bottom: 1px solid #999;
padding: 1em 0 0.2em 0;
text-decoration: none;
}
 
#navigation a:hover {
color: #999;
}
 
#footer {
clear: both;
font-size: 80%;
padding-top: 1em;
text-align: right;
color: #999;
background-color: transparent;
}
</style>
</head>
 
<body>
 
<div id="wrapper">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div id="header"></div>
<div id="content">
<p>Thank you for visiting my website.</p>
</div>
<div id="navigation">
<ul id="mainnav">
<li><a href="#">Home</a></li>
<li><a href="#">Artist's Profile</a></li>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Ordering</a></li>
<li><a href="#">Retail Stockists</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="footer"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Open in new window

KTMC

Sorry, ignore this chunk of old css I put in the 1st post

.wrap1 {
float:left;
width: 560px;
background:url(/Pauline/img/shadow.gif) right bottom no-repeat;
}

It was an accidental paste... oops...

CAE5942

ASKER

Thanks for the reply,

I just tried your code and have uploaded the current result to the address posted previously. It's a big improvement, ie. it's centered now and the drop shadow is showing at the bottom but it's still not showing at the right. Do you know why this is happening?

CAE5942

ASKER

Also, I typed something in the footer and the shadow is now overlapping the footer. Not sure what's going on?

KTMC

Ah, of course, I didn't see it because I didn't have your graphics in place. The problem is that we've moved the Wrapper to repair the auto-margins issue but without the graphic I couldn't see the overlap problem that I created by doing that. What we need is a new containing element to wrap the elements from the start of #header to the end of #footer. This new container (#innerContainer) needs the original width of 540px, a relative position and the backgrounding of the original wrapper. This will pull the footer into line and put the background image in the right place.

One thing this doesn't solve is the footer background issue, mainly because this situation needs a decision on your part, the footer has display elements that should be outside the innerContainer but the float-clearing and layout properties should be inside. The way I've got it done here adds a background colour and keeps the copyright as part of the enclosed content.

Let me know if you'd rather the copyright outside the container (and shadowbox) as it will require some restructuring to keep the floats cleared without altering the size & shape.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap1, .wrap2, .wrap3 {
  display:inline-table;
  /* \*/display:block;/**/
  }
  
.wrap1 {
	float:left;
	background-image: url(practiceGraphics/shadow.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
  }
  
.wrap2 {
	background-image: url(practiceGraphics/corner_bl.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
  }
  
.wrap3 {
	padding:0 4px 4px 0;
	background-image: url(practiceGraphics/corner_tr.gif);
	background-repeat: no-repeat;
	background-position: right top;
  }
  .wrap3 img {
  display:block;
  }
 
#wrapper {
        position: relative;
        text-align: left;
        width: 548px;
        margin-right: auto;
        margin-left: auto;
}
#innerContainer {
	position: relative;
	text-align: left;
	width: 540px;
        background-color: #660000;
}
 
#header {
background-image:url(../Pauline/img/header-540x113-clear.jpg);
background-repeat: no-repeat;
background-position: top left;
height: 113px;
position: relative;
}
 
#content {
float: right;
width: 417px;
height: 402px;
background-image:url(../Pauline/img/main-417x402-clear.jpg);
background-repeat:no-repeat;
background-position: top left;
/*padding: 0 10px 0 0;*/
}
 
#content p {
color: #fff;
font-size: 80%;
line-height: 1.8em;
}
 
#navigation {
float: left;
width: 123px;
height: 402px;
background-image: url(../Pauline/img/left-side-clear-123x402.jpg);
background-repeat: no-repeat;
background-position: top left;
}
 
#navigation ul {
list-style: none;
margin: 1em 0 0 0;
padding: 0;
border: none;
}
 
#navigation li {
font-size: 90%;
}
 
#navigation a:link, #navigation a:visited {
color: #fff;
background-color: transparent;
display: block;
border-bottom: 1px solid #999;
padding: 1em 0 0.2em 0;
text-decoration: none;
}
 
#navigation a:hover {
color: #999;
}
 
#footer {
clear: both;
font-size: 80%;
padding-top: 1em;
text-align: right;
color: #999;
background-color: transparent;
}
</style>
</head>
 
<body>
 
<div id="wrapper">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div id="innerContainer">
<div id="header"></div>
<div id="content">
<p>Thank you for visiting my website.</p>
</div>
<div id="navigation">
<ul id="mainnav">
<li><a href="#">Home</a></li>
<li><a href="#">Artist's Profile</a></li>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Ordering</a></li>
<li><a href="#">Retail Stockists</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="footer">Copyright goes here.</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Open in new window

CAE5942

ASKER

Thanks for your continued help.

I've uploaded the current display reflecting your changes but unfortunately the shadow is still not showing. Also the footer with the copyright in it should appear without any colour and below the shadow itself. Is this possible?

CAE5942

ASKER

I've taken off the colour on the footer so you can see how the shadows are still not positioned properly. Not sure how to fix this.

ASKER CERTIFIED SOLUTION

KTMC

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

CAE5942

ASKER

Hi,

I worked out why it was different - it was because I had downloaded a different drop shadow than you from the gallery site mentioned above. It's looking really good now which is great - I've uploaded the current files so you can take a look.

Just one thing though: the shadow is being offset from the top and left sides a bit too much, ie. there's too much white space above and to the left of the shadow. Is there a way to adjust this white space by changing one of the css rules or has this got something to do with the shadow images themselves?

I really appreciate your continued help with this.

CAE5942

ASKER

I ended up removing some of the white pixels from both of the corner shadow images and this had the effect of shifting the shadow up. So problem solved. Thanks a million for all your help.

KTMC

Oh! That explains it, and since they're all named exactly the same... wow, I'm surprised you noticed at all... that could have been a real issue...

As for the whitespace you can control it using the background-position attribute. For corner_tr you need to apply a negative value in pixels in place of 'top' so to shit it up 4px your new css for .wrap3 would be:

.wrap3 {
      padding:0 8px 8px 0;
      background-image: url(practiceGraphics/corner_tr.gif);
      background-repeat: no-repeat;
      background-position: right -4px;
}

For the corner_bl you would replace 'left' with -4px which would shift that corner of the shadow to the left 4px.

.wrap2 {
      background-image: url(practiceGraphics/corner_bl.gif);
      background-repeat: no-repeat;
      background-position: left bottom;
}

The good news is that since the rest of the shadow is controlled by another div entirely it will stay in the same spot and appear to expand as you move the others.

Your solution of just altering the pictures will work just fine too and doesn't have to risk a browser incompatibility by using a negative position (only an issue in really old browsers, but if there's a better solution that works for them all, I'd use it)

CAE5942

ASKER

Great - thanks again.

KTMC

Anytime!