Hi,

 

I am trying to add an arrow to an LI element, just like here http://cssarrowplease.com/ (Mine will be right aligned not top)

 

If you view this page: http://rumble.com.au/technology/ and check out the blue vertical sub-menu you can see that I have added a black arrow to the first LI but the top is slightly missing. This is because, I have it set to left: 96%;, if I move it too left: 100% (like I'm supposed to) it completely disappears.

 

I cannot see why this isn't working like the cssarrowplease site linked above; any help would be much appreciated.

 

Thanks

 

Huw

Can't you target the text with a span, apply the arrow to the span and use padding to move the arrow right?

Is this what your trying to achieve?

 

http://jsfiddle.net/jack_pallot/Gw4wy/

Is this what your trying to achieve?

 

http://jsfiddle.net/jack_pallot/Gw4wy/

That's exactly what I want. I have made some changes to match your code but still no luck?

Try removing any reference to z-tabs / z-tabs-nav ect. There seems to be a lot of CSS selectors that could be preventing the code from running correctly.

 

I have updated the code to include a generic wrapper you can use throughout your site instead http://jsfiddle.net/jack_pallot/Gw4wy/2/.

Try removing any reference to z-tabs / z-tabs-nav ect. There seems to be a lot of CSS selectors that could be preventing the code from running correctly.

 

I have updated the code to include a generic wrapper you can use throughout your site instead http://jsfiddle.net/jack_pallot/Gw4wy/2/.

 

I think the plugin i'm using is interfering with it all. Even when I add in !important it still doesn't work. I think I'll add in a span and see if I can do it that way? Thanks for you help.

Can't you target the text with a span, apply the arrow to the span and use padding to move the arrow right?

Tried that with no luck... I think it's the plugin I have active on the site... Contacted the author.

zozo tabs css line 47 overflow hidden your problem

I have a tutorial on my site for css triangles:

 

http://www.rwsmithdesigns.com/blog/css-triangles/

 

To add them to other elements to make something similar to a speech bubble you wanna do the following:

.parent {

position: relative;

width:100px;

height: 60px;

background: #000;

}

.parent:after {

content: "";

position: absolute;

top: 0;

left: 50%;

margin-top: -20px;

margin-left: -20px;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-bottom: 20px solid #000;

}

The above will place the triangle on top of the parent box and center it. Notice the margin-top being equal to the height to push it out of the container so it sits exactly above. the negative margin left bumps it a bit to perfectly center it using half the width to achieve this.

The code can easily be modified to suit your needs.

 

Codepen; http://codepen.io/anon/pen/Iwyjr

zozo tabs css line 47 overflow hidden your problem

This and a bit more tweaking fixed it! Thanks