your block content is inside the div tag and you set your CSS with div class that’s why it’s moving.
<div id= "content", name="content", class="home">
<h1 class= "mt-0.6">Anime Domain Best 2020 Animes</h1>
</div>
{% block content %}
{% endblock %}
do this it will work. (Y)
This is not a Django problem, rather an HTML/CSS/JS problem. Django runs through Python. When you request a page, in the end, Django just gives you a response, some HTML, CSS, and JS. You should figure out how to solve this problem using HTML/CSS/JS, not Django.
This problem is not solvable by Django-Python. as Django-Python is responsible for backend algorithms and rendering of pages.
but how the page will look and what will be the design, how the animations will work, will be controlled by CSS and javaScript.
so now for your issue:
the answer by Umair Lakhani is the first solution
to move the text anywhere on the page
if you are using jQuery, you can use jQuery-Draggable
a simple example is here: https://jqueryui.com/draggable/
I was wondering how I could display my text anywhere around my home page because I will be having more then 1 text to display
this is what I have on my home.html how would I move it anywhere on my screen to fit the place I want ***this is my problem right now VIDEO << as you can see in the video the title is moving with the name of the anime I am trying to make a website where it displays the image of the anime and the name of it but I am not sure why the anime name is moving with the title of the website I want it to move “one Piece” lower then the title without the title moving at all
{% extends 'main/base.html' %}
{% block title%}
home
{% endblock %}
{% block content %}
<h1>One Piece</h1>
{% endblock %}
my home views
def home(response):
return render(response, "main/home.html", {})
on my base.html I have a similar thing but I am not sure why it moves my
along with the title
<html>
<head>
<style type="text/css">
.home{
margin-left:500px;
padding: 0px 10px;
color: #212F3D;
font-size:28px;
}
<div id= "content", name="content", class="home">
<h1 class= "mt-0.6">Anime Domain Best 2020 Animes</h1>
{% block content %}
{% endblock %}
</div>
my full base.html code:
<!-- base.html -->
<!doctype html>
<html>
<head>
<style type="text/css">
.sidenav {
height:100%;
width:160px;
position: fixed;
z-index:1;
top:0;
left:0;
background-color:#111;
overflow-x: :hidden;
padding-top:20px;
}
.sidenav a {
padding:6px 8px 6px 16px;
text-decoration: none;
font-size:25px;
color: #818181;
display:block;
}
.sidenav a:hover{
color:#f1f1f1;
}
.sidenav a:hover{
color:#f1f1f1;
}
.home{
margin-left:500px;
padding: 0px 10px;
color: #212F3D;
font-size:28px;
}
</style>
<title>{% block title %} Habibs Website {% endblock %}</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="sidenav">
<a href="/home">Home</a>
<a href="/2">View</a>
<a href="/create">Create</a>
</div>
<div id= "content", name="content", class="home">
<h1 class= "mt-0.6">Anime Domain Best 2020 Animes</h1>
{% block content %}
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
what does it mean “anywhere on my screen to fit the place you want”? if you want draggale element dynamically, you can use
no like I want to move the text somewhere else
thank you so much I am learning django and have alot to learn can i ask 1 more question? how can I make the text on my homepage move anywhere on my screen?
@HabibIsmail Learn CSS and HTML is what I recommend, you can start
@HabibIsmail there is no image in the link. please learn first html, css and javascript then go with Django.