Array
(
)

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

PHP
Jose Santos
   - 29 out 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:
#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>




#Código

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

Wilian Cesar
   - 29 out 2015

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

Jose Santos
   - 04 nov 2015

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

Fernando Vicari
   - 05 nov 2015

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.

Jose Santos
   - 10 nov 2015

Obrigado pela dica Fernando vou estudar.