Django Templates (Extending Problem CSS)_问答_开发者

I have two templates. index.html (PARENT) and test.html (CHILD)

I have a DIV which is fixed on top of the page, like a bar [#TopBar]. it stays there on the the PARENT template, but once it reaches the CHILD template, it insists on adding some sort of padding or margin, and its a few pixels off the top.

I tried overiding the css from within the child template, and still no luck. I stopped using the templates, and creating two full HTML files and that works(don't want to do this as i am duplicating html code). So it seems everytime i put {% extends "crm/index.html" %} on the child template it stuffs things up.

Heres my code:

PARENT - index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{%block title%}Control Panel {%endblock%}</title>

<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}crm/crm.css" />

</head>

<body>

    <div id="TopBar"  >
        <div id="header">
            <h1> TITLE</h1>
        </div>

        <div id="searches" >
            <input type="text" id="search" name="search" /> <input type="button" value="submit" />
        </div>
    </div>

    <div id="LeftCol">
        <div id="LeftMenu">
            <h3>MENU</h3>

        </div>
    </div>

    <div id="RightCol">
        <div id="UserProfile">

            {% block content %}
            <h1 class="profile"> USER PROFILE</h1>
            <p>Random text</p>
            {%endblock%}    
        </div>
    </div>

</body>

</html>

CHILD - test.html

{% extends "crm/index.html" %}

  {%block title%} Test {%endblock%}


   {%block content%}
     <h1 class="profile"> test</h1>

     <p> hkhksjhgkdhskghdk</p>
   {%endblock%}

CSS

    *{padding:0px;margin:0px;}
    body{background-color:#DBDBDB; }

 开发者_高级运维   #TopBar{width:100%; height:50px; background-color:#009999; margin:0px;}
    #header{float:left}
    #searches{float:right; padding:15px;}
    #LeftCol{height:840px; margin-top:10px; width:200px; background-color:#C0C0C0; -moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
        display:block;  overflow: hidden;  float:left;}
    #RightCol{width:1040px; margin:10px; color:black;-moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
        display:block;   overflow: hidden; background-color:white; float:left;}




    h1{color:white;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
        padding:5px;}
    h1.profile{ color:black;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
        padding:5px;}
   .h3{margin-left:70px; padding-top:10px}

I Only want to change content in the {% block content %} there is no reason for me to put other DIVS in blocks.

This is the output I get from the browser (right click, view source):

index.html:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title> Control Panel </title>
    <link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>

    <div id="TopBar"   >
        <div id="header">
            <h1>Control Panel</h1>

        </div>

        <div id="searches" >
            <input type="text" id="search" name="search" /> <input type="button" value="submit" />
        </div>
    </div>

    <div id="LeftCol">
        <div id="LeftMenu">
            <h3>MENU</h3>


        </div>
    </div>

    <div id="RightCol">
        <div id="Contents">


            <h1 class="profile"> USER PROFILE</h1>
            <p>Random text</p>      
        </div>
    </div>

</body>

</html>

test.html:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title> Test  </title>
    <link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>

    <div id="TopBar"   >
        <div id="header">
            <h1>  Test</h1>

        </div>

        <div id="searches" >
            <input type="text" id="search" name="search" /> <input type="button" value="submit" />
        </div>
    </div>

    <div id="LeftCol">
        <div id="LeftMenu">
            <h3>MENU</h3>


        </div>
    </div>

    <div id="RightCol">
        <div id="Contents">


         <h1 class="profile"> test</h1>

         <p> hkhksjhgkdhskghdk</p>

        </div>

    </div>

</body>

</html>

i don't think this is a django problem, the extended template seems right.. maybe you could post the full HTML output of both the index.html and the test.html you receive when accessing your views in the browser...

try using the stylesheet for css reset it removes a lot of margins and paddings. it may not solve your problem, but usually it helps a lot