Ir para conteúdo

Arquivado

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

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

Compartilhar este post


Link para o post
Compartilhar em outros 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;

}

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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 ?

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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;
}

Compartilhar este post


Link para o post
Compartilhar em outros 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:

Compartilhar este post


Link para o post
Compartilhar em outros 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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros 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:

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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