Html Question posted in
Some basic documentation can be found here.

Creating a title for an HTML page

I’ve started creating a simple page for an assignment and I’m trying to put a title at the top of the page but whenever I create a paragraph or h1 to do so it’s placed next to the divs with the content in the center. I think that the problem has to do with the css code that centers and gives its properties to the body and I doubt it has something to do with the container class.

I’ve tried to place the title in different places and can’t seem to be able to move it to where I want it to be. I’ve also tried to create a different id for the title so that it’s aligned differently.

<head>
  <style>
    body {
      background-color: #849edb;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #container {
      background-color: white;
      padding: 30px;
      text-align: center;
      border-radius: 15px;
      width: 15%;
      padding: 20px;
      margin: 10px;
    }
  </style>
</head>

<div>
  <a href='index.html'>
    <img src="casa1.png" alt="" style="position:absolute; left:50px; top: 50px;" />
  </a>
  <h1>Title</h1>
</div>


<body>
  <div id="container">
    <h2>Sports</h2>
    <p>Text here</p>
  </div>

  <div id="container">
    <h2>Informatics</h2>
    <p>Text here</p>
  </div>

  <div id="container">
    <h2>Arts</h2>
    <p>Text here</p>
  </div>

</body>
Tags:

2

Answers


  1. 0

    Using this section :-

    <div>
    <a href = 'index.html'>
        <img src="casa1.png" alt="" style="position:absolute; left:50px; top: 50px;"/>
    </a>
    <h1>Title</h1>
</div>

    before the <body> tag is not valid HTML.

    May be this is what you are trying to do :-

    <!DOCTYPE html>
<html lang="en">

<head>
    <style>
        #body {
            background-color: #849edb;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #container {
            background-color: white;
            padding: 30px;
            text-align: center;
            border-radius: 15px;
            width: 15%;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>


<body>

    <div>
        <a href='index.html'>
            <img src="casa1.png" alt="" style="position:absolute; left:50px; top: 50px;"/>
        </a>
        <h1>Title</h1>
    </div>
    <div id="body">
        <div id="container">
            <h2>Sports</h2>
            <p>Text here</p>
        </div>

        <div id="container">
            <h2>Informatics</h2>
            <p>Text here</p>
        </div>

        <div id="container">
            <h2>Arts</h2>
            <p>Text here</p>
        </div>
    </div>
</body>

    I have made a body id for all the container and shifted the div class below <body>. If you wish you can easily change background of whole body by the bgcolor Attribute of the body as after making the style for body as an id, those tags without the same id differ in the styling.

    <body bgcolor="#849edb">
    Login or Signup to reply.
  2. 0

    In my case, it works fine when I change some code position. I put your first div inside the body tag.

     body {
            background-color: #849edb;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #container {
            background-color: white;
            padding: 30px;
            text-align: center;
            border-radius: 15px;
            width: 15%;
            padding: 20px;
            margin: 10px;
        }

    <body>
    <div>
        <h1>Title</h1>
        <a href='index.html'>
          

            <img src="casa1.png" alt="" style="position:absolute; left:50px; top: 50px; margin-top100px; width:20px; height:20px;" />
        </a>
        
    </div>



    <div id="container">
        <h2>Sports</h2>
        <p>Text here</p>
    </div>

    <div id="container">
        <h2>Informatics</h2>
        <p>Text here</p>
    </div>

    <div id="container">
        <h2>Arts</h2>
        <p>Text here</p>
    </div>

</body>

    enter link description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search