Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde, estou num projeto de site com login e senha, etc e tal. Preciso que este layout seja elástico..
eu ando lendo por aí sobre isso, mas ninguém listou as propriedades necessárias, o que se deve fazer e tudo mais, então eu peço que por favor alguém me ajude com essas medidas, entre outras propriedades necessárias para se construir um layout bom.
Obrigado desde já.
PS: meu layout tem divs #tudo, #logo, #LeS, #menu, #conteúdo.
qualquer coisa posto a imagem. Mais uma vez, obrigado.
Dá uma olhada :seta: http://forum.imasters.com.br/index.php?/topic/347842-layout-liquido/
:thumbsup:
Oi Tiago, oi William. É diretamente sobre as medidas. como tem várias divs, vou no método "tentativa e erro" para que o layout fique no tamanho necessário ao que eu precise ?
e se ele não aparecer ?(isso já aconteceu comigo, faz um bom tempo. não sei com vcs, mas as divs com cores diferentes nenhuma apareceu.)
vai ver ela nao apareceu pq nao tinha height
#tudo {
width: 100%;
height: 500px;
background-color: #f00;
}Provavelmente seja o que o Shwa disse.
Em relação as medidas é como o Will falou, use % ao invés de px
supondo um layout com width de 1000px onde o menu lateral teria 250px, no layout líquido ficara algo como:
#tudo{ width:100%; height:100%;}#menu{ width:25px; height:100%;}Inseri o height apenas como exemplo não sendo obrigatório o uso destas medidas :thumbsup:
uma observação é que nem todos os elementos precisam ser definidos em porcentagem. Caso você tenha algum elemento que queira deixar com tamanho fixo pode utilizar px /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" />
Ok, beleza, Só tem uma coisa, eu fiz uma div pra a imagem topo, e a imagem tem tamanho fixo, (óbvio X.X).
o layout não vai ficar "torto" se eu colocar a porcentagem nas outras divs e na minha tela parecer alinhado. Mas em outro computador, com outra resolução.. pode acontecer! o que faço daí ?
Claro que a medida da DIV vai ser em px, se a imagem é fixa, pelo menos penso isso.
deixo de criar a div e coloco a imagem como fundo centralizada ?
Mas tem um porém.. se eu desistir da DIV e deixar a imagem somente, também pode ficar desalinhado...
o que me sugerem ?
Mostre o teu layout. Ai poderemos sugerir algo.
Você pode usar sim a div topo basta centraliza-la assim ela ficará naquela posição em qualquer layout só que vai ficar em desacordo de tamanho em relação aos outros elementos
neste caso eu sugiro que você defina um tamanho mínimo e um máximo para seu layout ficando assim bom em uma resolução pequena e bom em uma grande e as resoluções que forem maiores ele fica centralizado.
E como definirei dois tamanhos independente de usuário logado ou não ?
nunca tinha feito, acho que ja deu pra bolar uma ideia
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="pt-br" lang="pt-br">
<head>
<style type="text/css">
#tudo {
min-width: 700px;
background-color: #eee;
}
#topo {
background-color: #000;
height: 160px;
}
#corpo {
width: 80%;
float: right;
background-color: #f00;
min-height: 500px;
}
#auxiliar {
width: 20%;
float: left;
background-color: #0f0;
min-height: 500px;
}
#login {
background-color: #00f;
height: 100px;
}
#menu {
background-color: #ff0;
height: 300px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="tudo">
<div id="topo"></div>
<div id="auxiliar">
<div id="login"></div>
<div id="menu"></div>
</div>
<div id="corpo"></div>
<div class="clear"></div>
</div>
</body>
</html>eu fui no validator e passou..
Ah, eu estava pensando aqui, poderia fazer um Cookie com 3 ou 4 versões do site (com resoluções diferentes)
e quando a pessoa entrasse no site, escolhesse a resolução do seu pc.
Ou usar javascript. mas nem sei como O.o
Acho muito trabalhoso fazer isso... /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/sad.gif&key=02b1574f7da1e723d8a7dbae07272745fb341b432c19ce24d0490ce410222838" alt="Imagem Postada" />
Faz do jeito que eu postei pelo link lá em cima ou como o Shwa mostrou.
Posta o HTML e CSS que já fez, aí eu posso ajudar mais. /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/happy.gif&key=d39e68bd94edabd9069b8f4a6d941163110d4d36d12e6324ad75ec83de4843df" alt="Imagem Postada" />
:thumbsup:
Tb achei mt trabalhoso.. me disseram aqui pra usar a imagem como background da DIV, que daí ela se expande.. mas eu me pergunto, e se eu fizer a imagem do tamanho de 1680x200 (1680 por causa de uma resolução, claro, os 200 é de altura, largur, do height da img) , e o indivíduo tiver uma resolução de 800x600, a imagem vai ser reduzida, mas não ficaria torta, com má qualidade? e se eu fizesse pequena, de 1280 ou 1024 de width ? não ficaria quadriculada, sem forma definida ?
beleza, eu vou tentar de todo jeito aki. só uma dúvida.. min-height ? O.o não entendi ._.
min-height assim como o min-width são propriedades da CSS para que seja estipulado uma altura (ou largura) mínima para o elemento
Porém nosso querido IE não entende isso direito...
ele já considera o height como se fosse o mínimo (min-height)
mas sempre tem um esquema. rs
#elemento{
min-height:128px;
height:auto !important;
height:128px;
}Com isso você diz que o min-height é 128 e informa que a altura dele é "auto" para todos os navegadores tirando o IE
O !important é uma forma de dizer aos navegadores que aquilo é importante. rs
dando assim uma maior propriedade e como o IE não interpreta esse "comando" tudo fica bem.
e para ele será dito que a altura é 128 que já vai ser considerada a mínima
Ah, beleza. Obrigado!
E agora, resta a questão da imagem.. eu estava pensando em fazer width 1000px
assim ela pode ser reduzida ou expandida.. ou me sugerem outro tamanho pra imagem ?
Esse é meu código até agora. Tá bem ruim D:
Acho que eu errei em algumas coisas pq fica bem feio qdo eu vejo no navegador, e não aparece um menu :/
@charset "utf-8";
/ Documento CSS - GS Assessoria /
/ Criado e desenvolvido por Melina Girardi /
Body {
margin : auto;
padding : 0;
font : Não coloquei ainda pq n tem nada escrito, espero poder usar uma fonte q ngm tem (hospedar e linkar)
}
#tudo {
background : #FFF;
width : 100%;
height : 100%;
}
#imgtopo {
background : #CCC;
min-width : 800px;
width : auto !important;
width : 1000px;
height : 10px;
}
#menuadms {
background : #0C9;
min-height : 10px;
height : auto !important;
height : 50px;
width : 100%;
}
#LeS {
background : #6CF;
min-height : 100px;
height : auto !important;
height : 200px;
width : 20%;
float : left;
}
#menuus {
background : #Ccc;
min-height : 300px;
height : auto !important;
height : 500px;
width : 20%;
}
#FeC {
background : #FCC;
min-height : 600px;
height : auto !important;
height : 1280px;
width : 80%;
float : right;
}Muito bom...
Não acompanhei o topico desde o inicio mas acho que tem algumas ressalvas as quais deve prestar atenção:
min-height e min-width não são interperetados pelo ie se não me engano...
fontes que não são padrões não devem ser utilizadas por usabilidade praticidade e geralmente por a pessoa estar habituada com as fontes padrões.
para utilizar fontees diferentes existem diversas maneiras.
segue um link de um blog muito bom de uma menina de são paula na qual abordou esse assunto:
sim, mas tem aquele "hack ali.." de qualquer forma acho que ele não vai dar mt certo. tenho que ver em outras resoluções.
Vou aprender mais sobre as fontes e tudo mais.. daí decido qual coloco.. se não me engano no CSS3 dá pra por fonte diferente, mas tem que hospedar, linkar, etc.
ainda acho que falta alguma coisa....
O CSS que você postou não tem nenhum erro aparente e está sendo validado...
>
Acho que eu errei em algumas coisas pq fica bem feio qdo eu vejo no navegador, e não aparece um menu :/
teria como postar um link ou PrintScreenpara poder visualizar o problema?
tenho, tenho sim. só um minuto e coloco o code do xhtml tb
/applications/core/interface/imageproxy/imageproxy.php?img=http://img339.imageshack.us/img339/2476/cadeomenu.jpg&key=b4e5bb52ff9953230fdbb2384cfdc0466025aeefcc644c8d8a585a1ebbd3162b" alt="Imagem Postada" />
Aquela parte branca ali é pra se o menu :S
PS: Medidas erradas, coloquei só pra teste.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>homepage</title>
<link rel= "stylesheet" type= "text/css" href="css2.css"/>
</head>
<body>
<div id="tudo">
<div id="imgtopo">
</div>
<div id="menuadms">
</div>
<div id="LeS">
</div>
<div id="Menuus">
</div>
<div id="FeC">
</div>
</div>
</body>
</html>Ta ai /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/tongue.gif&key=8d11c3c7c03c7a5a294e250694d100848a0423dc34ef2af8d774f49d1b969fde" alt="Imagem Postada" />
Testei no FF e IE8 .. To sem o IETester nessa máquina então da uma verificada e nos demais navegadores também
O principal problema do seu código era que no HTML o ID Menuus tava com o M maiúsculo e no CSS estava em minúsculo
Para facilitar a edição das medidas do conteudo da esqueda acabei colocando eles dentro de um outro div chamado esquerda
Assim os que ficarem dentro dele terão 100% e ele terá 20% se quiser remover ele não tem problema.
Acho que era só isso mesmo... Evite usar IDs e Classes com letras maiúsculas e minúsculas sempre acaba confundindo. rs
CSS
@charset "utf-8";/ Documento CSS - GS Assessoria // Criado e desenvolvido por Melina Girardi /Body { margin : auto; padding : 0; font : Não coloquei ainda pq n tem nada escrito, espero poder usar uma fonte q ngm tem (hospedar e linkar)}#tudo { background : #FFF; width : 100%; height : 100%;} #imgtopo { background : #CCC; min-width : 800px; width : auto !important; width : 1000px; height : 10px;}#menuadms { background : #0C9; min-height : 10px; height : auto !important; height : 50px; width : 100%; }#esquerda{ float:left; width: 20%; background: red;}#LeS { background : #6CF; min-height : 100px; height : auto !important; height : 200px; width : 100%; float : left;}#Menuus { background : green; min-height : 300px; height : auto !important; height : 500px; width : 100%; }#FeC { background : #FCC; min-height : 600px; height : auto !important; height : 1280px; width : 80%; float : right;}/fim do css, layout etc. /HTML
<body><div id="tudo"> <div id="imgtopo"> </div> <div id="menuadms"> </div> <div id="esquerda"> <div id="LeS"> </div> <div id="Menuus"> <ul> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> <li>LINK</li> </ul> </div> </div> <div id="FeC"> </div></div></body>
/applications/core/interface/imageproxy/imageproxy.php?img=http://img59.imageshack.us/img59/6742/imagemqub.th.jpg&key=647bde37be49aabcc0c075800ff42d72ae378def0cc34dbaa17c93c9efe382e8" alt="Imagem Postada" />
Ah, é mesmo.. bah, que falta de percepção que eu tive.. Obrigado!
:thumbsup:
Hei, só um minuto , deu um problema aqui...
antes disso as colunas não se alinhavam. agora...
a div esquerda rouba o espaço da LeS e do menuus ..
fica metade azul e verde (as divs acima) e metade da div esquerda aparecendo;
dai eu tentei tirar a div, só que agora não alinha, mesmo com o float :/
envolva as alinhadas em uma outra div assim ela não permite a outra entrar do lado.
se eu entendi bem é so fazer isso...
Abraço, /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/biggrin.gif&key=cb0fdb2382312b39ddcb15831fcae62157015f17d2417528782628663387e929" alt="Imagem Postada" />
Com div esquerda
http://img521.imageshack.us/img521/4817/comdivesquerda.gif
Sem div esquerda
http://img245.imageshack.us/img245/5369/semdivesquerda.gif
fica mt estranho D:
acho q precisa dum margin no meio disso, MAS com que medida eu vou fazer?
eu tentei colocar 3px; só que fico mais longe ainda ._.
é a mesma coisa de se fazer um layout fixo, porém trabalhando com medidas em %, em vez de tudo em px
por exemplo, o container, em vez de ser algo como:
}é mais algo como: se você não for específica na tua dúvida, vamos ficar te indicando links, exemplos, tutoriais..