Das deutsche Python-Forum

Ich habe es geschafft, in der Navleiste ein Dropdownmenü zu erzeugen. Das funktioniert sogar ... aber noch nicht ganz. Es gibt zwei Probleme:
1. Wenn ich "Bildschirmgröße testen" wähle, funktioniert das Dropdownmenü nicht mehr. Ist das normal?
2. Ich habe auch versucht, in der Fußleiste ein Dropdown Menü einzufügen, das geht gar nicht. Da es die Fußleiste ist, kann wohl nichts nach unten klappen (owohl ich diese Leiste nicht als footer definiert habe ... oder doch?). Gibt es da eine andere Möglichkeit?
So, jetzt muss ich versuchen, den richtigen Code anzuhängen, damit Sirius3 nicht schimpft:
Mein Template:

Code: Alles auswählen

{% extends 'layout.html' %}   
{% load static %}

{% block css_files %}
<link rel="stylesheet" href="{% static 'core/index.css' %}">
{% endblock %}

{% block content %}
    {% include "includes/header.html" %}
...
    {% include "includes/footer.html" %}
{% endblock %}

header.html:

Code: Alles auswählen

{% load static %}

{% block css_files %}
<link rel="stylesheet" href="{% static 'core/includes/header.css' %}">
{% endblock %}

<body>
<div class="navbar">
    <a href="{% url 'kategorien' %}">&#8962 Home</a>
    <a href="{% url 'uebersicht' %}">Aufgaben</a>
    <a href="{% url 'protokoll' %}">Protokoll</a>
  <div class="dropdown">
    <button class="dropbtn"> 
        {% if user.is_authenticated %}
            Hallo {{ user.username }}!
        {% else %}
            <a href="{% url 'einloggen' %}">Anmelden</a>
        {% endif %}
    </button>
    <div class="dropdown-content">
      <a href="{% url 'password_reset' %}">Passwort zurücksetzen</a>
      <a href="#">Einstellungen</a>
      <a href="{% url 'logout' %}">Abmelden</a>
    </div>
  </div> 
</div>

(... der footer ist ziemlich genauso)

und noch layout.html:

Code: Alles auswählen

<!DOCTYPE html>
{% load static %}

<html lang="de">
    <head>       
        <title>Rechentrainer im Web - Demo</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="{% static 'styles.css' %}">
        {% block css_files %}{% endblock %}
    </head>

    <body>
        <div class="container">
            {% block content %}{% endblock %}
        </div>
    </body>
</html>

header.css:

Code: Alles auswählen

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

So etwas wie Kopf und Fusszeilen packt man eigentlich in das Basis-Layout und inkludiert das nicht überall in den Inhaltsblock von den abgeleiteten Vorlagen.

Auf den ersten Blick würde ich sagen, du überschreibst dir den "block ccs_files" ein paar mal. Die werden nicht magisch dann alle geladen. Schau doch mal im Browser auf der fertigen Seite in den Quelltext (oder poste ihn hier). Du solltest auch nicht für jede Template-Datei eine eigene CSS-Datei haben. Schreib alles in eine.
Ansonsten schließe ich mich Blackjack an.

Viele Grüße
Whitie

Das deutsche Python-Forum

Probleme mit Dropdown Menüs in der Navleiste

Probleme mit Dropdown Menüs in der Navleiste

Re: Probleme mit Dropdown Menüs in der Navleiste

Re: Probleme mit Dropdown Menüs in der Navleiste