以下に示すヘッダー、バナー、フッターを含む html ファイルを作成しました。ナビゲーション リンクを配置しようとしていますが、何らかの理由でインラインに配置されていません。問題はナビゲーション ID にあります。どんな助けでも大いに役立ちます。
Base.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DJANGO E-Commerce website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}{% if page_title %}{{ page_title }} - {% endif %} ?
{{ site_name }}{% endblock %}</title>
<meta name="keywords" content="{{ meta_keywords }}" />
<meta name="description" content="{{ meta_description }}" />
<link rel="Stylesheet" type="text/css" href="{{ MEDIA_URL }}css.css" />
<!-- <link rel="stylesheet" href="/site_media/css.css"
type="text/css" /> -->
<!--<script src="/site_media/jquery.js" type="text/javascript"></script>-->
</head>
<body>
{% block site_wrapper %}{% endblock %}
</body>
</html>
catalog.html
{% extends "base.html" %}
{% block site_wrapper %}
<div id="main">
<a href="#content" class="skip_link">Skip to main content</a>
<div id="banner">
<div class="bannerIEPadder">
<div class="cart_box">
[link to cart here]
</div>
Modern Musician
</div>
</div>
<div id="navigation">
<div class="navIEPadder">
{% include "tags/navigation.html" %}
</div>
</div>
<div id="middle">
<div id="sidebar">
<div class="sidebarIEPadder">
[search box here]
<br />
{% include "tags/category_list.html" %}
</div>
</div>
<div id="content">
<a name="content"></a>
<div class="contentIEPadder">
{% block content %}{% endblock %}
</div>
</div>
</div>
<div id="footer">
<div class="footerIEPadder">
[footer here]
</div>
</div>
</div>
{% endblock %}
ナビゲーション.html
<u1>
<li><a href="/catalog/">Home</a></li>
<li><a href="/catalog/">About</a></li>
<li><a href="/catalog/">Privacy</a></li>
<li><a href="/catalog/">Products</a></li>
<li><a href="/catalog/">Contact</a></li>
</u1>
<div class="cb"></div>
css.css
*{
margin:0;
padding:0;
}
html{
font-size:medium;
}
html,body{
background-color:Blue;
}
.cb{
clear:both;
}
.fr{
float:right;
}
.fl{
float:left;
}
.bn{
border:none;
}
#main{
margin: 0 auto;
width:900px;
background-color:White;
}
.bannerIEPadder, .sidebarIEPadder, .contentIEPadder{
padding:10px;
}
.navIEPadder, .footerIEPadder{
padding:5px;
}
#banner{
width:900px;
height:75px;
background-color:DarkOrange;
color:White;
font-size:36px;
font-weight:bold;
position:relative;
}
div.cart_box{
position:absolute;
top:20px;
right:10px;
font-size:medium;
}
div.cart_box a{
color:white;
}
#sidebar{
width:200px;
float:left;
}
#content{
width:700px;
float:left;
}
#footer{
clear:both;
background-color:#98AC5E;
color:White;
text-align:center;
}
a.skip_link{
position:absolute;
left:-1000px;
top:-1000px;
}
#navigation ul{
list-style-type:None;
margin:0;
padding:0;
}
#navigation ul li{
float:left;
margin-right:15px;
display:inline;
}
#navigation ul li a{
color:White;
font-weight:bold;
text-decoration:underline;
display:inline;
}
#navigation ul li a:hover{
color:#616161;
background-color:Red;
text-decoration:none;
}
a{
color:#98AC5E;
font-weight:bold;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
/* category page styles */
div.product_thumbnail{
text-align:center;
float:left;
width:150px;
height:200px;
}
/* product page styles */
div.product_image{
float:left;
padding:0 10px 10px 0;
}