У меня есть два шаблона.index.html (PARENT) и test.html (CHILD)
У меня есть DIV, который фиксируется в верхней части страницы, как панель [#TopBar].он остается там в шаблоне PARENT, но как только он достигает шаблона CHILD, он настаивает на добавлении какого-либо отступа или поля, и его несколько пикселей сверху.
Я пытался перебрать CSS из дочернего шаблона, но все равно не повезло.Я прекратил использование шаблонов и создание двух полных HTML-файлов, и это работает (я не хочу делать это, поскольку я дублирую HTML-код).Так что кажется, что каждый раз, когда я помещаю {% extends "crm / index.html"%} в дочерний шаблон, он заполняет все.
Вот мой код:
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>
РЕБЕНОК - 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}
Я хочу изменить только содержимое в {% block content%}, я не вижу причин для размещения других 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>