write in div issue because of after/before in css

Question

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> 

Thanks.

Answer 1

Firstly, there's a typo in your code: you've written positon instead of position!

Secondly, you need to define the top & left properties to the "position" rule for both the ID's in your css.

I would then add some padding to the #slm element, and reduce some of the width. That should then give you then result you intended:

Example: https://jsfiddle.net/0wrkzvzp/

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

Answer 2

I think you are looking for a solution like this: https://jsfiddle.net/neya0v76/4/

wrap the text in a <p> tag and set it to an absolute position like this:

HTML

<div id="slm">
  <p>slm<br> Hi</p>
</div>

CSS

#slm p {
  position: absolute;
  top: 0;
  left: 70px;
}

Answer 3

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> 

Answer 4

You have to use position instead of positon !

It's better to have some container for your texts.

Try this:

HTML:

<div id="slm">
  <div class="inner">
    slm
    <br>
    hi
  </div>
</div>

CSS:

#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;
}

#slm .inner{
  width: 180px;
  margin-left: 55px;
}

Working example: https://jsfiddle.net/jxsrp86t/2/

Answer 5

try the following:

 #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{ top: 35px; position: absolute; position: inherit; text-align: center; } 

 <div id="slm"> <div class="text">slm</div> <div class="text">hi</div> </div>