Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

Transparent sidebar shadow - layered

On a site I am working on here: http://goo.gl/Iz8TC If you notice to the right of the left sidebar you see the shadow, but the white gap to the right.

What would be the best way that I could get that shadow to appearing in that same position when that sidebar is present across browsers/resolutions?

Then I would be able to bump content in to the left so it appears like its going under it.

Thanks.
0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 4
  • 4
  • 3
1 Solution
 
SSupremeCommented:
I can see shadow in all browsers, and there is no gap. Please provide a screenshot.
0
 
catonthecouchproductionsAuthor Commented:
See attached and look at the right where the img is  Img example
0
 
SSupremeCommented:
I think you can add this image(shadow) to a same div as left-sidebar, by extending it and to z-index to left-sidebar div.
But you need to make image transparent.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Kyle HamiltonData ScientistCommented:
The page_content div has a padding of 21 px on the left. The map is positioned 21px to the right of the side bar because of the page_content padding. And even if you remove the padding, the map will be positioned OVER the background image (the shadow) of the div it is sitting in (page_content).

You need to rethink the layout. I would put the shadow on the sidebar and make sure it is ABOVE the content and transparent. You'll need to redo a whole bunch of stuff.

0
 
catonthecouchproductionsAuthor Commented:
@SSupreme, then I cant get the bar to extend down even with height 100%. I tried that before posting on EE. I dont think I want to make the whole sidebar float above it with absolute.

@kozaiwaniec I know, its like that because it was the easiest solution at the time to get the PSD sliced. And then im here trying to figure that fix out. I know the gap from the padding and if its gone, the shadow is gone.

You're saying z-index and position:absolute of the sidebar?
0
 
Kyle HamiltonData ScientistCommented:
I don't think you'll necessarily need absolute positioning on the sidebar, depending on how you rewrite the css. But the bg image can't be in the page_content because the map will sit on top of it. It should to be in the sidebar.

I started adjusting the css for you, but there are a lot of other dependencies that would have to be adjusted, so I stopped. Sorry. There's just a whole bunch of other stuff that I would rewrite to make this work to look like you want it.

If you're open to solving it with a little javascript, that might be easier to implement on top of what you already have. I'll give you the code if you want. Let me know.
0
 
catonthecouchproductionsAuthor Commented:
If you check out the link, I think I got it. Just need export a new image.
0
 
catonthecouchproductionsAuthor Commented:
Think you nudged me in the right direction. Thanks.
0
 
SSupremeCommented:
Another solution is to make separate (third) div in "top_sub_content" with shadow image as background, and using z-index to position it in front on content. Width will be fixed, and for height you can use this plugin here http://www.cssnewbie.com/equalheights-jquery-plugin/ it will equalize shadow div to "sidebar" or "page_content".
0
 
Kyle HamiltonData ScientistCommented:

To use your existing layout, you could do the following:

1. Remove the shadow image from your CSS.
2. make the shadow image png transparent.

3. Add the jquery library (or rewrite the code below using straight up JS, yuk)
<script type="text/javascript"  src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

4. move the #googlemap to the left in the CSS.
margin-left: -21px; /* moving the map */

5. position the #page_content
position:relative;

6. insert the script below the jquery library script. Both at bottom of page.




 
<script>
$(function(){

var h = $("#sidebar").height();

$("#page_content").append("<div style='height:"+h+"px; background:url(http://skimaine.kgconnect.com/wp-content/themes/ski-maine/images/sidebar_shadow.png) repeat-y; width:21px; display:block; position:absolute; top:0; left:0;'></div>");
});
</script>

Open in new window



Let me know how you get on...
0
 
Kyle HamiltonData ScientistCommented:
Anyway, looks like you almost have it. make the png transparent and move the map.

Cheers.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 4
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now