Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Position Image, Right, to Link

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #207343
    osirisweb
    Participant

    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

    #207344
    gcyrillus
    Participant

    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

    #207345
    osirisweb
    Participant

    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?

    http://falconryscotland.co.uk/sf-nav1.JPG

    #207346
    osirisweb
    Participant

    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?

    http://falconryscotland.co.uk/sf-nav1.JPG

    #207347
    osirisweb
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.