Django und CSS

klaus · Mittwoch 21. November 2007, 13:32

Hi Leute,

ich bin grad dabei Django zu lernen, aber ich habe momentan ein Problem, nämlich, dass die CSS-Datei nicht berücksichtigt wird:

hier mal die beiden HTML-Dateien (bis jetzt nur grobe entwürfe):
base.htm

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head>[...]<link rel="stylesheet" type="text/css" href="base.css"></head>
   <body>
      <div class="head"><h1>Juggleclips</h1></div>
      <div class="menu">{% block menu %} menu {% endblock %}div>
      <div><div class="navi">
            {% block navi %} navi {% endblock %}
         </div>
         <div class="main">
            <h2>{{ title }}</h2>
            {% block main %} main {% endblock %}
         </div></div>
</body></html>

home.htm

Code: Alles auswählen

{% extends "base.htm" %}

{% block navi %}
<a href="">link</a>
{% endblock %}

{% block main %}
{{ content }}
{% endblock %}

base.css

Code: Alles auswählen

body { margin:0px; }
div.head { overflow:hidden; border:1px solid red; margin:0px; padding:5px; }
div.menu { border:1px solid blue; margin:0px; padding:5px; }
div.navi { width:100px; float:left; overflow:hidden; border:1px solid red; margin:0px; padding:5px; }
div.main { position:absolute; left:112px; border:1px solid red; margin:0px; padding:5px; }

Wenn ich base.htm im Internet-Explorer öffne, wird es richtig angezeigt und wenn ich es mit Django ausgeben lasse, wird es von der CSS-Datei überhaupt nicht formatiert. Woran liegt das?

Leonidas · Mittwoch 21. November 2007, 13:41

Wenn Django das ausgibt, greift der Browser auf die `base.css` zu die im gleichen Ordner liegt. Dort stellt sie Django aber nicht bereit, weil Django gar keine statischen Daten ausliefert, das ist nicht seine Aufgabe. Lies dir die Dokumentation zu Static Files durch.

jens · Mittwoch 21. November 2007, 15:22

http://www.djangoproject.com/documentat ... tic_files/

klaus · Mittwoch 21. November 2007, 18:18

Klappt irgendwie nicht. Ich hab jetzt

Code: Alles auswählen

    (r'^css/(?P<path>.*)$', 'django.views.static.serve',
    {'document_root': 'C:/djsite/template/css'}),

zu urlpatterns hinzugefügt, ich rufe es über
<link rel="stylesheet" type="text/css" href="css/base.css">
auf und der Dateipfad heißt
C:/djsite/template/css/base.css

Trotzdem wird es immer noch nicht korrekt angezeigt.

sma · Donnerstag 22. November 2007, 15:58

Klaus,

wenn du "css/base.css" benutzt und z.B. auf die Seite "/foo/bar/" zugreifst (deren Template "foo.html" dann "base.html" einbindet), dann sucht der Browser "/foo/bar/css/base.css". Ich würde den Pfad zur CSS-Datei immer absolut machen, damit sowas nicht passiert. Könnte dies ein Problem sein?

Stefan

klaus · Donnerstag 22. November 2007, 18:14

Aber der Pfad zur Datei ist doch absolut:

Code: Alles auswählen

    {'document_root': 'C:/djsite/template/css'}

und in diesem Verzeichnis liegt die CSS-Datei.
Momentan sollte das Programm so laufen:

1. das Template "home.htm" im Verzeichnis C:/djsite/template wird geladen (funktioniert).
2. Dieses erweitert (mit "extends") das Template "base.htm" im gleichen Verzeichnis (funktioniert auch)
3. Dieses bindet (über <link ...>) die Datei "base.css" im Verzeichnis C:/djsite/templates/css ein. (funktioniert nicht ! )

Leonidas · Freitag 23. November 2007, 14:17

klaus hat geschrieben:Aber der Pfad zur Datei ist doch absolut

Nicht in der HTML-Datei.

klaus · Mittwoch 28. November 2007, 15:51

Ok, ich hab jetzt in der HTML-Datei C:/djsite/css/base.css geschrieben und es hat funktioniert, aber das kann doch wohl nicht die einzige Lösung sein, weil sonst müsste ich ja jedesmal, wenn ich die Seite in ein anderes Verzeichnis lege alle Pfade ändern und das ist ja wohl nicht der Sinn einer Dynamischen Webprogrammierung. Also, wie muss der Pfad in der HTML-Datei heißen, damit es funktioniert?

killercup · Mittwoch 19. Dezember 2007, 16:16

Hallo Klaus,

Stefan hat schon recht:

sma hat geschrieben:Wenn du "css/base.css" benutzt und z.B. auf die Seite "/foo/bar/" zugreifst (deren Template "foo.html" dann "base.html" einbindet), dann sucht der Browser "/foo/bar/css/base.css". Ich würde den Pfad zur CSS-Datei immer absolut machen, damit sowas nicht passiert. Könnte dies ein Problem sein?

Aber es gibt eine noch einfachere Möglichkeit, die meiner Meinung nach auch funktionieren sollte: Benutz im Template einfach die URL "/css/base.css". Damit versucht der Browser die CSS Datei anhand der Domain der Seite zu suchen, also z.B. localhost:8000/css/base.css.