Forums

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

Home Forums CSS Add text sorrounding a series of circles (See image)

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #291749
    snippet248
    Participant

    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/

    #291757
    Paulie_D
    Member

    A Codepen demo would be more useful.

    #292479
    snippet248
    Participant

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

    #292480
    uxfed
    Participant

    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.

    #292482
    snippet248
    Participant

    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

    #292637
    wanderval
    Participant

    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.

    #292639
    snippet248
    Participant

    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.. ;-)

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