Layout se adaptar a resolução da tela

[vega! 0]

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

[GabrielFerrari 41]

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;

}

[vega! 0]

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

[Thiago Retondar 18]

Temos um tópico, recente, falando sobre isso aqui:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?showtopic=342873

 

Abraços.

[GabrielFerrari 41]

pode dar uma olhada aqui também: http://tableless.com.br/layout-fixo-fluido...as-em-8-minutos

[vega! 0]

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

[GabrielFerrari 41]

Se você quiser que um lado tenha sempre 100px ai você dexa como width: 100px;

E o que for para se adequar ao tamanho da tela você vai jogar em %

[vega! 0]

eu entendi , mas a duvida é a seguinte:

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

[Thiago Retondar 18]

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

[vega! 0]

É, 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

[GabrielFerrari 41]

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

[Thiago Retondar 18]

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.

[GabrielFerrari 41]

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

[systemata 0]

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;
}

[GabrielFerrari 41]

sua dúvida está confusa...

Mas pelo que eu entendi você quer uma imagem de fundo pegando o site todo

então use a propriedade background

 

body{
background: url('suaimagem.jpg');
}

[Thiago Retondar 18]

Se for isso o que o Thelon disse, cuidado, pois com background (com CSS3 podemos ) 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:

[systemata 0]

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>

[GabrielFerrari 41]

isso

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

vira isso:

 

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

#img_topo{
 width: 100%;
}

[Paulo de Tarso F. M. 24]

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:

[systemata 0]

Paulo então qual seria a solução para essa situação? Pois estou querendo muito que essa imagem acompanhe a resolução da tela.