Kevin Powell - Community•6mo ago

Help me position the object.

I need to place the object next to the <aside> but I can't get it to work. I'm working with the Django framework. The screenshot shows how I want it to be positioned. The second screenshot shows what I'm trying to achieve. I will show the next HTML message. main.css css is not a complete code

.profile-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 40px 20px;
    max-width: 800px;
    width: 100%;
    position: absolute;
    text-align: center;
    z-index: 1;
}
.profile-header {
    margin-bottom: 30px;
}
.profile-info {
    margin-bottom: 30px;
}
.profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}
.profile-edit .form-control {
    margin-bottom: 20px;
    height: 45px;
    font-size: 16px;
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box; 
}
.profile-edit .btn {
    width: 100%;
    padding: 10px;
    font-size: 18px;
}
.profile-edit .form-label {
    display: flex;
    justify-content: start;
    font-weight: 400;
    left: 10px;
    padding-left: 4px;
}
.registration-container {
    background: #fff; 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 40px 20px; 
    max-width: 600px; 
    width: 100%; 
    position: absolute;
    text-align: center; 
    z-index: 1;
}

.registration-container h1 {
    margin-bottom: 30px;
    font-size: 28px;
}

.registration-container .form-control {
    margin-bottom: 20px;
    height: 45px;
    font-size: 16px;
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;
}

.registration-container .btn {
    width: 100%;
    padding: 10px;
    font-size: 18px;
}

.form-row {
    display: flex;
    justify-content: space-between;
}
.registration-container .form-group {
    width: 48%;
}

.profile-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 40px 20px;
    max-width: 800px;
    width: 100%;
    position: absolute;
    text-align: center;
    z-index: 1;
}
.profile-header {
    margin-bottom: 30px;
}
.profile-info {
    margin-bottom: 30px;
}
.profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}
.profile-edit .form-control {
    margin-bottom: 20px;
    height: 45px;
    font-size: 16px;
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box; 
}
.profile-edit .btn {
    width: 100%;
    padding: 10px;
    font-size: 18px;
}
.profile-edit .form-label {
    display: flex;
    justify-content: start;
    font-weight: 400;
    left: 10px;
    padding-left: 4px;
}
.registration-container {
    background: #fff; 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 40px 20px; 
    max-width: 600px; 
    width: 100%; 
    position: absolute;
    text-align: center; 
    z-index: 1;
}

.registration-container h1 {
    margin-bottom: 30px;
    font-size: 28px;
}

.registration-container .form-control {
    margin-bottom: 20px;
    height: 45px;
    font-size: 16px;
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;
}

.registration-container .btn {
    width: 100%;
    padding: 10px;
    font-size: 18px;
}

.form-row {
    display: flex;
    justify-content: space-between;
}
.registration-container .form-group {
    width: 48%;
}

31 Replies

NIKITA-703OP•6mo ago

<!-- profile.html -->
{% extends 'main/layout.html' %}
{% load static %}

{% block title %}Профиль{% endblock %}

{% block content %}
<div class="profile-container">
    <div class="profile-header">
        <h1>Профиль</h1>
    </div>
    <div class="profile-info">

    </div>
    <div class="profile-edit">
        <form action="{% url 'users:profile' %}" method="post" enctype="multipart/form-data">
            {% csrf_token %}

            {% if user.image %}
                <img src="{{ user.image.url }}" alt="User Photo" class="profile-photo">
            {% else %}
                <img src="{% static 'users/img/profile.png' %}" alt="User Photo" style="max-width: 150px;" class="profile-photo">
             {% endif %}

            <h2>{{ form.username.value }}</h2>
            <p>{{ form.last_name.value }}</p>
            <p>{{ form.email.value }}</p>

            <input type="file" class="form-control" placeholder="Загрузить фото" id="id_image" name="image" accept="image/*">            
            <label for="id_username" class="form-label">Имя пользователя</label>
            <input type="text" class="form-control" placeholder="Имя пользователя"
                   id="id_username"
                   name="username"
                   value="{{ form.username.value }}">

<!-- profile.html -->
{% extends 'main/layout.html' %}
{% load static %}

{% block title %}Профиль{% endblock %}

{% block content %}
<div class="profile-container">
    <div class="profile-header">
        <h1>Профиль</h1>
    </div>
    <div class="profile-info">

    </div>
    <div class="profile-edit">
        <form action="{% url 'users:profile' %}" method="post" enctype="multipart/form-data">
            {% csrf_token %}

            {% if user.image %}
                <img src="{{ user.image.url }}" alt="User Photo" class="profile-photo">
            {% else %}
                <img src="{% static 'users/img/profile.png' %}" alt="User Photo" style="max-width: 150px;" class="profile-photo">
             {% endif %}

            <h2>{{ form.username.value }}</h2>
            <p>{{ form.last_name.value }}</p>
            <p>{{ form.email.value }}</p>

            <input type="file" class="form-control" placeholder="Загрузить фото" id="id_image" name="image" accept="image/*">            
            <label for="id_username" class="form-label">Имя пользователя</label>
            <input type="text" class="form-control" placeholder="Имя пользователя"
                   id="id_username"
                   name="username"
                   value="{{ form.username.value }}">

<label for="id_first_name" class="form-label">Имя</label>
            <input type="text" class="form-control" placeholder="Имя"
                   id="id_first_name"
                   name="first_name"
                   value="{{ form.first_name.value }}">            

            <label for="id_last_name" class="form-label">Фамилия</label>
            <input type="text" class="form-control" placeholder="Фамилия"
                   id="id_last_name"
                   name="last_name"
                   value="{{ form.last_name.value }}">            

            <label for="id_email" class="form-label">Email</label>
            <input type="email" class="form-control" placeholder="Email"
                   id="id_email"
                   name="email"
                   value="{{ form.email.value }}"
            >
           
            <button class="btn btn-success" type="submit">Сохранить</button>
        </form>
    </div>
