2011-07-27 10 views
0

私は2つのテンプレートを持っています。 index.html(PARENT)とtest.html(CHILD)Djangoテンプレート(拡張CSS)

私はDIVがバー[#TopBar]のようにページの上に固定されています。そこにはPARENTテンプレートがありますが、CHILDテンプレートに達すると、何らかのパディングやマージンを追加することを主張します。

私は子供のテンプレート内からCSSを上書きしようとしましたが、まだ運がありません。私は、テンプレートを使用して停止し、2つの完全なHTMLファイルを作成し、(HTMLコードを複製しているので、これをしたくない)作品。だから、毎回{%extends "crm/index.html"%}を子テンプレートに入れているようです。

HERESに私のコード:

PARENT -

<!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のindex.html - 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} 

私はコンテンツのみを変更したいです{%ブロックコンテンツ%}番目の私は他のDIVSをブロックに入れる理由はありません。

これは私がブラウザ(右クリック、ソースを表示)から入手出力されます:

の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> 

答えて

0

i「はドンこれはdjangoの問題だと思っています。拡張テンプレートは正しく見えます。ブラウザでビューにアクセスすると、index.htmlとtest.htmlの両方のHTML出力を投稿できます。

+0

今私は元の質問にそれを追加します –

0

を試してください。the stylesheet for css resetを試してみてください。マージンとパディングが多く削除されています。それはあなたの問題を解決できないかもしれませんが、通常は多くを助ける

+0

今は、まだ違いはまだ試してみました。試してくれてありがとう –

関連する問題