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:
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:
Os estilos são:
Cumprimentos
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:
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>
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: