Navigation with Facelets template not working

I'm having some trouble with navigation when using Facelets.

I have my master template in /WEB-INF:

<h:body>
    <div id="container">
        <div id="header">
            <ui:insert name="header">Header</ui:insert>
        </div>

        <div id="navigation">

            <a href="ram.xhtml">RAM</a>
            <a href="mobo.xhtml">Motherboard</a>
            <a href="video.xhtml">Video Card</a>
        </div>

        <div id="content">
            <ui:insert name ="content"></ui:insert>
        </div>

    </div>
</h:body>

and then 2 template clients that look exactly the same, index.xhtml and ram.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./WEB-INF/layoutTemplate.xhtml">

    <ui:define name="header">
       some text
    </ui:define>

    <ui:define name="content"> 
        some content
    </ui:define>


</ui:composition>

If either of these pages are set as the welcome page in the web.xml, they are rendered correctly, with CSS and everything. But if I try to navigate from one page to the other using the link I get

This XML file does not appear to have any style information associated with it. The document tree is shown below.

Any hints would be greatly appreciated.

This means that the request URL (as appears in browser address bar) didn't match the URL pattern of the FacesServlet as definied in web.xml.

Those links

<a href="ram.xhtml">RAM</a>
<a href="mobo.xhtml">Motherboard</a>
<a href="video.xhtml">Video Card</a>

expects the FacesServlet to be mapped on *.xhtml. But if it's mapped on for example *.jsf and changing it to *.xhtml is not an option for some reason (I however strongly recommend it), then you'd need to fix the links

<a href="ram.jsf">RAM</a>
<a href="mobo.jsf">Motherboard</a>
<a href="video.jsf">Video Card</a>

Or, better, just use <h:link>. It'll implicitly append the proper context path and FacesServlet mapping:

<h:link value="RAM" outcome="ram" />
<h:link value="Motherboard" outcome="mobo" />
<h:link value="Video Card" outcome="video" />

Navigation with Facelets template not working

See also: