How to add a header in top right corner of a textarea like in css tricks

user_17005696 0
Viewed 160

I have made a textarea but I want tomake a header writing "HTML" in the top right corner in small letters like css-tricks.

My code:

<code><pre><textarea rows="16" cols="60" readonly style="resize:none; font-size: 18px;border:8px ridge #ff0000;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en" dir="ltr"&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title>Button Ripple Effect | #Programmer&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div class="wrapper"&gt;
         &lt;div class="btns"&gt;
            &lt;a href="#"&gt;Button 1&lt;/a&gt;
            &lt;a href="#"&gt;Button 2&lt;/a&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;
</textarea></pre></code>
textarea css html
3 Answers

Just need a bit of CSS. You may want to use a class selector instead, though.

pre {
    position: relative;
    display: inline-block;
}

pre::before {
    position: absolute;
    top: 10px;
    right: 10px;
    content: "HTML"
 }
<pre><textarea rows="16" cols="60" readonly style="resize:none; font-size: 18px;border:8px ridge #ff0000;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en" dir="ltr"&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title>Button Ripple Effect | #Programmer&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div class="wrapper"&gt;
         &lt;div class="btns"&gt;
            &lt;a href="#"&gt;Button 1&lt;/a&gt;
            &lt;a href="#"&gt;Button 2&lt;/a&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;
</textarea></pre>

user_158798620

It's easy if you remove textarea element. Because I think you don't need it. To do that:

  1. Add a span tag before any code.
  2. Optional: Add (an id || a class)
  3. Write Html in span tag.
  4. In CSS set code tag's position to relative
  5. In CSS set span tag's position to absolute
  6. Style the span For example:
background: hsla(0, 0%, 0%, 0.3);
color: white;
padding: 6px 8px;
border: none;
outline: none;
/* Below gives it full round corners */
border-radius: 999px;
  1. Then set it's position to right top corner:
top: 5px;
right: 5px;
transform: translate(-50%, -50%);
  1. Your Done!
    Note: If you are unfamiliar with some of the top propersties search css that property.
    For example CSS outline

The final:

<pre><code>
<span class="tag">HTML</span>
<!-- Your codes -->
</code></pre>

And:

pre > code {
  position: relative;
}
.tag {
  position: absolute;
  top: 5px;
  left: 5px;
  transform: translate(-50%, -50%);
  color: white;
  background: hsla(0, 0%, 0%, 0.3);
  padding: 6px 8px;
  font: 300 10px sans-serif;
  border: none;
  outline: none;
  border-radius: 999px;
}
user_163743500

You should learn a CSS Grid Layout Module.

Here you have A Complete Guide to Grid.

In this use case, a CSS Grid is a bit like "Shooting birds with a cannon" but it is a great CSS tool that I am certain that you should learn and you will be grateful that you did.

It will eliminate such problems with positioning elements like in the GIF below: enter image description here

I assume that You want to achieve a similar effect like in this snippet:

header {
    display: grid;
    justify-items: end;
}
<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Button Ripple Effect | #Programmer</title>
</head>

<body>
<header>
    <span class="logo">HTML</span>
</header>

<div class="wrapper">
    <div class="btns">
        <a href="#">Button 1</a>
        <a href="#">Button 2</a>
    </div>
</div>
</body>
</html>

For future posts please add more info on what did you tried to achieve your goal and maybe add a sketch picture created eg. in Paint or handmade.

user_21939960
Related