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.