Solved

Transparent sidebar shadow - layered

Posted on 2011-09-15
11
283 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
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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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 500 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP.net Fit 3 divs on screen side by side 3 25
Change div area and length 1 26
CSS: Making responsive table look nicer 7 24
Why a span is lower 2 20
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

776 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