- This topic is empty.
June 18, 2019 at 7:00 pm #291749June 18, 2019 at 11:13 pm #291757Paulie_DMember
A Codepen demo would be more useful.July 4, 2019 at 9:10 pm #292479
This is odd I was pretty sure I posted the codepen snippet.. Anyway here it is: https://codepen.io/Snippet/pen/agqqRxJuly 4, 2019 at 10:13 pm #292480uxfedParticipant
You’ll need to remove the margin-top style from .etapa-1-2, as well as create specific classes for each number, because each one’s style will need to be different. After that, use those new classes to tweak the top and left styles until they’re in the position you want.July 5, 2019 at 12:17 am #292482
I know how to do that but can’t it be done differently, what happens if for example I add another bubble or I remove one. I need it to automatically adjust, and right now everything does adjust itself (try deleting a li) exception for that numbered textJuly 7, 2019 at 12:52 pm #292637wandervalParticipant
I would do something similar with it, creating some templates already know the principals shapes
whereas if the number of items is formed by many items I would try a default shape that calculate using (sin and cos) radian calc, so you could make some ranges base on degrees to assign the class positions based in ranges degrees.
ex: using sin and cos the original code was written in Portuguese I put some comments to help you to understand the code, there is a article also in Portuguese you can translate for English.
I hope this helps you.July 7, 2019 at 6:55 pm #292639
2: ['top', 'bottom'],
3: ['top', 'bottom', 'bottom'],
4: ['top', 'left', 'bottom', 'right'],
5: ['top', 'top-left', 'bottom', 'bottom', 'top-right'],
6: ['top', 'top-left', 'bottom-left', 'bottom', 'bottom-right', 'top-right'],
I could replicate this with css.. but that’s not the idea I guess and use instead radians… What does the duplicated bottoms do? for example for item 3 or 5? Ok this is a exam that has to be finished in some days so for the time being I will go with the css replicated way but then on I will work on it.. ;-)
- The forum ‘CSS’ is closed to new topics and replies.