</div>
{% endblock %}

<label for="id_first_name" class="form-label">Имя</label>
            <input type="text" class="form-control" placeholder="Имя"
                   id="id_first_name"
                   name="first_name"
                   value="{{ form.first_name.value }}">            

            <label for="id_last_name" class="form-label">Фамилия</label>
            <input type="text" class="form-control" placeholder="Фамилия"
                   id="id_last_name"
                   name="last_name"
                   value="{{ form.last_name.value }}">            

            <label for="id_email" class="form-label">Email</label>
            <input type="email" class="form-control" placeholder="Email"
                   id="id_email"
                   name="email"
                   value="{{ form.email.value }}"
            >
           
            <button class="btn btn-success" type="submit">Сохранить</button>
        </form>
    </div>
</div>
{% endblock %}

NIKITA-703OP•6mo ago

https://github.com/NIKITA-703/contorl_project/blob/feature/website/users/templates/users/profile.html

GitHub

contorl_project/website/users/templates/users/profile.html at featu...

Contribute to NIKITA-703/contorl_project development by creating an account on GitHub.

vince•6mo ago

Have you tried giving that form a margin-right: auto? It needs to be in a container with display: flex or display: grid for it to work

NIKITA-703OP•6mo ago

I tried using margin-left and it worked, but when I checked the result on another monitor (full HD), the elements were in different positions. I haven't tried using display: grid yet because I don't fully understand how to use it.

vince•6mo ago

That's how responsive design works -- it'll look slightly different on every device and there's thousands+ of different device sizes

NIKITA-703OP•6mo ago

vince•6mo ago

Alright it shouldn't look like that, you might have something hardcoded, as in some bad css practices

NIKITA-703OP•6mo ago

vince•6mo ago

My recommendation: make a codepen and make a layout for this, and then bring it into Django / twig Are you a backend dev or just learning?

NIKITA-703OP•6mo ago

learning

vince•6mo ago

Stop using Django / twig for now, you're only overcomplicating it. Go back to the basics: learn html, css, then js and then you can go to Django

NIKITA-703OP•6mo ago

The thing is, I am writing a diploma using Django

vince•6mo ago

You mean you're still in school and this is a school project?

NIKITA-703OP•6mo ago

college

vince•6mo ago

That's unfortunate then because they haven't taught you how to use css ☹️ like my school too lol I would look up some videos on Kevin Powell's youtube channel about flexbox and grid But looking at this second image, you have it hardcoded: margin-left: -1382px. you pretty much never want to do this

NIKITA-703OP•6mo ago

I was just looking at what it looked like.

vince•6mo ago

Yup just telling you that you should use flex or grid for this and not position: absolute with a magic number for your margin-left

NIKITA-703OP•6mo ago

Okay, I will keep that in mind. As I understand, I need to use grid to more accurately position the object.

Eighth•6mo ago

I agree, you can get by with grids or flexbox + order

vince•6mo ago

It's not about accuracy, it's about having your layout work on all devices

NIKITA-703OP•6mo ago

Now I need to figure out how to use grid You're right

Eighth•6mo ago

There is a cheat sheet on the grid

vince•6mo ago

Make this red box as a main tag and put display: flex on it, and then put margin-left: auto on your form

Eighth•6mo ago

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout

MDN Web Docs

Основные понятия Grid Layout - CSS: каскадные таблицы стилей | MDN

Грид-раскладка (CSS Grid Layout) представляет собой двумерную систему сеток в CSS. Гриды подойдут и для верстки основных областей страницы, и небольших элементов пользовательского интерфейса. Эта статья даёт общее представление о грид-раскладке и новой терминологии, которая является частью спецификации CSS Grid Layout Level 1. Более подробно пок...

Eighth•6mo ago

Or here https://tpverstak.ru/grid/

Анна Блок

Типичный верстальщик

Шпаргалка Grid CSS | Типичный верстальщик

Интерактивная шпаргалка по всем свойствам CSS Grid Layout для верстальщиков и фронтенд-разработчиков от Анны Блок.

NIKITA-703OP•6mo ago

I have this html structure. And class="background" can't cause a conflict? When I start changing something, it sometimes doesn't work because of the blur effect.

NIKITA-703OP•6mo ago

main .background {
    background: transparent; /* Убираем фоновое изображение */
    height: calc(100vh - 60px); /* Высота за вычетом хедера */
    width: 100%;
}

main .blur {
    background: rgba(10, 10, 10, 0.1); 
    backdrop-filter: blur(6px); 
    height: calc(100vh - 60px); /* Высота за вычетом хедера */
    width: 100%;
}

main .background {
    background: transparent; /* Убираем фоновое изображение */
    height: calc(100vh - 60px); /* Высота за вычетом хедера */
    width: 100%;
}

main .blur {
    background: rgba(10, 10, 10, 0.1); 
    backdrop-filter: blur(6px); 
    height: calc(100vh - 60px); /* Высота за вычетом хедера */
    width: 100%;
}

vince•6mo ago

Yea that would cause a conflict because if your main container will be flex / grid, it'll treat the .background as a child You can put position: relative on your main and then position: absolute; inset: 0 on your .background and that should fix it. But I'd consider making your .background a background-image on the main tag instead

NIKITA-703OP•6mo ago

I did as you said. Now do I need to position the profile form to the left?

vince•6mo ago

You should be able to do margin-right: auto *not margin-left: auto (mistyped earlier)

NIKITA-703OP•6mo ago

Okay, thanks for taking the time ❤, I'm starting to fall asleep tired today. I'll try to finish this

Gaming

Programming

Help me position the object.