FACELETS + CSS duvida

eis o cenario, estou estruturando o template q vai ser usado por um app, vou utilizar o facelets, a estrutura é a seguinte:

:arrow: cabealho
:arrow: futuramente um menu
:arrow: conteudo
:arrow: rodape

esse é o template

[code]

  <div id="cabecalho">
    <ui:insert name="cabecalho"></ui:insert>
  </div>
</div>
[/code]

esse é o css

#cabecalho{ margin-top: 0px; background: red; height: 10em; } #corpo { border: 1px solid Black ; margin: 0 auto; width: 768px; }

e essa é a pagina q utilizara o template

[code]

[/code]

qnd executo, ele printa na tela o <h:outputText> ou qqlr outro valor antes do cabecalho, quebrando a estrutura mencionada acima …

alguem ja teve esse problema com facelets? como eu resolvo ?

pq isso acontece?

Acredito que você não pode utilizar a tag ui:define dentro de outra ui:define.

Tente algo como:

&lt;ui:composition template="template.xhtml"&gt; &lt;ui:define name="geral"&gt; &lt;h:outputText value="teste"/&gt; &lt;/ui:define&gt; &lt;ui:define name="cabecalho"&gt;&lt;/ui:define&gt; &lt;/ui:composition&gt;