Ir para conteúdo

POWERED BY:

Arquivado

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

Mauro Nunes

[Resolvido] Site redimensionavel

Por , em Desenvolvimento frontend

Recommended Posts

Mauro Nunes    0

Mauro Nunes
Postado

Olá pessoal estou tentando desenvolver um site que redimensione de acordo com a resolução do monitor exemplo:

 

http://www.timbore.com.br/

 

So que sem usar flash teria alguma técnica em css, o site e no mesmo estilo do exemplo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

Olá pessoal estou tentando desenvolver um site que redimensione de acordo com a resolução do monitor exemplo:

 

http://www.timbore.com.br/

 

So que sem usar flash teria alguma técnica em css, o site e no mesmo estilo do exemplo.

 

Insira uma div e dentro dela a(s) imagem(s) necessárias, coloque altura e largura 100% (no proprio html).

No css coloque altura e largura 100%, position fixed, top e left 0 e se tiver alguma div por cima dela, coloque a div das imagens com -9999 de z-index.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mauro Nunes    0

Mauro Nunes
Postado

Insira uma div e dentro dela a(s) imagem(s) necessárias, coloque altura e largura 100% (no proprio html).

No css coloque altura e largura 100%, position fixed, top e left 0 e se tiver alguma div por cima dela, coloque a div das imagens com -9999 de z-index.

 

Olá Alex eu fiz da seguinte maneira:

 

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
     <meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Cache-Control" content="no-cache">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta http-equiv="Lang" content="en">
     <meta name="author" content="">
     <meta http-equiv="Reply-to" content="@.com">
     <meta name="generator" content="PhpED 5.8">
     <meta name="description" content="">
     <meta name="keywords" content="">
     <meta name="creation-date" content="01/01/2009">
     <meta name="revisit-after" content="15 days">
     <title>Untitled</title>
     <link rel="stylesheet" type="text/css" href="estilos.css">
  </head>
  <body>
     <div class="template">

        <div class="topo">
        </div>

        <div class="conteudo">
           <img src="mulher1.png" border="0" width="100%" height="100%" alt="mulher1.png (572.180 bytes)">
        </div>

        <div class="rodape">
        </div>

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

 

estilos.css

*{
  margin:0 auto;
  padding:0;
}

html, body{
  width: 100%;
  height: 100%;
}

.template{
  width: 100%;
  height: 100%;
}


.topo{
  height:50px;
  background-color:#E0E0E0;
}

.conteudo{
  height:400px;
  width:auto;
}

.rodape{
  height:50px;
  background-color:#400040;
}

 

Estaria certo assim ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Não tem como fazer isso só com CSS puro (talvez até seja com CSS3, mas não funciona em todos os navegadores).

Você precisará de Javascript para saber qual o tamanho da janela e redimensionar as imagens conforme esse tamanho...

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

Faça assim:

 

<div id="bg">

 

</div><!--bg-->

AGORA O RESTANTE DO SITE

 

e no css:

 

#bg { width:100%; height:100%; position:fixed; top:0; left:0; z-index:-9999; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mauro Nunes    0

Mauro Nunes
Postado

Faça assim:

 

<div id="bg">

 

</div><!--bg-->

AGORA O RESTANTE DO SITE

 

e no css:

 

#bg { width:100%; height:100%; position:fixed; top:0; left:0; z-index:-9999; }

 

 

Valeu galera consegui resolver o problema, fiz um pouco diferente mas o cliente aceitou o resultado

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