1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Issue linking two objects within a <li>

Discussion in 'HTML & Website Design' started by David_D24, Apr 11, 2017.

  1. #1
    Hey all...
    I have a website that I'm working on making updates to. On the homepage is a full page image slider, each with other image elements animating over the main image, which are contained within a <li> item. I am trying to link two of these objects to other pages within the site. When I try, only one of the linked objects will actually have the working link. Any ideas?

    The website is http://classicculinaire.com/index.html, and I'm am referring to two of the overlayed image objects on the first slide.

    Any help you could offer would be greatly appreciated. I'm pasting the code below for the section I am referring to. The bold, red sections are the images I am trying to link.
    SEMrush



    <header class="main-header slider-on" id="top">
                    <div class="main-slider-container">
                        <div class="main-slider" >
                            <ul class="scrollme">
                                <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
                                    <img class="rs-parallaxlevel-1" src="img/slider-images/slider-bg4.jpg" alt="Classic Culinaire chef cooking"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                                    <div class="tp-caption customin customout rs-parallaxlevel-2"
                                        data-x="center"
                                        data-y="center"
                                        data-voffset="-260"
                                        data-customin="x:0;y:-100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:1200;transformOrigin:50% 50%;"
                                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                                        data-start="1000"
                                        data-speed="1500"
                                        data-easing="Expo.easeOut"
                                        data-elementdelay="0.5"
                                        data-endspeed="600"
                                        data-endeasing="Linear.easeNone">
                                        <img src="img/slider-images/culinary_service.png" alt="Culinary & Service" class="animateme"
                                            data-when="exit"
                                            data-from="0"
                                            data-to="0.3"
                                            data-opacity="0"
                                            data-translatey="-80">
                                    </div>
                                    <div class="tp-caption customin customout rs-parallaxlevel-2"
                                        data-x="center"
                                        data-y="center"
                                        data-voffset="-25"
                                        data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.5;scaleY:0.5;skewX:0;skewY:0;opacity:0;transformPerspective:1200;transformOrigin:50% 50%;"
                                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                                        data-start="1500"
                                        data-speed="1200"
                                        data-easing="Expo.easeInOut"
                                        data-endeasing="Linear.easeNone">
                                        <img src="img/slider-images/mealdelivery.png" alt="Excellence" class="animateme"
                                            data-when="exit"
                                            data-from="0"
                                            data-to="0.4"
                                            data-opacity="0"
                                            data-translatey="-70">
                                
                                    </div>
                                    
                                    <div class="tp-caption customin customout rs-parallaxlevel-2"
                                        data-x="center"
                                        data-y="center"
                                        data-voffset="155"
                                        data-customin="x:0;y:80;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:1200;transformOrigin:50% 50%;"
                                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                                        data-start="2700"
                                        data-speed="700"
                                        data-easing="Expo.easeOut">
                                        <img src="img/slider-images/chefservices.png" alt="Cooking Since" class="animateme"
                                            data-when="exit"
                                            data-from="0"
                                            data-to="0.5"
                                            data-opacity="0"
                                            data-translatey="60">
                                    </div>
                                  
                                    <div class="tp-caption customin customout rs-parallaxlevel-2"
                                        data-x="center"
                                        data-y="center"
                                        data-voffset="300"
                                        data-customin="x:0;y:40;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:1200;transformOrigin:50% 50%;"
                                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;"
                                        data-start="4000"
                                        data-speed="800"
                                        data-easing="Power2.easeInOut">
                                        <a href="http://classicculinaire.com/contact.html" class="custom-button button-style1 animateme"
                                            data-when="exit"
                                            data-from="0"
                                            data-to="0.6"
                                            data-opacity="0"
                                            data-translatey="60"><i class="icon-eye"></i>Contact us today!</a>
                                    </div>
                                  
                                </li>
    HTML:
    Thanks!
    David
     
    David_D24, Apr 11, 2017 IP
    SEMrush
  2. daniel27lt

    daniel27lt Active Member

    Messages:
    110
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    98
    Digital Goods:
    4
    #2
    Not to sure if this will help, but give this a try...

    <a href="Your Link"><img src="img/slider-images/culinary_service.png" alt="Culinary & Service" class="animateme"
                                            data-when="exit"
                                            data-from="0"
                                            data-to="0.3"
                                            data-opacity="0"
                                            data-translatey="-80"></a>
    Code (markup):
     
    daniel27lt, May 14, 2017 IP