Looking for help for a list's css (ul li)

Question

I'm looking for help for my css code to make a list looking something like the below with an image in the center (the blue circle).

I never done something like this, so i don't have any idea to how i can code it that's why i came here. Thank you in advance !

Related - http://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css/39021942#39021942 — Paulie_D, Aug 19 '16 at 17:34

Chris Simmons · Answer 1 · 2016-08-19T17:37:30.613

Personally, I would use javascript to accomplish this but if you want to learn more about css basics this is a good exercise. This is a very basic example done with absolute positioning.

#outerCircle{
      width:100px;
      height:100px;
      position:Absolute;
      top:50%;
      left:10%;
      transform:translate(0,-50%);
     border:2px solid black;
     border-radius:50%;
    }
    
    #innerCircle{
      background:darkslategrey;
      width:80%;
      height:80%;
      margin:auto;
      margin-top:-5px;
      border-radius:50%;
    }
    
    #floatingElements li{
      list-style-type:none;
      height:10px;
      width:10px;
      border-radius:50%;
      background:red;
      position:absolute;
    }
    #floatingElements li:nth-child(1){
      top:5px;
      right:15px;
    }
    #floatingElements li:nth-child(2){
      top:25px;
      right:-1px;
    }
    #floatingElements li:nth-child(3){
      top:55px;
      right:-5px;
    }
    #floatingElements li:nth-child(4){
      top:80px;
      right:7px;
    }

    <div id="outerCircle">
    <div id="innerCircle">
    <ul id="floatingElements">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </div>
    </div>

you could create a stack snippet too – Aziz Aug 19 '16 at 17:30 — Aziz, Aug 19 '16 at 17:30
Thank you for the suggestion, it's added – Chris Simmons Aug 19 '16 at 17:33 — Chris Simmons, Aug 19 '16 at 17:33

score 1 · Accepted Answer · answered Aug 19 '16 at 17:25

I would recommend checking for compatibility issues, but you can achieve something similar if you abandon your <ul> (at least I could not get a list to function properly) and can use shape-outside

.wrapper .circle {
  float: left;
  border-radius: 50%;
  -webkit-shape-outside:circle();
  shape-outside:circle();
  margin-right: 25px;
}

.wrapper .circle-list p {
  margin: 6px 0;
}
.wrapper .circle-list p:before {
  content: "\2022\A0";
}

<div class="wrapper">
  <img src="http://placehold.it/150x150/" class="circle" />
  
  <div class="circle-list">
    <p>This is a line of text</p>
    <p>This is also a line of text</p>
    <p>Oh my God the lines they won't stop!</p>
    <p>Run you fool!  They are coming!</p>
    <p>It's too late!  They know where you are!</p>
  </div>
</div>

Essentially we just use the .circle-list element to replicate list-style behavior with the :before pseudo-class to insert a bullet and space. Other than that it's making use of shape-outside to create a simple circular wrapper.

thanks that's exactly what i was looking for, seems better than using the — Hachim AlaOui, Aug 19 '16 at 17:34

score 0 · Answer 3 · answered Aug 19 '16 at 17:45

This is a simple solution, though it's using all 'magic' numbers. You should probably make an equation to calculate the position of each list item if you plan to use this in multiple sizes and places across your site.

https://jsfiddle.net/5db8oLL6/

<ul class="list">
  <li class="list__item">Item</li>
  <li class="list__item">Item</li>
  <li class="list__item">Item</li>
  <li class="list__item">Item</li>
</ul>

.list {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: blue;
  box-shadow: 0 0 0 10px #fff,
              0 0 0 11px #333;
}

.list__item {
  position: absolute;
}

.list__item:nth-child(1) {
  top: -10px;
  right: -35px;
}

.list__item:nth-child(2) {
  top: 12px;
  right: -52px;
}

.list__item:nth-child(3) {
  top: 43px;
  right: -53px;
}

.list__item:nth-child(4) {
  top: 70px;
  right: -35px;
}

Looking for help for a list's css (ul li)

3 Answers3