- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi folks,
From the screen captures, you can see what I am trying to accomplish, however without success…
Image 1: http://www.falconryscotland.co.uk/fs-menu-link1.jpg
Image 2: http://www.falconryscotland.co.uk/fs-menu-link2.jpg
I’ve tried the border-right-image but doesn’t work in any browser!
Can anyone please help me accomplish what I am trying to achieve? — I’d be every so grateful!!
HTML+CSS+Mockup is at: http://codepen.io/anon/pen/dYbQqv
you can use a pseudo element and filter the first or last li:
…
#falconrynavlist li:not(:last-child):after {
content:”;
display:inline-block;
width:10px;
margin-left:10px;
height:2.5em;
vertical-align:middle;
background-color:red;
background:url(http://www.falconryscotland.co.uk/fs-menu-link1.jpg) 140px 50%
}
…
http://codepen.io/gc-nomade/pen/pjzQQm
exemple using your screen capture to show the idea
Thank you so much for that gcyrillus!
Works a treat — although when I apply it to my stylesheet, this is what appears (unlike the “smooth” outcome shown in your code via codepen…)
Any ideas why this is happening?
Thank you so much for that gcyrillus!
Works a treat — although when I apply it to my stylesheet, this is what appears (unlike the “smooth” outcome shown in your code via codepen…)
Any ideas why this is happening?
EDIT :: GCYRILLUS’ SOLUTION WORKS 100%
Never-mind, gcyrillus, I edited your image link you provided and used my own, however when I just copied/paste your code with your image source, it all works perfectly!
Thank you ever so much gcyrillus – you’ve saved my day and taught me something new! Many, many thanks!!
Jamie