layout liquido

vini_loock · Janeiro 11, 2010

Olá.

eu tava tentando fazer um layout liquido, mas eu queria que tivesse uma largura minima.

Tem como fazer isso?

Editado Janeiro 11, 2010 por vini_loock

vini_loock · Janeiro 12, 2010

Achei a solução aqui no fórum mesmo.

É só colocar "min-width:valor" na div global do site.

Só que tem um problema, fica uma barra de rolagen na horizontal, mesmo que eu abra em 1280, e site ocupa a tela toda, mas fica a barra.

Vou postar ai o código, pra vocês verem o que pode ser.

Ah.. e não da pra colocar overflow-x: hidden, porque se o usuário abrir com a tela pequena ele não vai poder ver o site todo

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
<style type="text/css">

#geral {
/*width:800px;*/
min-width: 700px;
border:1px solid gray;
top: 0px;
margin:0 auto;
-moz-box-shadow: 0 0 20px #000;
}
        
#cabecalho{
background: green;
height: 130px;
color:#FFF;
margin: 5 5 0 5;
}

#menu{
background: green;
height: 30px;
color:#FFF;
margin: 5 5 0 5;
padding: 0px;
}
    
#esquerda{
background: green;
width:130px;
float: left;
margin: 5 0 0 5;
}
        
#direita {
background: green;
width:130px;
float: right;
margin: 5 5 5 5;
}
    
#conteudo {
background:lightgray;
margin:5 140px;
}
        
#rodape {
background: green;
height: 100px;
color:#FFF;
text-align:center;
margin: 5 5 5 5;
}

ul li{
display: inline;
}

</style>
    
</head>
<body>

<div id="geral">

<div id="cabecalho">Topo</div>

<div id="menu">
Menu
</div>
    
<div id="esquerda">
Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...
Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...
Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...
</div>

<div id="direita">
Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...
Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...
Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...Nav esquerda...
</div>
    
<div id="conteudo">
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo
</div>
    
<div id="rodape">Rodap&eacute;</div>

</div>

</body>
</html>

A é aproveitando...

Tem um problema na div nav, porque se ela tem mais conteudo que a div conteudo, ela vai ficar mais... até ai tudo bem, mas tem um problema, o rodapé fica sempre colado no conteudo, e então as nav passam por cima do conteudo.

Pra ver o erro, é só tirar o texto da div conteudo.

Vlw.

Editado Janeiro 12, 2010 por vini_loock

Entrar

layout liquido

Pergunta

vini_loock

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

vini_loock

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades