[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Transparent sidebar shadow - layered

Posted on 2011-09-15
11
Medium Priority
?
298 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
[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
  • 4
  • 4
  • 3
11 Comments
 
LVL 16

Expert Comment

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

Author Comment

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

Expert Comment

by:SSupreme
ID: 36546320
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.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36546498
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
ID: 36546670
@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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36546699
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
ID: 36546701
If you check out the link, I think I got it. Just need export a new image.
0
 
LVL 1

Author Comment

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

Expert Comment

by:SSupreme
ID: 36546743
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 2000 total points
ID: 36546750

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
ID: 36546757
Anyway, looks like you almost have it. make the png transparent and move the map.

Cheers.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

650 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