none
Layout Master Page Css RRS feed

  • Pergunta

  • Pessoal,

    Faz alguns dias que estou sofrendo com layout da minha master page, o meu layout é o seguinte: as divs topo / abaixo tem coluna esquerda / conteudo / coluna direira e rodape , porem venho perbendo que quando acesso meu site de diferentes resolucoes de telas, estou obtendo resultados desagradeiveis do tipo corta algumas coisas...., o que eu queria era dar um jeito da coluna direita/esquerda e conteudo se ajustasse de acordo com a tela do usuario.... tente varias coisas no Css, ja tentei por as tres colunas dentro de uma putra div e posicionar com float:right na coluna direita e float:left na coluna esquerda e o que acontece é que ele so mostra a div conteudo nao sei porque... e deixar as 3 colunas fora das divs ... mas nada ... hoje esta funcionando porcamente com position: absolute em tudo e posicionado com top e left... porem ... se a resolucao de tela muda... fica tudo uma porcaria... alguem tem alguma dica pra resolver isso ?

    desde de ja agradeço

    Alex
    sexta-feira, 21 de setembro de 2012 00:52

Todas as Respostas

  • Creio que seu problema seja de css e não um problema com a master page.

    Você não tem muita experiência com CSS, imagino, né?

    Mostra algum esboço do que você quer


    Sou só uma little padawan que tem sorte de andar com jedis, mas farei o possível por quem precisar :)

    Se precisar: @MayogaX

    sexta-feira, 21 de setembro de 2012 11:27
  • Alex,

    Dê uma olhada nesse link e veja se te ajuda:

    http://www.ferramentasblog.com/2012/05/tudo-sobre-layout-responsivo-02-diferencas-entre-layout-responsivo-e-fluido.html

    Abraço,


    Carlos Eduardo Ferreira

    sexta-feira, 21 de setembro de 2012 15:05
  • Se eu entendi sua ideia é um layout de 3 colunas que utiliza toda largura do navegador, certo?

    Bom... a forma mais simples de fazer isso é colocar um div em volta das 3 divs e atribuir um min-width nele. Assim você evita resoluções ou janelas muito pequenas e que quebrem o layout. Após isso atribua float:left em todas as 3 divs e declare uma largura para todas elas em %, ex.:

    .geral {min-width:990px;} /* minimo de largura */
    
    .esquerda, .direita, .conteudo {float:left;}
    
    .esquerda, .direita {width:25%;}
    
    .conteudo {width:50%;}


    Não esqueça de usar este hack para que o rodape não fique quebrado por causa dos floats:

    .geral:after {
    	content: ".";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    }

    Espero ter ajudado... se algo não funcionar é só avisar aí que podemos pensar em uma outra abordagem.

    Boa sorte

    sexta-feira, 28 de setembro de 2012 22:01
  • Olá Alex_Azuos,

    Algum tempo atrás postei uma solução parecida aqui no fórum, veja se te ajuda!

    http://social.msdn.microsoft.com/Forums/pt-BR/webdesignpt/thread/ff7f60cd-99b0-4b12-8934-8eb62cc2e598

    Estou à disposição.

    Abs.


    segunda-feira, 1 de outubro de 2012 18:23
  • Pode tentar usar o Splitter do Telerik Kendo UI (Grátis)
    http://demos.kendoui.com/web/splitter/index.html

    Alinhamento de altura é mais complicado que o de largura. Basicamente, cada div se baseia no seu pai para medir a altura (Quando falamos em %).
    Neste caso, usei o seguinte:

    <div id="vertical" style="height: 100%">
                    <div id="top-pane">
                        <div id="horizontal" style="height: 100%; width: 100%;">
                            <div id="left-pane">
                                <div class="pane-content">
                                    <h3>Inner splitter / left pane</h3>
                                    <p>Resizable and collapsible.</p>
                                </div>
                            </div>
                            <div id="center-pane">
                                <div class="pane-content">
                                    <h3>Inner splitter / center pane</h3>
                                    <p>Resizable only.</p>
                                </div>
                            </div>
                            <div id="right-pane">
                                <div class="pane-content">
                                    <h3>Inner splitter / right pane</h3>
                                    <p>Resizable and collapsible.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="middle-pane">
                        <div class="pane-content">
                            <h3>Outer splitter / middle pane</h3>
                            <p>Resizable only.</p>
                        </div>
                    </div>
                    <div id="bottom-pane">
                        <div class="pane-content">
                            <h3>Outer splitter / bottom pane</h3>
                            <p>Non-resizable and non-collapsible.</p>
                        </div>
                    </div>
                </div>
    
                <script>
                    $(document).ready(function() {
                        $("#vertical").kendoSplitter({
                            orientation: "vertical",
                            panes: [
                                { collapsible: false },
                                { collapsible: false, size: "100px" },
                                { collapsible: false, resizable: false, size: "100px" }
                            ]
                        });
    
                        $("#horizontal").kendoSplitter({
                            panes: [
                                { collapsible: true, size: "220px" },
                                { collapsible: false },
                                { collapsible: true, size: "220px" }
                            ]
                        });
                    });
                </script>

    O segredo tá no seguinte, colocar esse código direto no <body>
    No seu CSS você seta o html e body para height 100%, e depois a div chamada vertical

    <div id="vertical" style="height: 100%">

    PS:. Inline CSS é zuado, mas só pra vc ter como exemplo, depois migra isso pro seu CSS

    Desse modo você tem os containers ocupando a tela toda e pode tanto trabalhar com porcentagem quanto com largura fixa neles.

    Outra saída também, é usar algo como o http://semantic.gs para gerenciar a largura. Ele se baseia em less e acho que agora suporta o SCSS também.

    Abraços,


    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net

    terça-feira, 2 de outubro de 2012 18:45
  • Você não pode colocar os objetos em posições absolutas e sim relativas. Se você estiver usando o firefox para visualizar sua página, existe uma ferramenta muito boa chamada Firebug, que é uma extensão do Firefox que pode te auxiliar. Além disso, o firefox disponibiliza nas ferramentas de desenvolvedor, uma ferramenta que muda sua resolução para que você possa testar em várias. De resto, o pessoal já postou algumas soluções!

    quarta-feira, 3 de outubro de 2012 19:02