My program has a CSS file that I defined, but for some reason it's not working. When I checked with firebug, the status is 200 OK, but no changes are occurring. I'm unsure if there is a syntax issue with my CSS file. Can you please provide your insights?
urls.py
from django.conf.urls.defaults import patterns, include, url
from preview,view import *
import os
site_media = os.path.join(os.path.dirname(__file__),'site_media')
urlpatterns = patterns('',
(r'^catalog/$','home'),
(r'^site_media/(?P<path>.*)$,'django.views.static.serve',{'document_root':site_media}),)
css.css
*{
margin:0;
padding:0;
}
html{
font-size:medium;
}
html,body{
background-color:Silver;
}
.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:10px;
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;
}
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>
<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" href="/site_media/css.css"
type="/text/css"/>
</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">
[navigation here]
</div>
</div>
<div id="middle">
<div id="sidebar">
<div class="sidebarIEPadder">
[search box here]
<br />
[category listing here]
</div>
</div>
<div id="content">
<a name=”content”></a>
<div class="contentIEPadder">
{% block content %}{% endblock %}
</div>
</div>
</div>
</div>
<div id="footer">
<div class="footerIEPadder">
[footer here]
</div>
</div>
</div>
{% endblock %}
index.html
{% extends "catalog.html" %}
{% block content %}
<h2>Welcome!</h2>
{% endblock %}