Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Meh

Layout Elástico

Por , em Desenvolvimento frontend

Recommended Posts

Meh    0

Meh
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é 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:

#tudo{
   width: 900px;
   margin: 0 auto;
}
é mais algo como:
#tudo {
   width: 100%;
}

se você não for específica na tua dúvida, vamos ficar te indicando links, exemplos, tutoriais..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meh    0

Meh
Postado

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.)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Shwa    0

Shwa
Postado

vai ver ela nao apareceu pq nao tinha height

 

		#tudo {
		   width: 100%;
		   height: 500px;
		   background-color: #f00;
		}

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

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 Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meh    0

Meh
Postado

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 ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mostre o teu layout. Ai poderemos sugerir algo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meh    0

Meh
Postado

E como definirei dois tamanhos independente de usuário logado ou não ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Shwa    0

Shwa
Postado

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" 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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meh    0

Meh
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meh    0

Meh
Postado

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 ._.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meh    0

Meh
Postado

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 ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meh    0

Meh
Postado

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;
}
/*fim do css, layout etc. */
Grata pela ajuda, e correção dos erros ._.

Compartilhar este post

Link para o post
Compartilhar em outros sites

AlocK    0

AlocK
Postado

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:

 

Blog da FlorBraz

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meh    0

Meh
Postado

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....

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito