Adequação da Div

leandrojunior7 · 7 de dezembro de 2011

Ola, a div referente à Àrea restrita sai do lugar toda vez que muda a resolução de tela, acho que erro ta no css em relação ao absolute mas nao to conseguindo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>

<head>

#banner {

margin: 10PX;

height: 150PX;

width: 880PX;

border: 1PX SOLID #000;

background-color: 3 thistle;

}

#postagens {

color: #000;

margin: 10PX;

paddign: 10PX;

height: 600PX;

width: 620PX;

border: 1PX SOLID #000;

}

#area_restrita {

color: #666;

margin: 10PX;

padding: 10PX;

height: 290PX;

width: 204PX;

border: 1PX SOLID #000;

position: ABSOLUTE;

left: 800PX;

top: 176PX;

}

</style>

</head>

<td>

<h1> Portal</h1>

</div>

<center><p> Listagem de noticias</p></center>

</div>

<p>Área Restrita</p>

<br>

<p> Login: <input type="text" name="login"> </p>

<p> Senha: <input type="password" name="senha"> </p>

<br>

</div>

</form>

</table>

</td>

</body>

</html>

andbecker · 10 de dezembro de 2011

Solucao #1: [modo tabelado]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head>
<style type="text/css">#banner {margin: 10PX;height: 150PX;width: 880PX;border: 1PX SOLID #000;background-color: 3 thistle;}
#postagens {color: #000;margin: 10PX;paddign: 10PX;height: 600PX;width: 630PX;border: 1PX SOLID #000; }
#area_restrita {color: #666;margin: 10PX;padding: 10PX;height: 290PX;width: 204PX;border: 1PX SOLID #000;}</style></head><body bgcolor="#CDC9C9">
<table border="0px" align="center" bottom="middle"><TR> <td COLSPAN="2">
	<div id="banner">	<h1> Portal</h1>	</div> </TD></TR><TR><TD>	<div id="postagens">	<center><p> Listagem de noticias</p></center>	</div></TD><TD VALIGN="TOP">	<div id="area_restrita">	<p>Área Restrita</p>	<br>	<form method= "post" action= "entrar.php">	<p> Login: <input type="text" name="login"> </p>	<p> Senha: <input type="password" name="senha"> </p>	<br>	<p><input type="submit" value="OK"></p>	</form>	</div></td><TR></TABLE>
</body></html>

solucao #2: tableless

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head><style type="text/css">#banner {position: absolute;left: 200PX;top: 10PX;margin: 10PX;height: 150PX;width: 880PX;border: 1PX SOLID #000;background-color: 3 thistle;}#postagens {position: absolute;left: 200PX;top: 176PX;color: #000;margin: 10PX;paddign: 10PX;height: 600PX;width: 620PX;border: 1PX SOLID #000; }#area_restrita {position: absolute;left: 840PX;top: 176PX;color: #666;margin: 10PX;padding: 10PX;height: 290PX;width: 220PX;border: 1PX SOLID #000;}</style></head>
<body bgcolor="#CDC9C9"><div id="banner">	<h1> Portal</h1></div> 
<div id="postagens">	<center><p> Listagem de noticias</p></center></div>
<div id="area_restrita">	<p>Área Restrita</p>	<br>	<form method= "post" action= "entrar.php">	<p> Login: <input type="text" name="login"> </p>	<p> Senha: <input type="password" name="senha"> </p>	<br>	<p><input type="submit" value="OK"></p>	</form></div></body></html>

ps. sempre use as tags [ code ] pra postar codigo

DiF · 10 de dezembro de 2011

@andbecker, sugira sempre o uso de tableless.

tabelas devem ser usadas apenas para dados tabulares e nao para layout.. o site fica muito mais leve

andbecker · 10 de dezembro de 2011

Eu sugeri o tableless mas vi que a solucao inicial dele tinha tabelas, e o intuito era centralizar o conteudo ao redimensionar...

e outra... o cara que mexe com div sabe que não devia fazer uso de tabelas pro layout... só fiz o modo tabelado pra matar o tempo no trampo

Nathanofr · 11 de dezembro de 2011

leandrojunior7 acredito que fique melhor dessa forma, porque ele se ajusta as resoluções:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head><style type="text/css">#banner {margin:0 auto;height: 150PX;width: 900PX;border: 1PX SOLID #000;background-color: 3 thistle;}#principal{width:900px;height:500px;margin: 0 auto;padding:0;margin-top:5px;}#postagens {color: #000;margin:0 auto;height: 500PX;width: 600PX;border: 1PX SOLID #000;float:left;}#area_restrita {color: #666;margin:0 auto;padding:0;height: 250pX;width: 280PX;border: 1PX SOLID #000;background:#FFF;float:right;}#area_restrita p{margin-left:20px;}</style></head>
<body bgcolor="#CDC9C9"><div id="banner">	<h1> Portal</h1></div> <div id="principal"><div id="postagens">	<center><p> Listagem de noticias</p></center></div>
<div id="area_restrita">	<p>Área Restrita</p>	<br>	<form method= "post" action= "entrar.php">	<p> Login: <input type="text" name="login"> </p>	<p> Senha: <input type="password" name="senha"> </p>	<br>	<p><input type="submit" value="OK"></p>	</form></div></div></body></html>