Como definir ccs externo em páginas JSF

Front-end
#1

bom dia minha página está assim…

<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>Sistema volens</title>
		<link rel="stylesheet" type="text/css" href="../css/model_alpha.css" />
	</head>
	<body>
		<f:view>
			<form action="get">
				<div id="divcentral">
					<h:form>
						<h:commandButton value="Sair"></h:commandButton>
					</h:form>
				</div>
			</form>
		</f:view>
	</body>
</html>

e meu arquivo model_alpha.css está assim…


@CHARSET "ISO-8859-1";
body 
{
	margin: 0px;
	padding: opx;
}

body #divcentral
{
	position: relative;
	width: 900px;
	height: 780px;
	background-color: red;
	margin-left: auto;
	margin-right: auto;
}

na verdade a página fez o daownload do css externo, mas a propriedade que define a margem para a div como auto não foi aplicada, ela só é aplicada se eu tirar
as tags do jsf e deixar só html. Como posso resolver isso, tenho que importar o arquivo css de outra forma?
obrigado

#2

Isso é porque o faces reescreve as URLs da sua aplicação.
Então um recurso que está fisicamente em um diretório, passa a ficar em um outro diretório.

Para obter os recursos da sua aplicação usando caminho absolutos, tente essas alternativas:

1 - <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/faces/css/model_alpha.css"/> 2 - <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/model_alpha.css"/> 3 - <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.request.contextPath}/faces/css/model_alpha.css"/> 4 - <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.request.contextPath}/css/model_alpha.css"/>

Com isso, o faces vai parar de reescrever a URL pq ${pageContext.request.contextPath} ou #{facesContext.externalContext.request.contextPath} (que geram a mesma saída) vão retornar o caminho do contexto da sua aplicação. Veja qual funciona e poste seu resultado. Não lembro de cabeça para falar qual são corretas. Acredito que sejam as sem o “/faces”.

[]'s

#3

bom dia David
coloquei os arquivos:

 <link rel="stylesheet" type="text/css" href="${facesContext.externalContext.request.contextPath}/faces/css/model_alpha.css"/>

e

 <link rel="stylesheet" type="text/css" href="${facesContext.externalContext.request.contextPath}/css/model_alpha.css"/>

ambos carregaram o css mas esta propriedade margin-left e margin-right não funcionou ainda…

mas muito obrigado, muito esclarecedor seu post…

#4

Oi nykel,

Disponha. :slight_smile:
Só um detalhe. Use apenas uma das alternativas e veja se a carga do CSS está sendo consistente em todas as suas páginas beleza?

[]'s

#5

ok valeu…
sucesso
bom fim de semana

#6