Ir para conteúdo
Fórum Script Brasil
  • 0

layout liquido

vini_loock

Perguntado por vini_loock,

 Share

Pergunta

1 resposta a esta questão

Posts Recomendados

  • 0
vini_loock

vini_loock

Postado
  • Autor
Postado (editado)

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 por vini_loock
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...