Como deixar minha p�gina do site padr�o para todos os tipos de monitor

29/10/2015

Ola pessoal estou com um problema estou desenvolvendo um site onde tenho a index e posicionei o formulario de login com css no meu monitor que � resolu��o de 1024x768 t� tudo ok, mas quando uso um monitor com resolu��o maior ou menor fica diferente, por favor se algu�m poder me ajudar.?

vou postar o c�digo:


//login.php


<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="shortcut icon" href="Imagens/favicon.ico" /> <!-- Imagem na barra de Titulo -->
        
     <title>JS sistemas Integrados</title>
    
        <link rel="stylesheet" type="text/css" href="stilo.css"/> <!-- Entrada de dados Css -->
     
      
    
    </head>
       
    <body>
        
        <div id="div">
            
                    <font color="black" size="4">Portal</font> <br>
            
                    <form action="" method="POST" name="">
                
                        <input type="TEXT" name="" size="27"><br><br>
                <input type="PASSWORD" name="" size="27"> <br><br>
               <center> <input type="button"  value="Conectar" name=""></center>
                
            </form>
            
        </div> 
        
        
     <div id="div2">
            
         <a href=""><font size="2">Esqueceu sua senha?</font></a> <br>
         <a href=""><font size="2">Conhe�a nosso sistema</font></a>
            
        </div>    
        
      
        <div id="div3">
            
         <a href=""><font size="2">suporte</font></a> |
         <a href=""><font size="2">contato</font></a>
            
        </div>   
        
            
    </body>
</html>


//arquivo.css

*{
    margin: 0;
    padding: 0;
}


html, body {
 width: 100%;
 height: 100%;
 background: url(Imagens/TELAENTRADA.png) top center;
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-size: cover;
 
 _height: 100%;
	_overflow: auto;
  }
 

  #div {
      top: 40%;
      left: 60%;
      position: fixed;
      width: 200px;
      height: 130px;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
  }
  
  
  #div2 {
      top: 73%;
      left: 60%;
     
      position: fixed;
  
      width: 200px;
      height: 75px;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
   
  }
  
  
  
  
  #div3 {
   
      top: 96%;
      left: 87%;
     
   
    position: fixed;
  
    width: 100px;
    height: 12px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
  
     
  }
 
  
    
  
    a {text-decoration: none}

se alguem poder m� d� um Help ?

Jose Santos

Curtir t�pico + 0

Responder

Posts

29/10/2015

Wilian Cesar

Use PX ao inves de %
E em width e height coloque o tamanho da tela ex 1024 por 768.

Responder

Gostei + 0

04/11/2015

Jose Santos

coloquei tamb�m e acontece a mesma coisa quando mudo de resolu��o acredito que eu tenho
que desenvolver alguma coisa do tipo responsivo.

Responder

Gostei + 0

05/11/2015

Fernando Vicari

Bom dia,

Estuda a biblioteca Bootstrap. Esta biblioteca vem com os javascripts prontos para que voc� torne o seu site responsivo.

No site tem todos o exemplos e manuais.
http://getbootstrap.com/

Bom estudo.

Responder

Gostei + 0

10/11/2015

Jose Santos

Obrigado pela dica Fernando vou estudar.

Responder

Gostei + 0