Fórum CENTRALIZAÇÃO DE TELAS, COM MASTERPAGE E DIVs #7627

15/07/2009

0

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  
Sidney Mendonça/

Sidney Mendonça/

Responder

Posts

15/07/2009

Luiz Maia

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
Responder

Gostei + 0

15/07/2009

Sidney Mendonça/

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" />&nbsp; 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
Responder

Gostei + 0

16/07/2009

Luiz Maia

Sydnei,   Tente tirar os position: absolute; dos seus estilos; Veja se funciona.   Aguardo Att Luiz Maia
Responder

Gostei + 0

16/07/2009

Sidney Mendonça/

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  
Responder

Gostei + 0

16/07/2009

Luiz Maia

Me mande seu prejeto compactado via Disco Virtual, assim posso consertar para vc e o disponibilizo novamente, pode ser?   Att Luiz Maia
Responder

Gostei + 0

16/07/2009

Sidney Mendonça/

Olá Luiz.   Eu vou providenciar um projeto demo com as necessidades e lhe enviarei. Grato pela atenção.   Sidney  
Responder

Gostei + 0

16/07/2009

Luiz Maia

Blz, estou aguardando...
Responder

Gostei + 0

16/07/2009

Sidney Mendonça/

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
Responder

Gostei + 0

17/07/2009

Luiz Maia

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" />&nbsp; </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
Responder

Gostei + 0

17/07/2009

Sidney Mendonça/

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  
Responder

Gostei + 0

17/07/2009

Luiz Maia

Ola Sydnei, confira se esta tudo certo por favor, por que como vocÊ pode ver abaixo, funcionou perfeitamente.       Aguardo Att Luiz Maia
Responder

Gostei + 0

18/07/2009

Sidney Mendonça/

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" />&nbsp;
                </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>
 
Responder

Gostei + 0

18/07/2009

Sidney Mendonça/

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    
Responder

Gostei + 0

18/07/2009

Luiz Maia

Boa Sydnei, tb não tinha me atinado sobre os Cookies e cache!!!!    Precisando é só falar. Abraços e até mais.   Att Luiz Maia
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar