Your image/CSS/JS URLs should be either absolute, protocol-relative, or root-relative:
<!-- absolute -->
<link rel="stylesheet" href="http://example.com/assets/css/nav.css">
<img src="http://example.com/assets/images/swf_logo.png" alt="" />
<!-- protocol-relative -->
<link rel="stylesheet" href="//example.com/assets/css/nav.css">
<img src="//example.com/assets/images/swf_logo.png" alt="" />
<!-- root-relative -->
<link rel="stylesheet" href="/assets/css/nav.css">
<img src="/assets/images/swf_logo.png" alt="" />
Relative URLs (which start with either
../, or no slash at all) are generally a bad idea, since the URL will need to vary depending on the number of segments in your URI.
For example if you were to access http://example.com/, the relative path to your nav.css would be
assets/css/nav.css, but if you were to access http://example.com/about/ (with a trailing slash), then the proper relative URL would be
That’s not to say that relative URLs are impossible. The main issue with your URLs is not that they’re relative, it’s that you’re treating them as relative from the physical template file location. Keep in mind that these front-end resource URLs are resolved by the browser, not by the server, and browsers have no idea how the resulting HTML gets generated, let alone that it came from a template that happened to live a couple directories up from your web root, and in a craft/templates/... subfolder. So they need to be relative based an the apparent location of the webpage, as defined by its URI (e.g. “/news/some-slug”).