?
Solved

CSS Onion Skinned Drop Shadow Problem

Posted on 2008-11-01
13
Medium Priority
?
614 Views
Last Modified: 2013-11-19
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.officelinkonline.com.au/Pauline/index.php

The related css is here:

http://www.officelinkonline.com.au/Pauline/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.

0
Comment
Question by:gwh2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
13 Comments
 
LVL 2

Expert Comment

by:KTMC
ID: 22856949
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

0
 
LVL 2

Expert Comment

by:KTMC
ID: 22857060
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...
0
 
LVL 1

Author Comment

by:gwh2
ID: 22857076
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?
0
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

 
LVL 1

Author Comment

by:gwh2
ID: 22857204
Also, I typed something in the footer and the shadow is now overlapping the footer. Not sure what's going on?
0
 
LVL 2

Expert Comment

by:KTMC
ID: 22859382
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

0
 
LVL 1

Author Comment

by:gwh2
ID: 22859719
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?
0
 
LVL 1

Author Comment

by:gwh2
ID: 22859795
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.
0
 
LVL 2

Accepted Solution

by:
KTMC earned 2000 total points
ID: 22860807
This is very strange... the code is working for me perfectly, and displaying properly, but you're using the same code (apart from an external stylesheet which should make no difference at all, but I tried it anyway to be sure) and it's displaying incorrectly.

I've done one small mod to put the copyright bar outside the effect and it displays properly for me in Safari & Firefox... but so did the last one.

I've uploaded it here so you can look at what it's doing for me:

http://www.kmcdigitaldesign.com/Practice/OnionSkin_Pauline.php

or

http://www.kmcdigitaldesign.com/Practice/OnionSkin_Pauline.html

Tried both... just in case.

I've gone over the code and can't find anything that would account for it... In fact I literally copied your entire code directly into my editor and made the edits to the footer and it still worked.

I can't make it display the way yours is, even with directly copying your code, line-for-line...

 So the same code is displaying differently on your server than mine in the same browser. Which shouldn't be possible...

I give up for tonight, I'm going to sleep on it, hopefully the answer will be visible in the morning.
<!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;
  }
 
#wrapper {
        position: relative;
        text-align: left;
        width: 548px;
        margin-right: auto;
        margin-left: auto;
}
#innerContainer {
	position: relative;
	text-align: left;
	width: 540px;
 
}
 
#header {
	background-image:url(practiceGraphics/header-540x113-clear.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 113px;
	position: relative;
}
 
#content {
	float: right;
	width: 417px;
	height: 402px;
	background-image:url(practiceGraphics/main-417x402-clear.jpg);
	background-repeat:no-repeat;
	background-position: left top;/*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(practiceGraphics/left-side-clear-123x402.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
 
#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;
}
.copyrightBar {
	font-size: 80%;
	padding-top: 1em;
	text-align: right;
	color: #999;
	background-color: transparent;
	padding-right: 1em;
}
</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"></div>
</div>
</div>
</div>
</div><div class="copyrightBar">Copyright goes here.</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:gwh2
ID: 22860961
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.
0
 
LVL 1

Author Closing Comment

by:gwh2
ID: 31512286
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.
0
 
LVL 2

Expert Comment

by:KTMC
ID: 22864954
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)
0
 
LVL 1

Author Comment

by:gwh2
ID: 22864959
Great - thanks again.
0
 
LVL 2

Expert Comment

by:KTMC
ID: 22865137
Anytime!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question