Ir para conteúdo

POWERED BY:

Arquivado

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

MarcQ

Sites para smartphones

Por , em Desenvolvimento frontend

Recommended Posts

MarcQ    0

MarcQ
Postado

Primeiramente, olá a todos!

 

Montei um layout para um site que deve ser visto em smartphones. Preciso de ajuda pois não estou conseguindo fazer com que ele seja líquido e ajustável as resoluções de tela dos diferentes tipos de celulares. Parti de uma resolução de aproximadamente 242 x 314, porém ele deve se adequar tanto a telas menores quanto maiores.

 

O codigo é esse:

 


<style type="text/css">
 
<!--

.base {
	position:absolute;
	color:#FFFFFF;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
	background-color: #E8E8E8;
	font-family:Arial, Helvetica, sans-serif;
}
 
.header {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:49px;
	z-index:2;
	background-color:#7fa6d6;
}
 
#Layer1 {
	position:absolute;
	background-color:#7fa6d6;
	left:10px;
	right:10px;
	top:63px;
	z-index:2;
	color:#FFFFFF;
	text-align:center;
	padding:15px;
	height:-4px;
	font-family:Arial, Helvetica, sans-serif;
}
 
#Layer2 {
	position:absolute;
	background-color:#7fa6d6;
	left:10px;
	right:10px;
	top:116px;
	z-index:2;
	color:#FFFFFF;
	padding:15px;
	height:-30px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
}
 
#Layer3 {
	position:absolute;
	background-color:#7fa6d6;
	left:10px;
	right:10px;
	top:169px;
	z-index:2;
	color:#FFFFFF;
	padding:15px;
	height:-30px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
}
 
#Layer4 {
	position:absolute;
	background-color:#7fa6d6;
	left:10px;
	right:10px;
	top:222px;
	z-index:2;
	color:#FFFFFF;
	padding:15px;
	height:-30px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
}
 
#Layer5 {
	position:absolute;
	background-color:#FFFFFF;
	left:52px;
	top:68px;
	width:89px;
	height:28px;
	z-index:2;
}
 
#Layer6 {
	position:absolute;
	background-image:url(logo.png);
	right:10px;
	width:29px;
	height:27px;
	z-index:2;
	bottom:0px;
	background-color:#FF0000;
}
 
-->

</style>
</head>
 
<body>
 
 
 
<div class="base">
<div class="header"></div>

  <div id="Layer1"><strong>Lorem Ipsum</strong></div>
  <div id="Layer2"><strong>Lorem Ipsum</strong></div>
  <div id="Layer3"><strong>Lorem Ipsum</strong></div>
  <div id="Layer4"><strong>Lorem Ipsum</strong></div>
  <div id="Layer6"></div>

</div>
 
</body>
</html>

Desde já agradeço pela ajuda!

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Evite regras de posicionamento como position e float, procure ver suas páginas como se fossem cartas, como as de baralho.

 

Trabalhe com porcentagem para containers e EM para fontes.

 

O body por padrão tem width: 100% e height: 100% e se ajustará ao tamanho total da tela do Dispositivo.

 

Para móveis, dê preferência para XHTML, a estrutura XML ajudará a posicionar os elementos mais facilmente.

 

Abuse das listas e procure utilizar o mínimo de "ladeamento" de elementos. Seja fluído, constante e vertical.

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