[RESOLVIDO] JSF não encontra arquivo CSS

Olá pessoal,

Estou tentando resolver o problema faz dias e não consigo. Já vi problemas parecidos, mas nenhum deles funcionou comigo.

Estou usando o Eclipse Juno, Apache 6, JSF 2.1, Primefaces 3.5 e Spring 3.0.

Tudo certo, com exceção do CSS que não roda de jeito nenhum nas .XHTML.

Funciona se eu colocar o mesmo codigo do CSS no próprio .XHTML.

Ajudem por favor.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>Sistema</display-name>
    <welcome-file-list>
        <welcome-file>index.xhtml</welcome-file>
    </welcome-file-list>
    <servlet>
        <servlet-name>FacesServlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>FacesServlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/applicationContext.xml</param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <session-config>
        <session-timeout>5</session-timeout>
    </session-config>

    <!-- Spring framework -->
    <servlet>
        <servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/dispatcher-servlet.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <!-- FIM Spring framework -->

    <!-- Spring security -->
    <filter>
        <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>springSecurityFilterChain</filter-name>
        <url-pattern>/*</url-pattern>
        <dispatcher>FORWARD</dispatcher>
        <dispatcher>REQUEST</dispatcher>
    </filter-mapping>
    <!-- FIM Spring security -->
</web-app>

index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <title>Sistema</title>
    <link href="${facesContext.externalContext.requestContextPath}/css/p.css" rel="stylesheet" type="text/css" media="screen" />
</h:head>
<h:body>
    <div>
        <div id="logomarca">LOGOMARCA</div>
        <div id="titulo">Sistema em desenvolvimento</div>
        <div id="usuario">
            login: <a >login</a>
        &lt;/div&gt;
        &lt;div id="menu"&gt;
            &lt;p:menubar&gt;
                &lt;p:menuitem value="Home" url="index.xhtml" icon="ui-icon-home" /&gt;
            &lt;/p:menubar&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/h:body&gt;
&lt;/html&gt;

p.css

*{
 margin: 2; /*Zera todo o espaçamento EXTERNO entre as DIV's*/
 padding: 0; /*Zera todo o espaçamento INTERNO das DIV's*/
 }

#cabecalho { 
    display: block;
    height: 120px;
}

#logomarca { 
    height: 60px;
    width: 200px;
    position: fixed;
    top: 2px;
    left: 2px;
}

#titulo {
    align: center;
}

#usuario { 
    height: 60px;
    border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
    border-top-style: solid;
    border-right-width: 2px;
    border-left-width: 2px;
    border-bottom-width: 2px;
    border-top-width: 2px;
    border-right-color: silver;
    border-left-color: silver;
    border-bottom-color: silver;
    border-top-color: silver;
    background-color: #009900;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-style: normal;
    font-size: 10px;
    width: 150px;
    position: fixed;
    top: 2px;
    right: 2px;
}

#menu { 
    height: 60px;
    position: fixed;
    top: 60px;
    width: 100%;
}

estrutura dos diretórios

WebContent
    css
        p.css
    WEB-INF
        ...
    index.xhtml

tenta desse jeito

 <h:head>                                                          Pasta/arquivo css
        <link rel="stylesheet" type="text/css" href="Css/css_layout.css"/>
        <title>SGR</title>
    </h:head>

não deu certo. :frowning:

nossa, não sei mais onde procurar.

cara eu crio meu css diferente da um liga

.bemvindo{
    color: white;
    font: icon;
    font-size: smaller;
    font-weight: bold;
    margin-left: 8%;
    margin-top: 1px;
    position: absolute;
}

e ai no xhtml chamo ele

[/code]
<h:outputLabel value=“Bem Vindo(a):” styleClass=“bemvindo”/>

[code]

verifique para onde o link do css ta apontando, no codigo fonte da pagina gerada.

b10machado, obrigado pela força!

Também não funcionou. O problema é que o arquivo p.css que está no meu projeto, por algum motivo não é enviado no deploy. Não sei porque. Já tentei colocar na pasta raiz, em WebContent. Também tentei colocar em WEB-INF, também não funcionou.

Pelo Chrome, utilizando a opção "Ferramentas -> Ferramentas do desenvolvedor", através do botão "Console", pude verificar o erro:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/Sistema/css/p.css

Ou seja, o arquivo não está onde deveria ou nem foi enviado no deploy. Tanto é que se eu copiar o conteúdo arquivo p.css e colocar direto no index.xhtml, aí sim funciona.

:frowning:

no mesmo diretorio vc diz tipo

projeto

  • paginas web
    – Pasta Css
    — css.css
    • pagina.xhtml

meu diretorio esta desse jeito.

Masami,

Olha só o código fonte da página executada no Chrome.

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&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"&gt;

&lt;head&gt;
&lt;link type="text/css" rel="stylesheet"
	href="/Sistema/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" /&gt;
&lt;link type="text/css" rel="stylesheet"
	href="/Sistema/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" /&gt;
&lt;link type="text/css" rel="stylesheet"
	href="/Sistema/javax.faces.resource/layout/layout.css.xhtml?ln=primefaces" /&gt;
&lt;script type="text/javascript"
	src="/Sistema/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces"&gt;&lt;/script&gt;
&lt;script type="text/javascript"
	src="/Sistema/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces"&gt;&lt;/script&gt;
&lt;script type="text/javascript"
	src="/Sistema/javax.faces.resource/primefaces.js.xhtml?ln=primefaces"&gt;&lt;/script&gt;
&lt;script type="text/javascript"
	src="/Sistema/javax.faces.resource/layout/layout.js.xhtml?ln=primefaces"&gt;&lt;/script&gt;
&lt;link href="/Sistema/css/p.css" rel="stylesheet" type="text/css"
	media="screen" /&gt;
&lt;title&gt;Sistema&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div&gt;
		&lt;div id="logomarca"&gt;LOGOMARCA&lt;/div&gt;
		&lt;div id="titulo"&gt;Em desenvolvimento&lt;/div&gt;
		&lt;div id="usuario"&gt;
			login: <a >login</a>
		&lt;/div&gt;
		&lt;div id="menu"&gt;
			&lt;div id="j_idt8"
				class="ui-menu ui-menubar ui-widget ui-widget-content ui-corner-all ui-helper-clearfix"
				role="menubar"&gt;
				<ul >
					<li  ><a
						 
						>&lt;span
							class="ui-menuitem-icon ui-icon ui-icon-home"&gt;&lt;/span&gt;&lt;span
							class="ui-menuitem-text"&gt;Home&lt;/span&gt;</a></li>
				</ul>
			&lt;/div&gt;
			&lt;script id="j_idt8_s" type="text/javascript"&gt;
				PrimeFaces.cw('Menubar', 'widget_j_idt8', {
					id : 'j_idt8',
					autoDisplay : true
				});
			&lt;/script&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;script id="j_idt11_s" type="text/javascript"&gt;
		$(function() {
			PrimeFaces.cw('Layout', 'widget_j_idt11', {
				id : 'j_idt11',
				east : {
					paneSelector : '#j_idt12',
					size : '200',
					resizable : false,
					closable : false
				},
				center : {
					paneSelector : '#j_idt13',
					size : 'auto',
					resizable : false,
					closable : false
				}
			}, 'layout');
		});
	&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

b10machado,

As pastas estão assim:

WebContent
    css
        p.css
    WEB-INF
        ...
    index.xhtml

e já tentei colocar o p.css em WebContent e também no WEB-INF

WebContent
    WEB-INF
        ...
    index.xhtml
    p.css

o correto é o 1 mesmo entao e seu caminho q esta errado no

tenta assim

  <h:head>                                                           
       <link rel="stylesheet" type="text/css" href="css/p.css"/>  
   </h:head> 

b10machado,

Também não funcionou.

Estou convencido que o problema não é o código, acho que o Eclipse não está fazendo o deploy ou o Tomcat está bloqueando a aplicação. Quando executo a aplicação pelo Eclipse o Tomcat fica fora, não consigo executar o status do servidor pelo http://localhost:8080, como se o Tomcat não tivesse executado o statup. Daí subo o Tomcat na unha mesmo para ver o status do servidor, mas o meu sistema não está na lista de aplicações.

Criei um novo projeto no Eclipse, com os mesmos arquivos index.xhtml e p.css, mas a configuração do [i]web.xml[/i] só para JSF 2.1 e PrimeFaces 3.5 e funcionou corretamente.

Agora vou incluir o Spring Framework 3.0.2 e depois o Spring Security e Hibernate. Vamos ver qual configuração está bloqueando o CSS.

Consegui resolver no projeto completo. Na verdade recebi dica de outro post para criar a pasta “resources”, dentro dela a pasta “css” e depois mover o arquivo “.css”. Por fim, substituir a tag html por:

&lt;h:outputStylesheet library="css" name="p.css"  /&gt;

O link do post que recebi com a solução é
http://www.guj.com.br/1184-jsf-nao-encontra-arquivo-css

Não entendi como funciona, só sei que funcionou. Agora vou continuar no projeto novo para saber se foi o Spring ou o Hibernate que estava causando o erro. Vai ser ótimo se alguém puder explicar como funciona a solução.

Valeu pela força galera.