• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 301
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

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!

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