Css para exibir página inteira

19 de julho de 2012 3 respostas

prog.tiago 19 de julho de 2012

Olá amigos,

Necessito de uma forcinha para criar um template para usar com facelets.

O fato é que quero criar uma template com 4 divs (topo, esquerdo, rodapé e conteúdo). Show de bola, o problema eh que no meu css não consigo configurar para que a barra esquerda por exemplo, ocupe 100% da página na vertical.

Não manjo nada de css, pesquisei na net, mas não achei ainda.

Alguém poderia me dar uma força?

Segue meu css

#top {
    position: relative;
    background-color: #036fab;
    color: white;
    padding: 45px;
    margin: 0px 0px 10px 0px;
    
}

#bottom {
    position: relative;
    background-color: #c2dfef;
    padding: 5px;
    margin: 10px 0px 0px 0px;
}

#left {
    position: relative;
    float: left;
    background-color: #ece3a5;
    padding: 5px;
    width: 150px;
    margin-bottom: 10px;
   

}

#right {
    float: right;
    background-color: #ece3a5;
    padding: 5px;
    
}

.center_content {
    position: relative;
    background-color: #dddddd;
    padding: 5px;
 
}

.left_content {
    background-color: #dddddd;
    padding: 5px;
    margin-left: 170px;
  
    
}

.right_content {
    background-color: #dddddd;
    padding: 5px;
    margin: 0px 170px 0px 170px;
}

#top a:link, #top a:visited {
  color: white;
  font-weight : bold;
  text-decoration: none;
}

#top a:link:hover, #top a:visited:hover  {
  color: black;
  font-weight : bold;
  text-decoration : underline;
}

Segue tbm a imagem da página como tá sendo exibida atualmente.

3 Respostas

paulo.rqo 20 de jul. de 2012

Se vc tiver usando JSF 2, pode usar o primefaces para tratar do posicionamento do layout da sua aplicação, segue um exemplo abaixo:

http://www.primefaces.org/showcase/ui/layoutFull.jsf

No template seu vc define assim, por exemplo:

<p:layout fullPage="true">
        <p:layoutUnit position="north"  size="50">
                <ui:insert name="top">
                        <ui:include src="/pages/template/topo.xhtml" />
                </ui:insert>
                </p:layoutUnit>
                <p:layoutUnit position="center">
                    <ui:insert name="center"/>
                </p:layoutUnit>
                <p:layoutUnit position="south" size="50">
                      <ui:include src="/pages/template/rodape.xhtml" />
          </p:layoutUnit>
 </p:layout>

Vc cria xhtml para o topo, menu, rodape e insere com um include.

Com isso vc n precisa se preocupar com css

Zabimaru 20 de jul. de 2012

Fala tiago,

Segue um exemplo bem simples que eu tenho aqui, se ajudar:

<html>
 <style type="text/css">

body {
   	margin:0 0 0 0;
	padding:0;
	background-color:white;
	font:italic 14px,
	Verdana, Arial, Serif;
	width:100%;
	height: 100%;
}
#topo{
	width:auto;
	background-color:red;
	color:#0f0;
	text-align:center;
	height:10%;
}
#esquerda {
	width:20%;
	top:60px;
	left:5px;
	color:#99f;
	padding-bottom:20px;
	background-color: blue;
	float: left;
	height: 90%;
}
#footer {
	width:100%;
	color:#99f;
	background-color: gray;
	color:white;
}

#centro {    
	background:#22232F;
	color:#991;
	padding:2px 10px;
	text-align:justify;
	background-color:black;
	float:right;
	width:80%;
	height:90%;
}


</style>
<head>

</head>
<body>
<div id="topo">
Meu TOPO
</div>
<div id="esquerda">
ESQUERDA
</div>
<div id="centro">
CENTRO
</div>
<div id="footer">
FOOTER
</div>
</bodY>
</html>

Caso queira um lugar bacana para pesquisa, segue o site do Maujor: http://www.maujor.com/index.php

abss

prog.tiago 23 de jul. de 2012

Boa noite,

Obrigado amigos.

Conheço o primefaces, estava tentando fazer na unha para aprendizado mesmo. Confesso que passo muito nervoso quando tento usar html puro.
Viva ao PrimeFaces e outras tecnologias.

Abraços

Criado 19 de julho de 2012

Ultima resposta 23 de jul. de 2012

Respostas 3

Participantes 3

3 Respostas

Topicos relacionados