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

29/10/2015

0

PHP

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

Jose Santos

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

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

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

10/11/2015

Jose Santos

Obrigado pela dica Fernando vou estudar.
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar