CODEWITHSUNDEEP
htmlcssdjangogrid
Sefora Abigail
Sefora Abigail

Reputation: 55

Teg p don't overlap with the picture

index.html

{% extends 'main/base.html' %}
{% load static %}
{% block title %}
{{title}}
{% endblock %}
{% block content %}
<link rel = 'stylesheet' href="{% static "main/css/index.css" %}">
<body>
  <div class="grid-wrapper">
    <header class="grid-header">
        <img class="circles" src="{% static "main/img/main8.jpg" %}" alt="main pic">
        <p>Предоставим качественное образование, <br>
          поможем понять школьную программу, <br>
          улучшить оценки и <br>
          подготовиться к экзаменам</p>
    </header>
  </div>
</body>
{% endblock %}

index.css

.grid-wrapper {
    display: grid;
    grid-template-columns: 1 fr;
    grid-template-rows: 1 fr;
    grid-template-areas: 'header header';
}

.circles {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

header {
    position: relative;
    width: 100%;
}

p {
    color: red;
    text-align: center;
    position: absolute;
    width: 100%;
    text-align: center;
}

Else tegs in index.css work right. When I created the other file with the same code (but without Django), it all worked out. I tried to write .grid-header p and header p and .grid-wrapper p, but nothing helped. With the help of <p> I tried to put the text on the picture

Upvotes: 0

Views: 47

Answers (1)

user18265126
user18265126

Reputation:

Need to assign top:0; on the P tag or any value that you want.

.grid-wrapper {
    display: grid;
    grid-template-columns: 1 fr;
    grid-template-rows: 1 fr;
    grid-template-areas: 'header header';
}

.circles {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

header {
    position: relative;
    width: 100%;
}

p {
    color: red;
    text-align: center;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
}
    <header class="grid-header">
        <img class="circles" src="https://static.vecteezy.com/system/resources/thumbnails/001/984/880/small/abstract-colorful-geometric-overlapping-background-and-texture-free-vector.jpg" alt="main pic">
        <p>Предоставим качественное образование, <br>
          поможем понять школьную программу, <br>
          улучшить оценки и <br>
          подготовиться к экзаменам</p>
    </header>

Upvotes: 1

Related Questions