Problema com alinhar JSF com CSS [resolvido]

25 de agosto de 2011 11 respostas

delki8 25 de agosto de 2011

Pessoal estou apanhando um bocado aqui tentando alinhar esses dois rich:panel de acordo com meu arquivo CSS:

(Não coloquei direto no post porque a imagem é grande)
http://img37.imageshack.us/img37/72/seleo006.png

Esse é o meu JSP

&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%&gt;
&lt;%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%&gt;
&lt;%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%&gt;
&lt;%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%&gt;
&lt;%@ taglib prefix="rich" uri="http://richfaces.org/rich"%&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;link rel=stylesheet href="css/estilo.css" type="text/css" /&gt;
&lt;title&gt;Cadastrar pagamentos&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;f:view&gt;
		&lt;%@include file="cabecalho.jsp"%&gt;
		&lt;a4j:loadScript src="scripts/jquery.maskMoney.js"&gt;&lt;/a4j:loadScript&gt;
			&lt;h:panelGrid columns="3" styleClass="richPanelGrande"&gt;
				&lt;rich:panel styleClass="richPanel"&gt;
				&lt;f:facet name="header"&gt;
					&lt;h:outputText value="Cadastro de Pagamentos" /&gt;
				&lt;/f:facet&gt;
					&lt;%@include file="part/cadastrarPagamento.jsp"%&gt;
				&lt;/rich:panel&gt;

				&lt;rich:panel styleClass="richPanelCentro"&gt;
					&lt;%@include file="part/graficoInicio.jsp"%&gt;
					&lt;%@include file="part/tabelaPagamentos.jsp" %&gt;
				&lt;/rich:panel&gt;

				&lt;rich:panel styleClass="richPanel"&gt;
				&lt;f:facet name="header"&gt;
					&lt;h:outputText value="Filtro para pagamentos" /&gt;
				&lt;/f:facet&gt;
					&lt;%@include file="part/filtro.jsp"%&gt;
				&lt;/rich:panel&gt;
		&lt;/h:panelGrid&gt;
	&lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;

E aqui é o meu CSS:

@CHARSET "UTF-8";
.richPanel {
	height: 590;
	width: 357;
}

.richPanelCentro {
	height: 100%;
	width: 600;
}
.richPanelGrande{
	top: 0%;
	vertical-align: top;
}

.outputTextPadrao{
	font-size: 8pt;
}

11 Respostas

andre.froes 25 de ago. de 2011

Cara, provavelmente isso que eu vou falar n vai adiantar mta coisa, nem vi o seu codigo direito para ser sincero, mas sei que e uma tabrla e que o componente central esta na 2 coluna ditando o tamanho. Tente colocar float para seus 2 componentes na lateral.

#painelEsquerdo{
float: left;
}

#painelDireito{
float: right;
}

Ajuste o posicionamento do seu layout para relative e veja se traz resultados melhores.

rock 25 de ago. de 2011

delki8,

para alguém poder ajudar, posta o código HTML gerado, ou melhor, salva a página, zipa e posta ai :!:

delki8 25 de ago. de 2011

Poxa ta bem canceira de ler o HTML gerado mas se vocês animarem… Ai vai:
http://textuploader.com/?p=6&id=gJXh
To começando agora com JSF e ainda apanho um pouco sobre as regras possíveis de serem aplicadas com CSS

rock 25 de ago. de 2011

delki8, o html nao veio completo.

para ficar mais fácil , utilize a opção ‘salvar como…’ do seu navegador. Vai salvar uma página html e um diretório com imagens , css, etc da página. Zipa e manda ai!
Assim poderemos reproduzir o problema e ajudar :!:

delki8 25 de ago. de 2011

Mas é pra já:
http://www.megaupload.com/?d=EMR0W84U

E valeu a prestatividade viu pessoal?

rock 25 de ago. de 2011

tente adicionar o código abaixo no seu estilo.css:

.richPanelGrande tr td:first-child, .richPanelGrande td+td+td {
	vertical-align: top;
}

delki8 25 de ago. de 2011

Achei a estrutura do CSS um pouco estranha depois dessa recomendação rock mas deu absolutamente certo da forma como eu queria, valeu cara.

Só queria pedir que você explicasse essas alterações no CSS porque eu fiz mas não entendi, ai quando eu precisar de novo acho que ficarei um pouco confuso. Pode explicar?

rock 25 de ago. de 2011

Claro,

é o seguinte:

seu <h:panelGrid columns=“3” styleClass=“richPanelGrande”> vai gerar uma tabela com 3 colunas (3 tds).
Para ficar da forma que vc queria, precisava alinhar no topo (vertical-align: top) a primeira e a terceira coluna (ou poderia ser todas também).

“.richPanelGrande tr td:first-child” é o seletor para pegar a primeira coluna (first child)
“.richPanelGrande td+td+td” é o seletor para pegar um td precedido por 2 tds, portanto, é o seletor para pegar a terceira coluna

Sobre os seletores podes olhar aqui: http://www.w3.org/TR/CSS2/selector.html

Porque nao fiz assim?

.richPanelGrande td { vertical-align: top; }
Porque iria pegar todos os td que estão dentro do seu panelGrid, inclusive os td da tabela logo abaixo do gráfico.

Não lembro se com o <h:panelGrid> vc consegue definir a classe das TDs, mas se conseguir, fica mais fácil e mais compreensível.
ficaria algo do tipo:

jsf:
<h:panelGrid columnClasses="alinhaTopo" columns="3">

html gerado:
<table><tr><td class="alinhaTopo">...</td><td class="alinhaTopo">...</td><td class="alinhaTopo">...</td></tr></table>

css:
 .alinhaTopo { vertical-align: top; }

dúvidas?

delki8 25 de ago. de 2011

Sem mais dúvidas, fiz com o .richPanelGrande td{} e deu certinho, fora que eu também entendi o que ta acontecendo. Muitíssimo obrigado cara e tenha uma ótima noite.

rock 25 de ago. de 2011

valeu :!: igualmente :!:

delki8 25 de ago. de 2011

Podia muito rolar um ranking pra quem resolvesse os problemas da gente né? Acho que dava um status legal pros usuários.

Criado 25 de agosto de 2011

Ultima resposta 25 de ago. de 2011

Respostas 11

Participantes 3

11 Respostas

Topicos relacionados