1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Alinhamentos por javascript[Resolvido]

Discussão em 'Web Development' iniciada por DigitalBoy, 20 de Julho de 2012. (Respostas: 1; Visualizações: 378)

  1. DigitalBoy

    DigitalBoy Power Member

    Boas, eu estou a fazer o rascunho de um site, com uma navegação um pouco mais irregular, só que o problema é que o facto de me estar a "armar em esperto" para conseguir tal aspecto já me custou bastante tempo a pensar como manter o layout(que é liquido) sempre dentro dos limites entre 1920 e 1024 px de largura.
    Tentando sobre-simplificar o problema:
    -Tenho uma div fixa á esquerda.
    Essa div tem a 25% de largura(total), até um minimo de 280px e um maximo de 350px.

    -Tenho uma div que é uma faixa horizontal com 80% de largura(total), que passa por baixo da div anterior.

    -Tenho o conteudo numa div dentro dessa faixa, e quero que ele ocupe toda a largura da faixa EXCEPTO ONDE A DIV FIXA E A DIVA DA FAIXA CRUZAM

    Ilustração:
    [​IMG]

    Solução já tentada:
    Fazer um espaçador dentro da faixa.
    Problema: O conteudo nunca vai ocupar o total do espaço livre, sem que chegue a uma resolução e "rebente" dali para fora.(por causa do min e max width que a div fixa tem)

    Questão: É fiavel resolver com javascript este problema?Alguem pode ajudar?

    Um exemplo do codigo a aplicar é este:
    Código:
    <div id="menu">
    (Esta é a div fixa)
    </div>
    <div id="faixa">
    <div id="espacador"></div>
    <div id="conteudo">
    (Aqui entra o conteudo)
    </div>                
    </div>
    Os estilos são:
    Código:
    #menu{
        position:fixed;
        top: 5%;
        left: 0;
        z-index: 2;
        width: 25%;
        max-width: 350px;
        min-width: 280px;
        height: 85%;
        background-color:blue;
    }
    #faixa{
        width:80%;
        height: 100%;
        background-color: red;
    }
    #espacador{
        width:25%;
        max-width: 220px;
        min-width: 100px;
        height:5px;
        float:left;
    }
    #conteudo{
        float:left;
        width: 78%;
        height:100%;
    }
    Cumprimentos
     
    Última edição: 20 de Julho de 2012
  2. DigitalBoy

    DigitalBoy Power Member

Partilhar esta Página