2
respostas

[Dúvida] Erro no estilo css

Mesmo tendo alterado os arquivos de html, css a estilização não funcionou. Fiz a limpeza do cache do navegador e testei em outros navegadores e continuo com o problema.

Poderia me ajudar?

Código do login.html

{% extends 'shared/base.html' %}
{% load static %}
{% block content %}

            <section class="galeria" style="margin-left: 5em">
                <form action="{% url 'login' %}" method="POST">
                    {% csrf_token %}
                    <div class="row">
                        {% for field in form.visible_fields %}
                        <div class="col-12 col-lg-12" style="margin-bottom: 10px;">
                            <label for="{{ field.id_for_label }}" style="color:#D9D9D9; margin-bottom: 5px;">{{field.label}}</label>
                            {{ field }}
                        </div>
                        {% endfor %}
                    </div>
                    <div>
                        <button type="submit" class="btn btn-success col-12" style="padding: top 5px;">Logar</button>
                    </div>
                </form>
            </section>
        </main>
    </div>
</body>

{% endblock %}

Código do cadastro.html

{% extends 'shared/base.html' %}
{% load static %}
{% block content %}

            <section class="galeria" style="margin-left: 5em">
                <form action="{% url 'cadastro' %}" method="POST">
                    {% csrf_token %}
                    <div class="row">
                        {% for field in form.visible_fields %}
                        <div class="col-12 col-lg-12" style="margin-bottom: 10px;">
                            <label for="{{ field.id_for_label }}" style="color:#D9D9D9; margin-bottom: 5px;">{{field.label}}</label>
                            {{ field }}
                        </div>
                        {% for error in field.errors %}
                        <div class="alert alert-danger">
                            {{error}}
                        </div>
                        {% endfor %}
                        {% endfor %}
                    </div>
                    <div>
                        <button type="submit" class="btn btn-success col-12" style="padding: top 5px;">Cadastrar</button>
                    </div>
                </form>
            </section>
        </main>
    </div>
</body>

{% endblock %}

Código do base.html:

{% load static %}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Space</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{% static 'styles/style.css' %}">
</head>

<body>
    {% include 'partials/_menu.html' %}
    {% block content %}{% endblock %}
    {% include 'partials/_footer.html' %}
</body>

</html>
2 respostas

Bom dia, Maria! Tudo bem?

Primeiramente, verifique se o caminho para o seu arquivo CSS está correto no arquivo base.html. O Django utiliza a tag {% static 'caminho/do/arquivo' %} para acessar arquivos estáticos. No seu caso, o caminho para o arquivo CSS no base.html está como {% static 'styles/style.css' %}. Certifique-se de que o arquivo style.css está realmente na pasta 'styles' dentro da pasta 'static'.

Outra coisa que notei é que você está utilizando estilos inline em alguns elementos HTML, como no botão de submit dos formulários. No entanto, parece que há um erro de sintaxe no valor do atributo 'style'. Você está usando style="padding: top 5px;", mas o valor correto seria style="padding-top: 5px;".

Além disso, verifique se as classes que você está utilizando nos seus elementos HTML estão definidas no seu arquivo CSS. Por exemplo, você está usando a classe 'btn btn-success col-12' no botão de submit do seu formulário. Certifique-se de que essas classes estão definidas no seu arquivo CSS.

Caso tenha feito todos os ajustes e verificações que comentei acima e não tenha resolvido o seu problema, peço que compartilhe comigo todo o seu projeto, via GitHub ou Drive do Google, para que eu realize testes de busca.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

Boa tarde Maria outra solução possivel caso nada funcione é continuar com o link do bootstrap e ir lá na index e colocar <li class="card" style="background-color: #041833;"> localizada logo abaixo de {% for fotografia in cards %} e apenas resaltando que essa solução é apenas para ultimo caso pois provavelmente fere uma boa pratica de programação mas como uma pessoa que já tentou de tudo e não achou o problema foi a unica coisa que resolveu o problema. Espero que o post do Armano tenha te ajudado, e não precise utilizar essa solução.

Bons estudos

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software