Adaptive positioning of elements in the circle



  • I need the same elements of html to be built in a circle at the centre of another element. It also needs to be taken into account that they do not become ellips in different screen permits, but always remain round. This task is complicated by the fact that similar adaptability on mobile devices is mandatory.

        <div class="content mh20 sans-serif">
            <div class="circle circle__main">
                <div class="circle__inv">
                    <span class="circle__text"> Выберите интересующую тему </span>
                </div>
            </div>
            <div class="circle">
                <div class="circle__inv">
                    <span class="circle__text">Что-то</span>
                </div>
            </div>
        </div>
    

    And css

    .circle {
    width:  10%;
    background: #900C3F;
    border-radius:  50%;
    text-align: center;
    font-size:  18px;
    margin: 0 auto;
    cursor: pointer;
    transition: 1s ease-in;
    overflow:   hidden;
    position:   absolute;
    }
    .circle:hover {
    background: #0C905D;
    }
    .circle__main {
    width:  20%;
    position:   static;
    }
    .circle__inv {
    width:  100%;
    height: 100%;
    padding-top:    50%;
    }
    .circle__text {
    transform:  translateY(-50%);
    display:    inline-block;
    }
    


  • Let's say we're in. css Adaptive circles and adaptive squares are the same, that is. border-radius It's just a pseudo circle.

    Decision:

    1 We're gonna need two parents' containers for the solution.

    2. Adaptive square created by padding-(top|bottom): 100%;♪ The percentage in this case comes from breadth of the parent container (this is a feature).

    .parent {
      width: 100px;
    }
    .child {
      height: 0;
      padding-bottom: 100%; // размер .child будет 100px на 100px
    }
    

    3. The central circle can be positioned in many ways, I prefer through. absolute

    .circle_main {
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      margin: auto; //фокус именно в margin: auto;
      width: 30%; //к примеру
      height: 30%; //к примеру
    }
    

    4. To be honest, you're gonna have to use js to properly calculate the coordinates inside the circles.

    http://codepen.io/olegatro/pen/jWZrgm

    1. Advise to change the position so that the circle is on the left or right (to change the width of the window)
    2. The circles may be altered at random (see block) html)
    3. It's done as a percentage, so full adaptive.
    4. The most important thing is to choose the size of the circle.
    5. Examples include the Preprocessor(s)stylusand the template(s)jadeIf they're not familiar, there's a button. View Compiled♪ Same thing. js
    6. Adaptive text implemented through treason meals vwIt doesn't work everywhere, it's better to test or find another way to change the size of the text.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2