Answers.Body: <p>Your image/CSS/JS URLs should be either absolute, protocol-relative, or root-relative:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- absolute --&gt;
  &lt;link rel="stylesheet" href="http://example.com/assets/css/nav.css"&gt;
  &lt;img src="http://example.com/assets/images/swf_logo.png" alt="" /&gt;
  
  &lt;!-- protocol-relative --&gt;
  &lt;link rel="stylesheet" href="//example.com/assets/css/nav.css"&gt;
  &lt;img src="//example.com/assets/images/swf_logo.png" alt="" /&gt;
  
  &lt;!-- root-relative --&gt;
  &lt;link rel="stylesheet" href="/assets/css/nav.css"&gt;
  &lt;img src="/assets/images/swf_logo.png" alt="" /&gt;
  </code></pre>
  
  <p>Relative URLs (which start with either <code>./</code>, <code>../</code>, 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.</p>
  
  <p>For example if you were to access <a href="http://example.com/" rel="nofollow">http://example.com/</a>, the relative path to your nav.css would be <code>assets/css/nav.css</code>, but if you were to access <a href="http://example.com/about/" rel="nofollow">http://example.com/about/</a> (with a trailing slash), then the proper relative URL would be <code>../assets/css/nav.css</code>.</p>
  
  <p>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 <em>physical template file location</em>. Keep in mind that these front-end resource URLs are resolved by the <em>browser</em>, 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 <em>apparent</em> location of the webpage, as defined by its URI (e.g. “/news/some-slug”).</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-22T20:24:50.710Z
Answers.Text: The difference between Brandon's answer and mine is that I'm just telling you how to get the job done. He on the other hand is trying to educate you. I give you examples of both absolute (via Craft Tags & Vars) as well as root-relative paths though, I didn't explain the why; just the how. Point being is that you should consider reading Brandon's answer before you read mine :-)
Answers.UserDisplayName: Natetronn
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-22T20:27:44.340Z
Answers.Text: Thanks so much guys! I knew I was letting the paths get away from me somehow. Brandon did clear this up by his education. Again, thanks!
Answers.UserDisplayName: James Ledford
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-22T20:11:42.233Z
Answers.LastActivityDate: 2014-10-22T20:19:48.910Z
Answers.LastEditDate: 2014-10-22T20:19:48.910Z
Answers.UserDisplayName: Brandon Kelly
Answers.Body: <p>I would suggest using the <a href="http://buildwithcraft.com/docs/templating/includecssfile" rel="nofollow">includeCssFile Tag</a> for your CSS files (there is another for <a href="http://buildwithcraft.com/docs/templating/includejsfile" rel="nofollow">js files</a> for what ever it's worth)</p>
  
  <p>So for example in your case you'd have:</p>
  
  <p><code>{% includeCssFile "/assets/css/nav.css" %}</code></p>
  
  <p>Note: I think that is correct though you might need to play with the path a bit. Specifically the first slash.</p>
  
  <p>For the img tags you can probably get way with this:</p>
  
  <p><code>&lt;img src="/assets/images/swf_logo.png" alt="" /&gt;</code></p>
  
  <p>or if you want you could add the <a href="http://buildwithcraft.com/docs/templating/global-variables#siteUrl" rel="nofollow">siteUrl Global Variable</a> to the mix as well</p>
  
  <p><code>&lt;img src="{{ siteUrl }}assets/images/swf_logo.png" alt="" /&gt;</code></p>
  
  <p>Note: again you might need to play with the starting slash depending on your config setup and siteUrl ending with a slash or not:</p>
  
  <p><code>{{ siteUrl }}/assets/images/swf_logo.png</code></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-22T20:11:37.530Z
Answers.LastActivityDate: 2014-10-22T20:29:05.030Z
Answers.LastEditDate: 2014-10-22T20:29:05.030Z
Answers.UserDisplayName: Natetronn
Body: <p>I feel this a simple problem to fix, but I can't find an answer anywhere.</p>
  
  <p>I am developing locally on using MAMP.</p>
  
  <p>Everything on my site is working great until I call up page using a template inside a folder inside the templates directory. At that point the paths are broken to any and all assets (CSS, images, etc.)</p>
  
  <p>For example, if I set the Entry Template for a section in Craft to say news/_entry and then view a news article page... I get an un-styled page.</p>
  
  <p>I am including the CSS like this:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="../public/assets/css/nav.css"&gt;
  </code></pre>
  
  <p>and the images like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="../public/assets/images/swf_logo.png" alt="" /&gt;
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-10-22T19:54:26.357Z
Comments.Text: Can you share how you are including your css as well as how you are setting the src in your img tags?
Comments.UserDisplayName: Natetronn
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-10-22T19:56:26.750Z
Comments.Text: Could you post the code for your layout template and the _entry template?
Comments.UserDisplayName: Alec Ritson
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-10-22T19:59:45.337Z
Comments.Text: Yes Natetronn...
  
  in my _layouts.html I am including the CSS like
  <link rel="stylesheet" href="../public/assets/css/nav.css">
  
  and the images like
  <img src="../public/assets/images/swf_logo.png" alt="" />
Comments.UserDisplayName: James Ledford
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-10-22T20:04:25.330Z
Comments.Text: @alec-ritson here is my _entry template code...
  
  {% extends "_layout" %}
  
  {% block content %}
   <article class="newsarticles">
    <h2>{{ entry.title }}</h2>
    <p class="newsdate">Posted on {{ entry.postDate.format('F d, Y') }}</p>
    {{ entry.body }}
   </article>
  {% endblock %}
Comments.UserDisplayName: James Ledford
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-10-22T20:10:18.480Z
Comments.Text: @JamesLedford Can you edit your original question with the template code?  Difficult to read code in comments.
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-09-12T15:56:13.937Z
Comments.Text: I have a similar problem. I installed craft in sub folder of live site for testing.
  It is xzy.com/munkak/craft-/
  I can put in my _layout.html
  <link rel="stylesheet" href="/munkak/craft-/css/html5reset.css" media="all">
  that is working fine.
  But targeting the images directory does not work the same way from calling from a css file like so: background: url("/munkak/craft-/assets/images/logo.jpg") no-repeat scroll 0% 0% transparent;
  this css is in /munkak/craft-/craft/templates/css An absolute src from xzy.com/munkak/craft-/assets/images/logo.jpg works.
  I am stuck with this.
  Any help would be gre
Comments.UserDisplayName: Csaba Dobo
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-09-12T17:07:35.167Z
Comments.Text: @CsabaDobo: I'd recommend [asking a new question](http://craftcms.stackexchange.com/questions/ask), since this thread is already long and complicated. Feel free to reference back to this thread, so people know you're dealing with a similar problem.
Comments.UserDisplayName: Lindsey D
Tags: <templating>
Title: Path and Entry Template problems when developing locally
ThreadText: # Path and Entry Template problems when developing locally
  
  (Asked by: username_0 on 2014-10-22)
  
  I feel this a simple problem to fix, but I can't find an answer anywhere.
  
  I am developing locally on using MAMP.
  
  Everything on my site is working great until I call up page using a template inside a folder inside the templates directory. At that point the paths are broken to any and all assets (CSS, images, etc.)
  
  For example, if I set the Entry Template for a section in Craft to say news/\_entry and then view a news article page... I get an un-styled page.
  
  I am including the CSS like this:
  
  ```html
  <link rel="stylesheet" href="../public/assets/css/nav.css">
  
  ```
  
  and the images like:
  
  ```html
  <img src="../public/assets/images/swf_logo.png" alt="" />
  
  ```
  
  **Tags:** templating
  
  > **Comments:**
  > **username_1**: Can you share how you are including your css as well as how you are setting the src in your img tags?  
  > **username_2**: Could you post the code for your layout template and the _entry template?  
  > **username_0**: Yes username_1...  in my _layouts.html I am including the CSS like <link rel="stylesheet" href="../public/assets/css/nav.css">  and the images like <img src="../public/assets/images/swf_logo.png" alt="" />  
  > **username_0**: @username_2-username_2 here is my _entry template code...  {% extends "_layout" %}  {% block content %}  <article class="newsarticles">   <h2>{{ entry.title }}</h2>   <p class="newsdate">Posted on {{ entry.postDate.format('F d, Y') }}</p>   {{ entry.body }}  </article> {% endblock %}  
  > **username_3**: @username_0 Can you edit your original question with the template code?  Difficult to read code in comments.  
  > **username_4**: I have a similar problem. I installed craft in sub folder of live site for testing. It is xzy.com/munkak/craft-/ I can put in my _layout.html <link rel="stylesheet" href="/munkak/craft-/css/html5reset.css" media="all"> that is working fine. But targeting the images directory does not work the same way from calling from a css file like so: background: url("/munkak/craft-/assets/images/logo.jpg") no-repeat scroll 0% 0% transparent; this css is in /munkak/craft-/craft/templates/css An absolute src from xzy.com/munkak/craft-/assets/images/logo.jpg works. I am stuck with this. Any help would be gre  
  > **username_5**: @username_4: I'd recommend [asking a new question](http://craftcms.stackexchange.com/questions/ask), since this thread is already long and complicated. Feel free to reference back to this thread, so people know you're dealing with a similar problem.  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_6 on 2014-10-22. Score: 5 | Accepted answer
  
  Your image/CSS/JS URLs should be either absolute, protocol-relative, or root-relative:
  
  ```html
  <!-- 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 `../assets/css/nav.css`.
  
  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”).
  
  > **Comments:**
  > **username_1**: The difference between username_6's answer and mine is that I'm just telling you how to get the job done. He on the other hand is trying to educate you. I give you examples of both absolute (via Craft Tags & Vars) as well as root-relative paths though, I didn't explain the why; just the how. Point being is that you should consider reading username_6's answer before you read mine :-)  
  > **username_0**: Thanks so much guys! I knew I was letting the paths get away from me somehow. username_6 did clear this up by his education. Again, thanks!  
  
  ---
  
  ### Answer by username_1 on 2014-10-22. Score: 1
  
  I would suggest using the [includeCssFile Tag](http://buildwithcraft.com/docs/templating/includecssfile) for your CSS files (there is another for [js files](http://buildwithcraft.com/docs/templating/includejsfile) for what ever it's worth)
  
  So for example in your case you'd have:
  
  `{% includeCssFile "/assets/css/nav.css" %}`
  
  Note: I think that is correct though you might need to play with the path a bit. Specifically the first slash.
  
  For the img tags you can probably get way with this:
  
  `<img src="/assets/images/swf_logo.png" alt="" />`
  
  or if you want you could add the [siteUrl Global Variable](http://buildwithcraft.com/docs/templating/global-variables#siteUrl) to the mix as well
  
  `<img src="{{ siteUrl }}assets/images/swf_logo.png" alt="" />`
  
  Note: again you might need to play with the starting slash depending on your config setup and siteUrl ending with a slash or not:
  
  `{{ siteUrl }}/assets/images/swf_logo.png`
  
  
  ---
  
  