Pk19000 Pk19000 - 1 year ago 80
CSS Question

write in div issue because of after/before in css

I have a code that create a sticky note with html and css. But I have problem when I want to write any thing in yellow area.



#slm {
width: 200px;
vertical-align:100%;
height: 150px;
border-radius: 0 0 10% 0/0 0 40% 0;
background-color: yellow;
positon: relative;
}
#slm:before {
content: '';
display: block;
positon: absolute;
width: 50px;
height: 170px;
border-radius: 0 0 80% 0/0 0 50% 0;
background-color: white;
}

<div id="slm">

slm<br>
Hi
</div>





Can any body help me please? Thanks.

Answer Source

First of all, you have typo in the style position.

Use absolute positioning of the text inside the sticky area by wrapping it in a div.

#slm {
  width: 200px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
}
#slm:before {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}

.text{
      position: absolute;
    top: 10px;
    left: 54px;
    width: 140px;
}
<div id="slm">
   <div class="text">
      slm<br>
      Hi
   </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download