Geek Answers Handbook

How to save CSS background image on top of all divs (arrows with palette)?

I built a small breading example that clones some features from Google design. I was looking for the arrows to appear on top of each other, so there is no space. I tried negative margin, maybe positioning, but I couldn’t work anything.

Below is a link to a working Google example, as well as my demo and a screenshot of why crackers don't work at the moment. Appreciate any help, I'm also happy to clarify something!

Current screenshot: http://f.cl.ly/items/3H2Z3S3R2v0H3V1r3S3L/breadcrumbs-error.png (sorry this was also deleted!)

+4
source share
5 answers

The Google implementation uses postion: relative; margin-left: -13px postion: relative; margin-left: -13px in CSS, but at the same time they use inline styles to give different z-index for each link as follows: image

Use javascript or your backend script to scroll through each link and give each link a lower z-index.

+4
source

try the following:

 .crumbs li { display: inline; float: left; margin-right: -11px; position: relative; }

so that they match each other. now add this:

 .crumbs li:nth-child(1) { z-index:10; } .crumbs li:nth-child(2) { z-index:9; } .crumbs li:nth-child(3) { z-index:8; }

etc.

The only problem: nth-child is css3, so this is bad for supporting your cross browser. You can also add classes to everything, for example, "li.first li.second li.third", etc. And give them decreasing z-indices. Then it should work

+2
source

Well, Google uses sprites, relative positioning, and incremental z-indexes. I think you should go with the same technique. They implement z-indexes as an inline style with the style="" attribute, which seems appropriate in this situation, especially if they are generated using PHP later.

0
source

Another (somewhat crappy) way to do this is to add a wrapper that has the same background image. eg.

 <li> <div style="float: left; background-image: url('img/bg-crumbs.png');"> <a href="#">2011 Writing</a> </div> </li>

for all but the last.

0
source

Add left: -12px; to the styles of cracker li-elements. This will only work if their position is set to relative;

Also, for my solution to work, add PHP or JavaScript, for example, which add to each element style = "z-index: 10;". The script should automatically increase the z-index property. If you make the blog static, etc. Without PHP or JavaScript, install z-index manually.

0
source

More articles:


All Articles