Solved

Transparent sidebar shadow - layered

Posted on 2011-09-15
11
282 Views
Last Modified: 2012-06-21
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
Comment
  • 4
  • 4
  • 3
11 Comments
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
I can see shadow in all browsers, and there is no gap. Please provide a screenshot.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
See attached and look at the right where the img is  Img example
0
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
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
 
LVL 25

Expert Comment

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

Author Comment

by:catonthecouchproductions
Comment Utility
@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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 25

Expert Comment

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

Author Comment

by:catonthecouchproductions
Comment Utility
If you check out the link, I think I got it. Just need export a new image.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
Think you nudged me in the right direction. Thanks.
0
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
Comment Utility

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
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
Anyway, looks like you almost have it. make the png transparent and move the map.

Cheers.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …

728 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

14 Experts available now in Live!

Get 1:1 Help Now