I have to do this: – UL has x LIs (are generated dynamically) – Maximum Size of the UL is 80% – On the left Side, there has to be a 10% Gap – On the right Side the gap has to be at least 10% – The complete width (100%) has to be filled with white background-color – It’s not possible to place something behind the UL, because it has to be partially transparent

Like this: http://up.picr.de/16113332vj.jpg

I had a few approaches, in my code-sample you see the latest – but the result is still not as desired. Here is a screenshot of the code-sample above, with openend inspector. As you can see, the right filler is to big an lies behind the UL: http://up.picr.de/16123504sm.jpg

…or is it just not possible without JS?

I forgot to post the 2nd picture, updated the first post.

A few words:

I do have a fullscreen background-image behind that stuff.
The UL is my navigation. It should sit on a white background bar which goes 100% from left to right.

I want a small transparent triangle to appear over the active navigation-item (li). Transparent means, that you can see the fullscreen background-image through it. I solved this with a PNG; that means all LIs have a white BG-color, and only the active has a PNG with that transparent triangle as bg-img. Thats why I cannot put a 100%-width and white-bg-color DIV behind the UL.

Because the UL should have a max-width of only 80% I have to fill up the left and right gap.
Left is easy, because the nav (ul) is floating left and therefore its always 10% – but right side is tricky, because I don’t know the width of the UL.

Thank you Andy; I made an updated Version:
http://codepen.io/anon/pen/oFGBm

The blue DIV should fill up the width to 100%
The red is my BG-IMG, which also appears behind the active List-Item.

I want a small transparent triangle to appear over the active navigation-item (li). Transparent means, that you can see the fullscreen background-image through it.

Not going to happen, I think…if there is a background of any kind behind the a . li or ul you can’t see through it to the bg image.

But I’ll have a think.

@Pauli – sorry, I forgot to mention, the (SASS)code is like this; the transparency-thing is already working as desired – I only have to fill up that $§”%”§$-gap :

display: inline-block; background-color: #fff; padding: 2% 2.5% 0; text-align: center; text-decoration: none; color: #444; text-transform: uppercase; padding-bottom: 0.5%; display: block; border-bottom: 3px solid #fff; .active { background-image: url(../img/nav_active_bg.png); background-repeat: no-repeat; background-color: transparent; background-position: center 0; border-color: $yellow;

Here you go. http://codepen.io/Paulie-D/pen/oHLsj

I had to throw in a couple of filler divs which I’m not happy about…I feel there should be a more elegant solution.

Pseudo elements come to mind but JS/JQ makes the menu usable if the number of li is dynamic .

Here’s a fork with two examples.

The first still needs work to get the text on top of the transparency and only works if the main background image happens to be fixed.

The second example should work fine

http://codepen.io/wolfcry911/pen/tgyJr

Thank you so much guys – you are great!

I picked the second solution from wolfcry911 – which is close to perfekt – because it works without JS and also without filler DIVs in the HTML-Section.

The only little thing I had to change was putting a “top: 0” in the :before/:after section because Opera Browser did put the right filler above the UL, so this is the final code for me:
http://codepen.io/anon/pen/tebJA

Thank you all again!

I’m so excited about finding a solution for displaying this in IE7. Not. I think I’ll put this to the end of the project ;)