Solved

CSS Onion Skinned Drop Shadow Problem

Posted on 2008-11-01
13
579 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
  • 7
  • 6
13 Comments
 
LVL 2

Expert Comment

by:KTMC
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 1

Author Comment

by:gwh2
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 1

Author Comment

by:gwh2
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Great - thanks again.
0
 
LVL 2

Expert Comment

by:KTMC
Comment Utility
Anytime!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now