Jump to content

Archived

This topic is now archived and is closed to further replies.

vega!

Layout se adaptar a resolução da tela

Recommended Posts

Oi pessoal.

 

Eu não achei em nenhum lugar essa informação:

 

Queria um exemplo de como programar o meu site para ter a mesma disposição de imagens tanto em uma tela 800x600,1024x768ou 1152x...

 

É possível fazer isso usando Webstandards, Css, etc.. ?

Share this post


Link to post
Share on other sites

Você precisa criar o layout basicamente com porcentagem.

Chama-se layout fluido.

 

o .all é uma div que fica com todo o conteudo do site dentro

basicamente seria algo assim o começo no CSS:

 

html{

	height: 100%;

}

body {

	text-align:left;

	background: #000;

	font-family: Verdana, Tahoma, Arial;

	margin:0;

	padding:0;

	height:100%;

}

* {

	list-style:none; 

	padding:0px;

	margin:0px;

}

#all{

	height:100%;

	width:100%;

	margin:auto;

}

Share this post


Link to post
Share on other sites

Thelon, entendi.

 

Mas é só usar esse comando na camada mais "fora" que tiver ?

Eu não preciso usar porcentagem em cada objeto ou imagem da página ?

 

Obrigado

Share this post


Link to post
Share on other sites

agradeço as respostas acima. mas queria uma coisa pratica e com exemplos, não um tutorial.

Thelon, sua resposta foi mais do que util

 

Só precisava saber agora se preciso colocar a porcentagem em todos os objetos ou só na camada mais superior da página

 

Obrigado

abraços

Share this post


Link to post
Share on other sites

eu entendi , mas a duvida é a seguinte:

Eu preciso fazer isso em cada figura ou em apenas na camada mais superior da página ?

Share this post


Link to post
Share on other sites

Como assim figuras? Camada mais superior? :unsure: :unsure: :unsure: Seja mais específico. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Pelo que eu entendi, você quer saber se só a <div> que engloba tudo é que precisa? Depende do que você quer. Por exemplo você quer um menu vertical fixo e um conteúdo que redimensione.

 

A resposta do Thelon está certinha. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Share this post


Link to post
Share on other sites

É, você tem razão.. ficou confuso

 

O Thelon deu um exemplo aonde .all é uma div que engloba todo o código

Eu só queria confirmar que se quiser adaptar meu site a todos os layouts, basta apenas criar mais uma div acima das demais,

ou devo alterar os atributos de imagem por imagem ?

 

Fui mais claro agora ? :)

 

Obrigado

Share this post


Link to post
Share on other sites

Então cara você precisa por no quer for mudar.

 

Vou te dar um exemplo do site pessoal que estou fazendo: http://gfdesenvolvimento.ueuo.com/

(Ignora essa url que só to testando ainda :x)

 

Mas enfim ...

O fundo verde é uma imagem nos atributos dela está com a altura e largura em %

Exemplo:

 

<img src="imagem.jpg" width="100%" height="100%" alt="imagem de fundo"/>

Mas ela está dentro de um div chamado conteudo.

E ele tem 80% do tamanho total

 

#conteudo{
	width: 80%;
	height: 100%;
}

O menu esquerdo está com 20% (que seria o resto)

 

#menu{
   width: 20%;
   height: 100%;
}

Até agora está tudo com % pois são elementos que precisam ter tamanhos adequados a tela

 

Agora a minha imagem de logo é algo fixo:

 

<img src="imagens/logo.png" alt="Logo" />

No caso eu não alterei o tamanho dela mas poderia ficar assim

 

<img src="imagens/logo.png" alt="Logo" widht="100" height="210"/>

Se eu colocar o tamanho dela em % ela vai deformar de acordo com o tamanho da janela e isso não é uma coisa boa. rs

Deu para ser claro ?!

 

Um outro exemplo é um site que estou fazendo para um cliente:

 

http://testesite.ueuo.com/

 

Se você reparar o único elemento que tem a largura em % é o fundo marrom em baixo do banner.

O resto está fixo

 

Ele se matem centralizado pelo fato das margens estarem como auto

 

#all{
	margin-left:auto;
	margin-right: auto;
}

Desculpa se fico confuso ou tiver algo errado mas comecei com CSS a pouco e estou aprendendo na prática :P

Share this post


Link to post
Share on other sites

Novamente o Thelon explicou certinho. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif A úncia coisa que adicionaria seria um min-width no <body> ou no #container.

Vou usar a dica para mim também http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Share this post


