CENTRALIZAÇÃO DE TELAS, COM MASTERPAGE E DIVs
Já Utilizo MasterPage, Div e StyleSheet.
Tenho feito telas padrões para uma configuração de monitor 1024 X 768.
Entretanto quando a configuração é maior que 1024 X 768, a tela fica posicionada no lado esquerdo e superior da tela.
Como fazer para continuar usando Masterpage com DIVS, e centralizar essa telas em monitores configurações maiores.
Grato
Sidney
Tenho feito telas padrões para uma configuração de monitor 1024 X 768.
Entretanto quando a configuração é maior que 1024 X 768, a tela fica posicionada no lado esquerdo e superior da tela.
Como fazer para continuar usando Masterpage com DIVS, e centralizar essa telas em monitores configurações maiores.
Grato
Sidney
Sidney Mendonça/
Curtidas 0
Respostas
Luiz Maia
15/07/2009
Ola Sydney,
É muito simples o que quer, basta centralizar a MasterPage que todos os containers se adequam.
Veja um Exemplo de trecho de codigo da Master Page:
<body>
<form id="form1" runat="server">
<center>
Aqui seu containner
</center>
Espero ter ajudado.
Aguardo seu retorno.
Att
Luiz Maia
GOSTEI 0
Sidney Mendonça/
15/07/2009
Olá Luiz.
Eu já utilizei o comando da forma que você sugeriu.
O problema é que não consigo posicionar as div com Style.
Veja abaixo no Print da MasterPage..
A primeira div (linhas 10,11,12) que não tem Style funciona como você sugeriu.
Já a segunda div "Menu" (linhas 12 a 16) não centraliza.
O mesmo aconte com as div "Rodapé" (linhas 18,19,20) e div "Conteúdo" linhas (21 a 14)
A StyleSheet.css encontra-se impressa abaixo.
Grato
Sidney
Print da MasterPage
1<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" >
4<head runat="server">
5 <title>Untitled Page</title>
6</head>
7<body>
8 <form id="form1" runat="server">
9 <center>
10 <div>
11 <asp:Image ID="imgBanner" runat="server" ImageUrl="~/Imagens/logo_terreiro.gif" />
12 </div>
13 <div class="Menu">
14 <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
15 </asp:ContentPlaceHolder>
16 </div>
17
18 <div class="Rodapé">
19 <asp:Image ID="Image1" runat="server" ImageUrl="~/Imagens/banner_rodape.gif" />
20 </div>
21 <div class="Conteúdo">
22 <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
23 </asp:contentplaceholder>
24 </div>
25 </center>
26 </form>
27</body>
28</html>
StyleSheet.css
.Menu
{
left: 10px;
width: 150px;
position: absolute;
top: 115px;
height: 475px;
background-color: #81c5e9;
} .Conteúdo
{
border: solid 1px black;
padding: 10px;
background-color: white;
left: 163px;
width: 809px;
position: absolute;
top: 118px;
height: 446px;
} .Rodapé
{
left: 10px;
width: 990px;
position: absolute;
top: 590px;
height: 20px;
background-color: red;
}
Print da Tela
{
left: 10px;
width: 150px;
position: absolute;
top: 115px;
height: 475px;
background-color: #81c5e9;
} .Conteúdo
{
border: solid 1px black;
padding: 10px;
background-color: white;
left: 163px;
width: 809px;
position: absolute;
top: 118px;
height: 446px;
} .Rodapé
{
left: 10px;
width: 990px;
position: absolute;
top: 590px;
height: 20px;
background-color: red;
}
Print da Tela
GOSTEI 0
Luiz Maia
15/07/2009
Sydnei,
Tente tirar os position: absolute; dos seus estilos;
Veja se funciona.
Aguardo
Att
Luiz Maia
GOSTEI 0
Sidney Mendonça/
15/07/2009
Olá Luiz.
Eu também já tinha testado sem o position: absolute.
O que acontece é que ele centraliza a div inteira, ficando como mosta a imagem a seguir. E o que quero é que a tela fique como mostra a imagem 2, porém tudo centralizado.
Grato pela atenção.
Sidney
IMAGEM 1
IMAGEM 2
GOSTEI 0
Luiz Maia
15/07/2009
Me mande seu prejeto compactado via Disco Virtual, assim posso consertar para vc e o disponibilizo novamente, pode ser?
Att
Luiz Maia
GOSTEI 0
Sidney Mendonça/
15/07/2009
Olá Luiz.
Eu vou providenciar um projeto demo com as necessidades e lhe enviarei.
Grato pela atenção.
Sidney
GOSTEI 0
Luiz Maia
15/07/2009
Blz, estou aguardando...
GOSTEI 0
Sidney Mendonça/
15/07/2009
Olá Luiz.
Coloquei o projeto no disco virtual conforme instruções.
http://video.devmedia.com.br/discovirtual/7717/PlexoDemo.zip
Grato pela atenção.
Sidney
GOSTEI 0
Luiz Maia
15/07/2009
Ola Sydney,
Tente o seguinte, substitua seu extilo por:
.centralizar
{
width:900px;
margin:0px auto;
}
.Menu
{
width: 150px;
position: absolute;
top: 115px;
height: 475px;
background-color: #81c5e9;
}
.Conteudo
{
border: solid 1px black;
padding: 10px;
background-color: white;
left: 155px;
width: 809px;
position: relative;
height: 446px;
}
.Rodape
{
left: 155px inherit;
width: 990px;
position: absolute;
top: 590px;
height: 20px;
background-color: white;
}
E sua masterpage por:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div class="centralizar">
<div>
<asp:Image ID="imgBanner" runat="server" ImageUrl="~/Imagens/logo_balcao.gif" />
</div>
<div class="Rodape">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Imagens/banner_rodape.gif" />
</div>
<div class="Conteudo">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="Menu">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
Aguardo retorno.
Abraços
Att
Luiz Maia
GOSTEI 0
Sidney Mendonça/
15/07/2009
Olá Luiz.
Não mudou nada em relação a minha situação original.
Segue abaixo imagem da tela após alterações solicitadas.
Grato.
Sidney
GOSTEI 0
Luiz Maia
15/07/2009
Ola Sydnei, confira se esta tudo certo por favor, por que como vocÊ pode ver abaixo, funcionou perfeitamente.
Aguardo
Att
Luiz Maia
GOSTEI 0
Sidney Mendonça/
15/07/2009
Olá Luiz.
Obrigado pela atenção.
Eu simplesmente copiei as suas instruções e colei nos respectivos lugares.
Segue abaixo as alterações.
Você poderia postar o projeto funcionando no disco virtual?
Grato
Sidney
--------------------------------------------------
.centralizar
{
width:900px;
margin:0px auto;
}
.Menu
{
width: 150px;
position: absolute;
top: 115px;
height: 475px;
background-color: #81c5e9;
} .Conteudo
{
border: solid 1px black;
padding: 10px;
background-color: white;
left: 155px;
width: 809px;
position: relative;
height: 446px;
} .Rodape {
left: 155px inherit;
width: 990px;
position: absolute;
top: 590px;
height: 20px;
background-color: white;
} ------------------------------------ <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body> <form id="form1" runat="server">
<div class="centralizar">
<div>
<asp:Image ID="imgBanner" runat="server" ImageUrl="~/Imagens/logo_balcao.gif" />
</div>
<div class="Rodape">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Imagens/banner_rodape.gif" />
</div>
<div class="Conteudo">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="Menu">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
{
width:900px;
margin:0px auto;
}
.Menu
{
width: 150px;
position: absolute;
top: 115px;
height: 475px;
background-color: #81c5e9;
} .Conteudo
{
border: solid 1px black;
padding: 10px;
background-color: white;
left: 155px;
width: 809px;
position: relative;
height: 446px;
} .Rodape {
left: 155px inherit;
width: 990px;
position: absolute;
top: 590px;
height: 20px;
background-color: white;
} ------------------------------------ <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body> <form id="form1" runat="server">
<div class="centralizar">
<div>
<asp:Image ID="imgBanner" runat="server" ImageUrl="~/Imagens/logo_balcao.gif" />
</div>
<div class="Rodape">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Imagens/banner_rodape.gif" />
</div>
<div class="Conteudo">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="Menu">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
GOSTEI 0
Sidney Mendonça/
15/07/2009
Olá Luiz.
Favor desonsiderar o ultimo poste.
Apóss o envio me "veio uma luz" de limpar os cookies, arquivos temporários, etc...
E aí funcionou certinho conforme suas instruções.
Um grande abraço, e parabéns pelo atendimento.
Sidney
GOSTEI 0
Luiz Maia
15/07/2009
Boa Sydnei, tb não tinha me atinado sobre os Cookies e cache!!!!
Precisando é só falar.
Abraços e até mais.
Att
Luiz Maia
GOSTEI 0