Home/ Questions/Q 7968983
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:09:49+00:00

How to code for this? When we have this: as <html> <head> <style> h2

  • 0

How to code for this?

enter image description here

When we have this:
enter image description here

as

<html>
    <head>
        <style>             
            h2
            {
                letter-spacing:4pt;
                font-size:40pt;
                color:blue;
                text-align:center;
                position:absolute;
                top:0px;
            }
            h3
            {
                letter-spacing:4pt;
                font-size:40pt;
                color:blue;
                text-align:center;
                position: absolute;
                top:20px;
                left:20px;
            }
        </style>
    </head>

    <body>
        <h2>All right, Mate?</h2>
        <h3>All right, Mate?</h3>
    </body>
</html>
</html>

…without changing the original functionality/tags.
Only add (or modify) a bit.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can put both in a wrapper with position set to relative and define a fixed width and height to it.

    HTML 

    <div class="wrapper">
    <h2>All righ, Mate?</h2>
    <h3>All right, Mate?</h3>
</div>​

    CSS

    .wrapper 
{
    border: 3px solid #ff0000;
    position: relative;
    width: 448px;
    height: 89px;
}    
h2
{
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    text-align:center;
    position:absolute;
    top:0px;
}
h3
{
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    text-align:center;
    position: absolute;
    top:20px;
    left:20px;
}​

    It’s necessary to define a height because both elements have the position set to absolute, it makes the elements to be removed from the normal flow of the document, so the parent element, in this case the wrapper, won’t add the height of the absolute positioned children to its own.
    Also, note that defining the parent’s position to relative will affect the position of the children, as their position will be calculated in relation to the parent’s position. If you don’t want this behaviour just remove the position: relative from the .wrapper rule.

    Live example

    Hope it helps.

    • 0