Django-fr

Forum

#1 07-01-2011 19:26:55

Rémycube
Membre
Inscription : 05-01-2011
Messages : 23

feuilles de style css en cascade

Bonjour à tous,

je cherche à "additionner" des feuilles de style css de cette manière:

base.html
{% block stylesheets %}
<link rel="stylesheet" media="screen" type="text/css" title="design" href="/site_media/css/design_monsite.css" />
{% endblock %}

ma_page.html
{% extends "base.html" %}
{% block stylesheets %}
<link rel="stylesheet" media="screen" type="text/css" href="/site_media/css/design_liste_lieux.css" />
{% endblock %}

Pourquoi les deux feuilles de style ne s'additionnent elles pas ?
J'ai essayé de mettre les deux liens directement dans base.html, ca fonctionne mais à moitié: les deux pages se superposent, chacune avec son style mais le contenu de la deuxieme n'est pas intégré à la première...
(mes "id" sont bien distincts)

Merci pour votre aide

Hors ligne

#2 07-01-2011 19:44:53

Romain
Membre
Inscription : 11-08-2010
Messages : 27

Re : feuilles de style css en cascade

Le 7 janv. 2011 à 19:26, Rémycube a écrit :

> Bonjour à tous,
>
> je cherche à "additionner" des feuilles de style css de cette manière:
>
> base.html
> {% block stylesheets %}
> <link rel="stylesheet" media="screen" type="text/css" title="design"
> href="/site_media/css/design_monsite.css" />
> {% endblock %}
>
> ma_page.html
> {% extends "base.html" %}
> {% block stylesheets %}
> <link rel="stylesheet" media="screen" type="text/css"
> href="/site_media/css/design_liste_lieux.css" />
> {% endblock %}
>
> Pourquoi les deux feuilles de style ne s'additionnent elles pas ?
> J'ai essayé de mettre les deux liens directement dans base.html, ca
> fonctionne mais à moitié: les deux pages se superposent, chacune avec son
> style mais le contenu de la deuxieme n'est pas intégré à la première...
> (mes "id" sont bien distincts)


Quand tu redéfinis le bloc "stylesheets" dans ma_page.html, son contenu écrase celui du bloc de base.html

essaye :
[base.html]
{%block stylesheets %}
    <link rel="stylesheet" media="screen" type="text/css" title="design"
        href="/site_media/css/design_monsite.css/>
    {% block other_stylesheets %}
    {% endblock %}
{% endblock stylesheets %}

[ma_page.html]
{% extends "base.html" %}
{% block other_stylesheets %}
    <link rel="stylesheet" media="screen" type="text/css"
        href="/site_media/css/design_liste_lieux.css" />
{% endblock %}

Hors ligne

#3 07-01-2011 20:26:19

Zebuline
Membre
Lieu : Toulouse
Inscription : 11-08-2010
Messages : 3
Site Web

Re : feuilles de style css en cascade

>
>
> Quand tu redéfinis le bloc "stylesheets" dans ma_page.html, son contenu écrase celui du bloc de base.html
>
> essaye :
> [base.html]
> {%block stylesheets %}
>     <link rel="stylesheet" media="screen" type="text/css" title="design"
>         href="/site_media/css/design_monsite.css/>
>     {% block other_stylesheets %}
>     {% endblock %}
> {% endblock stylesheets %}
>
> [ma_page.html]
> {% extends "base.html" %}
> {% block other_stylesheets %}
>     <link rel="stylesheet" media="screen" type="text/css"
>         href="/site_media/css/design_liste_lieux.css" />
> {% endblock %}

Il n'est pas nécessaire de définir un bloc supplémentaire dans le bloc stylesheets.
Il suffit d'utiliser {{ block.super }} au début du bloc stylesheets dans le template ma_page.html, pour afficher le contenu du bloc parent.

--
Lauréline Guérin.

Hors ligne

#4 08-01-2011 12:38:38

Rémycube
Membre
Inscription : 05-01-2011
Messages : 23

Re : feuilles de style css en cascade

Merci pour vos réponses. Elles fonctionnent toutes les deux mais ne solutionnent pas entièrement mon problème.

En effet, le contenu de [ma_page.html] remplace le contenu de [base.html] grace à mes balises {% block content %}contenu de ma_page {% endblock %} mais sans s'intégrer au site !!

En gros les deux contenus sont superposés comme si [base.html] n'avait aucun contenu bans sa balise de {% block content %} et le contenu de  [ma_page.html] est en plein milieu.

Bon, à force d'essais je viens d'avoir une intuition qui s'est avérée bonne: j'utilisai "position : absolute;" dans les balises de mon css de [ma_page.html] et visiblement cela posait un problème...pourquoi je ne suis pas sur de comprendre...


En tout cas merci beaucoup !
Rémy

Hors ligne

Pied de page des forums