Centralizar dataTable

Front-end
#1

Galera, to com um problema para centralizar as dataTalbes da minha pagina que tah foda. Jah tentei de tudo, li documentocao, coloquei align="center em tudo q eh lugar mas nao adianta, ag sabe como devo proceder? To usando css e JSF, abaixo segue os codigos das paginas e uma print de como fica …

pagina de listagem

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.prime.com.tr/ui" 
        xmlns:pm="http://primefaces.org/mobile"
        >
<h:head>
	<link href="../resources/css/estiloVerde.css" rel="stylesheet" type="text/css"></link>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Produtos</title>
	<p:resources /> 
</h:head>
<body> 

	<f:metadata>  
  		<f:viewParam name="sessao" value="#{produtoBean.idMenuEscolhido}" />  
	</f:metadata> 
	
	<div id="container">
		<div id="barraSuperior">
			<ui:include src="barraSuperior.xhtml"/>
		</div>
		<div id="menu" align="center">
			<ui:insert name="menu">
				<ui:include src="menu.xhtml"/>
			</ui:insert>
		</div>
		<div id="corpo" align="center">
			<ui:insert name="corpo" align="center">
				<p align="center">
				<h:form align="center">
					<p:messages id="msgs" showDetail="true"/>

					<h:dataTable value="#{produtoBean.produtosPorMenu}" var="produto" align="center">
					<h:column>
						<h:graphicImage library="#{produtoBean.dirImagem}" name="#{produto.icone}" width = "128" height = "124" />
					</h:column>
					<h:column>
						<f:facet name="header">Nome</f:facet>
							#{produto.nome}
					</h:column>
					<h:column>
						<f:facet name="header">Preco:</f:facet>
						#{produto.preco}
					</h:column>
					<h:column>
						<f:facet name="header">Descricao:</f:facet>
						#{produto.descricao}
					</h:column>
					<h:column>
						<h:commandButton action="#{produtoBean.abrirProduto}" value="Info" >
							<f:setPropertyActionListener target="#{produtoBean.produto}" value="#{produto}" />
						</h:commandButton>		
					</h:column>
					</h:dataTable>
			</h:form>
			</p>
			</ui:insert>
		</div>
	</div>
</body>
</html>

css

body{
	background-color: #709E1A;
}

#container{
	widht: 500px;
	height: 100%;
	margin: 0 auto;
	background-color: #FFF;
}

#menu {
	float:left;
	height:100%;
	width:20%;
	background-color: #FFF;
	color: #D6D6D6;
}

#corpo {
	background-color: #FFF;
	float:right;
	text-align:center;
	height: 100%;
	width:80%;
}

#barraSuperior{
	widht: 100%;
	background-color: white;
}

Link do print da pagina
http://img641.imageshack.us/img641/7445/paginaq.jpg

Soh falta arrumar isso para o sistema ficar praticamente “pronto”. Outra coisinha, se ag souber como deixar as duas div, menu e corpo, com o mesmo tamanho sempre, seria de grande ajuda, parte grafica naum eh comigo hehehehe

#2

olha eu refiz tuas páginas, ficou feio mas tudo bem sem a base nem as imagens hehehe
mas olha quando eu colei teu código no netbeans ele reclamou muito
principalmente aqui

[code]
<ui:insert name=“corpo” align=“center”>


<h:form align=“center”>
<p:messages id=“msgs” showDetail=“true”/>

                <h:dataTable value="#{produtoBean.produtosPorMenu}" var="produto" align="center">  [/code];

bom esses componentes não tem o atributo align.
uma das coisa que eu sempre uso nesses casos
é usar a tag do HTML seu conteúdo

eu coloque essa tag e ele foi para o centro
talvez te ajude

<?xml version="1.0" encoding="ISO-8859-1" ?>  
<!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:f="http://java.sun.com/jsf/core"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:ui="http://java.sun.com/jsf/facelets"  
      xmlns:p="http://primefaces.prime.com.tr/ui"   
      xmlns:pm="http://primefaces.org/mobile" 
      >  
    <h:head>  
        <link href="../resources/css/estiloVerde.css" rel="stylesheet" type="text/css"></link>  
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
        <title>Produtos</title>  
        <p:resources />   
    </h:head>  
    <body>   

        <f:metadata>    
            <f:viewParam name="sessao" value="#{produtoBean.idMenuEscolhido}" />    
        </f:metadata>   

        <div id="container">  
            <div id="barraSuperior">  
                <ui:include src="barraSuperior.xhtml"/>  
            </div>  
            <div id="menu" align="center">  
                <ui:insert name="menu">  
                    <ui:include src="menu.xhtml"/>  
                </ui:insert>  
            </div>  
            <div id="corpo">  
                <ui:insert name="corpo">  

                    <h:form>  
                        <p:messages id="msgs" showDetail="true"/>  
                        <center>
                            <h:dataTable value="#{produtoBean.produtosPorMenu}" var="produto">  
                                <h:column>  
                                    <h:graphicImage library="#{produtoBean.dirImagem}" name="#{produto.icone}" width = "128" height = "124" />  
                                </h:column>  
                                <h:column>  
                                    <f:facet name="header">Nome</f:facet>  
                                    #{produto.nome}  
                                </h:column>  
                                <h:column>  
                                    <f:facet name="header">Preco:</f:facet>  
                                    #{produto.preco}  
                                </h:column>dgd  
                                <h:column>  
                                    <f:facet name="header">Descricao:</f:facet>  
                                    #{produto.descricao}  
                                </h:column>  
                                <h:column>  
                                    <h:commandButton action="#{produtoBean.abrirProduto}" value="Info" >  
                                        <f:setPropertyActionListener target="#{produtoBean.produto}" value="#{produto}" />  
                                    </h:commandButton>          
                                </h:column>  
                            </h:dataTable> 
                        </center>
                    </h:form>  

                </ui:insert>  
            </div>  
        </div>  
    </body>  
</html>

só mai uma coisa
por que não usa facelets (template) é bem mais fácil e reaproveita muito os código
heheh

#3

Valeu kra, funcionou por aqui, e era bem mais simples do q eu pensei, realmente, interface nao eh comigo.

Vou dar uma lida em facelets, o que ocorre eh q esse eh um projeto em separado q eu e mais dois amigos temos, eu fiquei responsavel pela logica (comunicacao BD, seguranca, etc) e meu outro amigo ficaria responsavel pela interface, montar as paginas, mas o kra eh mais enrrolado que a vida e se atrapalha sozinho e soh falta isso para por o projeto no ar, se ficar esperando o kra leva 1 ano e ele nao resolve nada hehehe

#4