1

Apologies if this has been asked and answered already, as I was not able to find an appropriate solution to this problem.

I need to work on a site navigation that require some numbers to be placed inside circles. The circles will increase in diameter based on the length of the text inside. I'm looking for a very elegant, preferably css only solution for this. Please note the alignment of the circles here with respect to the entire row and label text on the mock up attached. Here is the mockup

Evaldas Buinauskas
  • 13,739
  • 11
  • 55
  • 107
Anand A Nair
  • 31
  • 3

1 Answers1

1

It required some CSS trickery to get this working, but this works in the latest version Chrome and Firefox. Let me know if you have any other questions.

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #9653DA;
  font: 600 14px sans-serif;
}
.nav-table {
  display: table;
  text-align: center;
}
.nav-row {
  display: table-row;
}
.nav-col {
  display: table-cell;
}
.text {
  margin: 1em;
}
.icon {
  display: inline-block;
  border-radius: 100%;
  border: 2px solid;
  min-width: 10px;
  padding: 0.5em;
  margin: 0.5em;
}
.icon div {
  position: relative;
  height: 0;
  padding: 50% 0;
  top: -7px; /* Half of font-size, in our case it is (14px / 2) */
}
<div class="nav-table">

  <div class="nav-row">
    
    <div class="nav-col">
      <div class="icon">
        <div>20</div>
      </div>
    </div>
    
    <div class="nav-col">
      <div class="icon">
        <div>300</div>
      </div>
    </div>
    
    <div class="nav-col">
      <div class="icon">
        <div>50</div>
      </div>
    </div>
    
    <div class="nav-col">
      <div class="icon">
        <div>1</div>
      </div>
    </div>
  </div>
  
  <div class="nav-row">
    
    <div class="nav-col">
      <div class="text">Japanese</div>
    </div>
    
    <div class="nav-col">
      <div class="text">Main Course</div>
    </div>
    
    <div class="nav-col">
      <div class="text">Non Vegetarian</div>
    </div>
    
    <div class="nav-col">
      <div class="text">Beginners</div>
    </div>
    
  </div>


</div>
Jason
  • 4,905
  • 1
  • 30
  • 38
  • Thank you! This is brilliant. I was just about to start with a js solution and got your answer. Will try implementing this and let you know. Only question, is it possible to get the number and label together inside one parent? I would like this to be as dynamic as possible. – Anand A Nair Oct 15 '15 at 01:49
  • @AnandANair that's great to hear! JavaScript would've made it easier indeed. I'm glad it at least partially answered your question, could you mark it as answered? – Jason Oct 15 '15 at 09:54