title: JSF template: missing layout
body: <p>I'm very new to JSF and I have some problem using JSF template. The code of the template newTemplate.xhtml) looks like this:</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt; 
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"&gt;
  
      &lt;h:head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
          &lt;link href="./resources/css/default.css" rel="stylesheet" type="text/css" /&gt;
          &lt;link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" /&gt;
          &lt;title&gt;&lt;ui:insert name="title"&gt;Default title&lt;/ui:insert&gt;&lt;/title&gt;
      &lt;/h:head&gt;
      &lt;h:body&gt;
          &lt;div id="top"&gt;
              &lt;ui:insert name="top"&gt;Top&lt;/ui:insert&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div id="left"&gt;
                  &lt;ui:insert name="left"&gt;Left&lt;/ui:insert&gt;
                  &lt;h:form&gt;
                      &lt;h:commandButton id="test" value="Test" action="/jsf/newTemplateClient.xhtml"/&gt;
                  &lt;/h:form&gt;
              &lt;/div&gt;
              &lt;div id="content" class="left_content"&gt;
                  &lt;ui:insert name="content"&gt;Content&lt;/ui:insert&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="bottom"&gt;
              &lt;ui:insert name="bottom"&gt;Bottom&lt;/ui:insert&gt;
          &lt;/div&gt;
      &lt;/h:body&gt;
  &lt;/html&gt;    
  </code></pre>
  
  <p>Start page called index1.xhtml looks like this:</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"&gt;
  
      &lt;body&gt;
          &lt;ui:composition template="/WEB-INF/newTemplate.xhtml"&gt;
              &lt;ui:define name="title"&gt;
                  TEST
              &lt;/ui:define&gt;
          &lt;/ui:composition&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Finally template client page (called newTemplateClient.xhtml):</p>
  
  <pre><code>&lt;ui:composition template="/WEB-INF/newTemplate.xhtml"
              xmlns:ui="http://java.sun.com/jsf/facelets"&gt;
     &lt;ui:define name="content"&gt;
          Some content in newTemplateClient.xhtml
     &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p>Here is the behaviour of the application:</p>
  
  <ol>
  <li>Application starts (address bar says localhost:8080/WebTEST/) and the layout and content is displayed properly,</li>
  <li>I click on the 'Test' button and the content of newTemplateClient.xhtml is also displayed properly (address changes to: localhost:8080/WebTEST/faces/index1.xhtml),</li>
  <li>I click again 'Test' button and the content is displayed but I loose the layout like there is no css style applied (no colors and formatting). Now the address bar says: localhost:8080/WebTEST/faces/jsf/newTemplateClient.xhtml</li>
  </ol>
  
  <p>The template file is located in WEB-INF folder, the newTemplateClient.xhtml is located in jsf folder.</p>
  
  <p>I know it's probably some simple thing but I really ran out of ideas what might be the cause of this problem.</p>