How to Keep CSS Background Image on top of all divs(breadcrumb arrows)?

Question

I have built a small breadcrumbs example cloning some functionality from Google's design. I have been looking to get the arrows to display on top of each-other so there isn't any white space. I have tried negative margins, possibly positioning but I wasn't able to get anything working.

Below is a link to Google's working example, along with my current demo example and a screenshot of why the breadcrumbs aren't working currently. Appreciate any help, I'm also happy to clarify anything!

Google's working example
Demo(taken offline sorry!)

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

Would you be okay with a solution that uses JavaScript/jQuery? — Saad Imran., Aug 19 '11 at 18:19
You need to apply a different `z-index` to each `li`, with the first having the highest index and decreasing the z-index on each subsequent li. How are you generating the breadcrumbs? Would it be possible to apply a different z-index to each li in the list? — RoccoC5, Aug 19 '11 at 18:26

Michael · Accepted Answer · 2011-08-19T18:50:17.767

4

The Google implementation is using postion: relative; margin-left: -13px in the CSS but at the same time they are using inline styles to give a different z-index to each link like this: image

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

edited Aug 19 '11 at 18:50

answered Aug 19 '11 at 18:29

Michael

763
3
5

you are a life saver thanks so much!! I may use jQuery, but adding different classes to each layer seems more reasonable for this implementation. – Jake Aug 19 '11 at 19:01

score 2 · Answer 2 · answered Aug 19 '11 at 18:28

try this:

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

so they fit on eacht 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 is, nth-child is css3, so it's bad for your cross browser support. You could also add classes to ever li, like "li.first li.second li.third" etc and give them decreasing z-indexes. Then it should work

yeah this is great dude. I think I'm going to use .first, .second, etc. It'll make the development process so much easier. — Jake, Aug 19 '11 at 19:02

score 0 · Answer 3 · answered Aug 19 '11 at 18:32

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

score 0 · Answer 4 · answered Aug 19 '11 at 18:41

Another (somewhat shoddy) way of doing it is to add a wrapper that has the same background image. e.g.

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

for all but the last one.

score 0 · Answer 5 · answered Aug 20 '11 at 09:37

Add an left: -12px; to the styles of the li elements of the breadcrumb. That would only work if their position is set to relative;

Additionally, for my solution to work, add a 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 are making the blog static etc. with no PHP or JavaScript set the z-index manualy.

How to Keep CSS Background Image on top of all divs(breadcrumb arrows)?

5 Answers5