8

I created this code, but I don't able to put the icon on the right corner of div with class valori.

Here the desired result :

enter image description here

Here the code :

HTML

<div class="circletop">
<div class="numberpr">3° anno</div>
<div class="lordo">Valore lordo stimato</div>
<!--I add div icon here-->
<div class="icon"></div>
<div class="valori"> <?=$min3_anno ." - " . $max3_anno?></div>
</div>

Here my fiddle : https://jsfiddle.net/5g42Lx7n/ I need to add the icon in the top right corner like image.

thanks

connexo
  • 53,704
  • 14
  • 91
  • 128
Em1991
  • 95
  • 1
  • 1
  • 4

5 Answers5

7

Check https://jsfiddle.net/bgo2e5zk/4/

.icon{position:absolute;right:0;top:-15px}
.valori{position:relative;}


I put the icon inside .valori, then add position:relative to .valori and position:absolute to .icon, and to finish, set top and left to the icon to positioning it.

Roy Bogado
  • 4,299
  • 1
  • 15
  • 31
  • can you please tell me , why did you add `position:relative` to valori ? i dont know how to use combinatoin of child absolute and parent relative, is there any tutorial to guide about this concept? – Rohan Devaki Jan 16 '23 at 06:46
5

You can add an icon like your showing image, here is the solution

HTML:-

<div class="circletop">
  <div class="numberpr">3° anno</div>
  <div class="lordo">Valore lordo stimato</div>
  <!--I add div icon here-->
  <div class="icon">my icon</div>
  <div class="valori"> &euro; 65.000 - &euro; 67.000</div>
</div>

CSS:-

.circletop {
  /* circle styles */
  width: 300px;
  height: 300px;
      font-family: Raleway;
  border: 1px solid #222;
  border-radius: 50%;
  margin: 0 auto;
      box-shadow: 0 0 20px #ccc;

  /* become a flex container */
  /* its children will be flex items */
  display: flex;
  /* place items in column */
  flex-direction: column;
  /* center flex items horizontally */
  align-items: center;
  /* center all content vertically */
  justify-content: center;
}

/* simulate one more item to "balance" dex text */
.circletop:before {
  content: "\A0";
  visibility: hidden;
}

.lordo {
    color: #45cec8;
           padding-top: 10px;
    padding-bottom: 25px;
    font-weight: bold;
        font-size: 19px;
}

.valori {
    border-radius: 50px;
    background: #05c6bf;
    padding: 14px;
    width: 100%;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 9px #45cec8;
        font-size: 25px;
    font-weight: bold;
}
.icon {
    position: relative;
    bottom: -19px;
    right: -162px;
}
g8bhawani
  • 674
  • 4
  • 8
1

Put the icon div inside valori div and set valori to position:relative and icon to position:absolute. See code below

.circletop {
  /* circle styles */
  width: 300px;
  height: 300px;
      font-family: Raleway;
  border: 1px solid #222;
  border-radius: 50%;
  margin: 0 auto;
      box-shadow: 0 0 20px #ccc;
  
  /* become a flex container */
  /* its children will be flex items */
  display: flex;
  /* place items in column */
  flex-direction: column;
  /* center flex items horizontally */
  align-items: center;
  /* center all content vertically */
  justify-content: center;
}

/* simulate one more item to "balance" dex text */
.circletop:before {
  content: "\A0";
  visibility: hidden;
}

.lordo {
    color: #45cec8;
           padding-top: 10px;
    padding-bottom: 25px;
    font-weight: bold;
        font-size: 19px;
}

.valori {
    border-radius: 50px;
    background: #05c6bf;
    padding: 14px;
    width: 100%;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 9px #45cec8;
    font-size: 25px;
    font-weight: bold;
    position: relative;
}
.icon {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  right: -5px;
  top: -5px;
}
<div class="circletop">
  <div class="numberpr">3° anno</div>
  <div class="lordo">Valore lordo stimato</div>
  <!--I add div icon here-->
  <div class="valori"><div class="icon"></div> <?=$min3_anno ." - " . $max3_anno?></div>
</div>
Hamza Arab
  • 152
  • 5
1

You need to position your icon. I have used a dummy icon, you can try using yours and play with the position that suits your need.

.circletop {
  /* circle styles */
  width: 300px;
  height: 300px;
      font-family: Raleway;
  border: 1px solid #222;
  border-radius: 50%;
  margin: 0 auto;
      box-shadow: 0 0 20px #ccc;
  
  /* become a flex container */
  /* its children will be flex items */
  display: flex;
  /* place items in column */
  flex-direction: column;
  /* center flex items horizontally */
  align-items: center;
  /* center all content vertically */
  justify-content: center;
}

/* simulate one more item to "balance" dex text */
.circletop:before {
  content: "\A0";
  visibility: hidden;
}

.lordo {
    color: #45cec8;
           padding-top: 10px;
    padding-bottom: 25px;
    font-weight: bold;
        font-size: 19px;
}

.valori {
    border-radius: 50px;
    background: #05c6bf;
    padding: 14px;
    width: 100%;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 9px #45cec8;
        font-size: 25px;
    font-weight: bold;
}

.imageRight {
  position: relative;
  float: right;
  top: -20px;
  right: -10px;  
}
<div class="circletop">
  <div class="numberpr">3° anno</div>
  <div class="lordo">Valore lordo stimato</div>
  <!--I add div icon here-->
<div class="icon"></div>
  <div class="valori"> <?=$min3_anno ." - " . $max3_anno?><img class="imageRight" src="https://img.icons8.com/windows/24/000000/checkmark.png"></div>
</div>
ScrapCode
  • 2,109
  • 5
  • 24
  • 44
1
.valori {
     position: absolute;
     right: 0;
     top: 0;
     }

there can be unneeded paddings and margins. If so:

.valori {
     position: absolute;
     right: 0;
     top: 0;
     margin: 0;
     padding: 0;
     }

otherways add this:

z-index: 1000;
john alcantara
  • 77
  • 1
  • 7