Link to post
Share on other sites

Thelon,


Você falou que tudo que eu queira que siga a resulução da tela devo colocar em 100%.
Mais ai eu pergunto estou querendo que um imagem dentro de uma div fique do tamanho da resolução da janela como eu posso fazer isso segue abaixo o codigo que estou tentando fazer

template.php

<?php
// Require the MXI classes
require_once ('../includes/mxi/MXI.php');
?><!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dental Belém</title>
<style type="text/css">
<!--
@import url("css.css");
-->
</style>
</head>

<body>
<div id="topo"></div>
<div id="menuHorizontal">
  <h1>teste</h1>
</div>
<div id="banner"><p>Banner</p></div>
<div id="frases">Frases de efeito </div>
<div id="barraPesquisa">Barra de Pesquisa e Login </div>
<div id="barraEsquerda">Barra da Esquerda </div>
<div id="barraDireita">Barra da Direita </div>
<div id="conteudo">
  <div align="right">
    <p>Conteúdo</p>
    <p>Conteúdo</p>
    <p>Conteúdo</p>
    <p>Conteúdo</p>
    <p>Conteúdo</p>
    <p>Conteúdo</p>
    <p>Conteúdo</p>
    <p>Conteúdo</p>
  </div>
</div>
<div id="formaPagamento">Forma de Pagamento </div>
<div id="fornecedores">Fornecedores</div>
<div id="rodape">
  <p>Rodape</p>
</div>
</body>
</html>

css.css

/* CSS Document */
*{
margin:0 auto;
padding:0;

}

body > div{
border: 1px dashed;

margin: 5px;
padding: 5px;
}
#topo{
	border: 1px solid #FF0000;
	height:130px;
	background:  url(../admin/imagens/17336-rs.jpg) top no-repeat scroll;
	
			
}
#menuHorizontal{
	background:#CCCCCC;
	
	padding:0;
	padding-left:5px;	
}
#barraEsquerda{
float:left;
margin-top:0;
width: 170px;
height:100px;
}
#conteudo{
margin-left:192px;
margin-right:162px;
height:300px;

}
#barraDireita{
float:right;
margin-top:0;
width:140px;
height:100px;
}
#formaPagamento{
margin-left:192px;
margin-right:162px;

}
#fornecedores{
clear:both
}
#rodape{
clear:both;
}

Share this post


Link to post
Share on other sites

Se for isso o que o Thelon disse, cuidado, pois com background (com CSS3 podemos Imagem Postada) não dá para redimensionar a imagem.

 

O que você poderia fazer é cria um <img /> fora div global e aplicar z-index, width: 100% e height: 100% (não se esquecendo do position).

 

:thumbsup:

Share this post


Link to post
Share on other sites

Thiago a imagem não é na div global e sim na div do topo. A duvida é a seguinte essa imagem fica css ou direto no html?
Estou fando assim:


#topo{
	border: 1px solid #FF0000;
	height:140px;
	background:url(../admin/imagens/17336-rs.jpg) no-repeat scroll;
		
}
<div id="topo"></div>

Dessa jeito a imagem não acompanha o tamanho da resolução da tela
quero saber se tem algum jeito disso acontecer com css ou tenho que fazer assim:

<div id="topo"><img src="../admin/imagens/17336-rs.jpg" width="100%" height="140" /></div>

Share this post


Link to post
Share on other sites

Thelon, quando declaramos apenas a altura ou a largura de uma imagem, ela é exibida proporcionalmente, ou seja, se eu coloco uma altura de 140px como no exemplo, a imagem será exibida com uma largura proporcional em relação à essa altura informada... Dessa forma, a largura da imagem nunca será diferente do que a largura definida proporcionalmente à altura da imagem. Para que essa largura fosse aumentada, teria que aumentar a altura... Para aplicar uma largura diferente da altura, teria que utilizar o atributo width também...

 

Pelo que nosso amigo systemata disse que quer fazer, se for feito dessa forma, a imagem não será redimensionada com uma largura de 100% da div#topo, como pretendido.

 

Outra coisa, meu caro systemata, a renderização de imagens via HTML, com utilização dos atributos width e/ou height, não é recomendável. Quando você informa uma medida diferente daquela que a imagem possui realmente, tanto maior quanto menor, quem tem a tarefa de renderizar a imagem é o browser, e o "coitado" nem tem recursos próprios para isso, e o resultado final não é tão satisfatório, dependendo da qualidade da imagem e da quantidade de detalhes da mesma... :closedeyes:

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.