Add text sorrounding a series of circles (See image)

[snippet248]

https://imgur.com/m9ycQGq
So I need to add the text in the red squares positions, tried with css shapes, I know how to do it with just one centered big circle, but that’s not the case here
You can check the code here
https://ttestart.experimentosgraficos.com/

[Paulie_D]

A Codepen demo would be more useful.

[snippet248]

This is odd I was pretty sure I posted the codepen snippet.. Anyway here it is: https://codepen.io/Snippet/pen/agqqRx

[uxfed]

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.

[snippet248]

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 text

[wanderval]

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.

https://codepen.io/wanderval/pen/wLYgaZ?editors=0010

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.

Jsbin: https://jsbin.com/yoluquweja/edit?html,js,output
article: https://kaleu.wordpress.com/2011/06/23/posicionamento-em-circulo-javascript/

I hope this helps you.

[snippet248]

Thank you so much!!! Definitively helps!! Wish my Javascript was good enough to fully understand it , which is at bests very basic. Still I’m playing with it :-) If I may I have some questions:

1: ['top'],
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'],
default: []
};
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.. ;-)

[Author]

Posts