CODEWITHSUNDEEP
htmltwitter-bootstrapcss
user9727963
user9727963

Reputation:

Adding number in top left corner of Div

I want to add a number to the top left corner of my div's, but whatever I have tried so far has not worked properly.

Here is what I currently have:

enter image description here

Here is what I would like:

enter image description here

Here is the code:

#Office365, #OneDrive {
	  height: 100px;
	  width: 16.259%;
	  display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    background-color: #F2F2F2;
}
<div class="row" id="firstAppRow">
        <div class="col-sm-2" id="Office365" style="padding-top: 20px; font-weight: bold;">
        <span>1</span>
        <div><img src="/TrainingResourceCenter/O365Training/PublishingImages/OVbiWcG.png" height="50px" width="50px" />
        <p>Office365</p>
        </div>
        </div>
        <div class="col-sm-2" id="OneDrive" style="padding-top: 20px; font-weight: bold;">
        <div><img src="/TrainingResourceCenter/O365Training/PublishingImages/wJAtQYP.png" height="40px" width="40px" />
        <p>OneDrive</p>
        </div>
    </div>
</div>

Upvotes: 1

Views: 1178

Answers (3)

Sagwadi Maluleke
Sagwadi Maluleke

Reputation: 46

He, the solution will be to use absolute position for the numbers. Note that the blocks containing the tag with the number will need to be positioned relative so that the numbers are absolute to that block. Here is a sample code

 #Office365,#OneDrive{
    display: inline-block;
    margin-right: 2px;
    background-color: #F2F2F2;

    position:relative;
    border:1px solid black;
    padding: 0 50px;
    text-align: center;
    }

    #Office365 img,#OneDrive img{
    width:100px;
    height: auto;
    }

    .num{
    position: absolute;
    top: 5px;
    left: 5px;
    }
 <div class="row" id="firstAppRow">
        <div class="col-sm-2" id="Office365" style="padding-top: 20px; font-weight: bold;">
        <div><img src="https://png.icons8.com/color/1600/office-365.png" height="50px" width="50px" />
        <p>Office365</p>
          <span class="num">1</span>
        </div>
        </div>
        <div class="col-sm-2" id="OneDrive" style="padding-top: 20px; font-weight: bold;">
        <div><img src="https://bcpsodl.pbworks.com/f/1477585037/onedrive.png" height="40px" width="40px" />
        <p>OneDrive</p>
          <span class="num">2</span>
        </div>
    </div>
</div>

Upvotes: 3

fnostro
fnostro

Reputation: 4591

absolute vs float

.a {
  width: 200px;
  position: relative;
  border: 1px solid gray;
  margin-right:20px;
  display:inline-block;
  vertical-align:top;
}

.viaAbsolute {
  position: absolute;
  top:0;
  left: 0;
  padding: 3px;
  border: 1px solid red;
}

.viaFloat {
  float: left;
  padding: 3px;
  border: 1px solid red;
}
<div class="a">
  <span class="viaAbsolute">
    1
  </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus rhoncus quam quis vestibulum. Cras eu mollis nisl. Pellentesque semper tincidunt placerat.
</div>

<div class="a">
  <span class="viaFloat">
    1
  </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus rhoncus quam quis vestibulum. Cras eu mollis nisl. Pellentesque semper tincidunt placerat.
</div>

Upvotes: 0

Gregor Ojstersek
Gregor Ojstersek

Reputation: 1379

Try assigning 

position: relative;

to the #Office365 and #OneDrive. Also put the images inside those divs.

Then assign 

position: absolute;
left: 1px;
top: 1px;

to #Office365 span and #OneDrive span.

Upvotes: 0

Related Questions