Position: Absolute only makes last button in a carousel correctly clickable |
Position: Absolute only makes last button in a carousel correctly clickable |
zoe9216 |
Apr 17 2023, 03:02 PM
Post
#1
|
Group: Members Posts: 3 Joined: 17-April 23 Member No.: 28,902 |
Hello,
I have been unable to solve this problem for quite some time. My carousel (codepen: https://codepen.io/zoe9216/pen/rNqxdGN) has three slides each with an image, text and a button with a unique href. Problem is: 1) Buttons of first two slides are only partially clickable. Only when I move pointer to a position that overlaps with button on 3rd slide (even when that slide isnt selected) can I click. 2) The href upon clicking is always of the last button. position: absolute on class 'slide-img' is causing this problem. When i change it to position: relative all buttons are perfectly clickable with correct href. However, the display pf slides gets messed up. If anyone has any experience or knowledge of this matter and they can help me I would be obliged. |
pandy |
Apr 17 2023, 05:30 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,735 Joined: 9-August 06 Member No.: 6 |
can click all of the egg like things anywhere and I see different images and content for each button. FF 111.0.1 .
|
Christian J |
Apr 18 2023, 05:34 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
Works in Vivaldi too, but the three eggs are positioned in the middle of the image and description columns.
|
zoe9216 |
Apr 18 2023, 02:00 PM
Post
#4
|
Group: Members Posts: 3 Joined: 17-April 23 Member No.: 28,902 |
Works in Vivaldi too, but the three eggs are positioned in the middle of the image and description columns. The positioning is off due to Codepen not displaying it fully. In Firefox the only link that is followed is of the last button i.e. '/our-work/3' and the only place clickable in all three slides (around the button) is the position of the third and last button. Do you not have this behavior? |
zoe9216 |
Apr 18 2023, 02:16 PM
Post
#5
|
Group: Members Posts: 3 Joined: 17-April 23 Member No.: 28,902 |
can click all of the egg like things anywhere and I see different images and content for each button. FF 111.0.1 . You mean the button with the text 'Explore'? Is it clickable fully for you on all three slides? For me on first slide top half is clickable, on second slide, bottom half. Third is perfect. |
Christian J |
Apr 18 2023, 02:40 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
In Firefox the only link that is followed is of the last button i.e. '/our-work/3' Oh you meant the Explore button? I got confused by pandy's talk about eggs. BTW, it's easier to see the URLs outside of the Codepen frameset here: https://cdpn.io/zoe9216/fullpage/rNqxdGN?anon=true&view= CODE <ul class="slides"> <input type="radio" name="radio-buttons" id="img-1" checked /> <li class="slide-container"> CODE </li> <input type="radio" name="radio-buttons" id="img-2" /> <li class="slide-container"> CODE </li> <input type="radio" name="radio-buttons" id="img-3" /> <li class="slide-container"> FWIW, the above parts are invalid HTML, a UL element can only contain LI as its direct children. |
Lo-Fi Version | Time is now: 5th June 2024 - 12:29 AM |