Top/Bottom/Centrar

PTDown · August 14, 2009 at 12:51 PM

Boas! 😞

Estou aqui com um problema.

Eu quero meter o banner (BANNER) em Top e centrado (Já está).

Meter a form em "middle" (top: 35% e bottom 65%). (Já está com op: 35% e bottom 65%, mas não está centrado )

Meter as IMG1 e IMG2(E respectivo texte em baixo) em bottom com 5%. (Já está em bottom, mas não fica centrado)

Mas não funciona

<html>
<body background="BACK">
<div align="center">
<img src="BANNER" align="top" />
</div>
<br />

<div  align="center" style='position: absolute; top: 35%; bottom: 65%;'>
<div style="width:460px; height:auto ;border:1px outset #c0c0c0;">
<form name=theform onSubmit="return go();" action="#">
<p></p>
  <input type="text" size="50" maxlength="255" name="textboxurl">
  <input type="button" onClick=javascript:go() value="Gerar URL">
<p><textarea name="thelink1" readonly="" onclick="highlight(this);" wrap="soft" cols="50" rows="1"></textarea></p>
</form>
</div>
</div>



<div  align="center" style='position: absolute; top: 95%%; bottom: 5%;'>
<img src="IMG1"/> <img src="IMG2" width="80" height="15" /><br />
<font color="#c0c0c0" size="1" face="Verdana" >XPTO - 2009</font>
</div>
</body>
</html>

Phear99 · August 14, 2009 at 11:59 PM

Sugestão para centrares a div:

<div  align="center" style='position: absolute; top: 35%; bottom: 65%;'>

acrescenta ao style:

text-align: center;

e acho que podes retirar o

align="center"

(penso que não está a fazer nada)

<div style="width:460px; height:auto ;border:1px outset #c0c0c0;">

acrescenta ao style

position: relative; margin-left: auto; margin-right: auto;

É um truque utilizado para centrar o conteúdo dentro de divs (também pode ser utilizado no body para centrar todo o site). Na exterior estabeleces text-align: center, e defines a div a centrar como position: relative e as margens laterais automáticas. (Isto só funciona se a div a centrar fôr de largura bem definida, como é o caso)

Quanto às imagens, acho que o que pretendes é o mesmo que no caso acima. Simplesmente cobre-as com uma segunda div e segue o sistema anterior.

Espero ter ajudado. Depois diz se funcionou.

PTDown · August 15, 2009 at 10:57 PM

Não funciona/Não consegui.

Deixo aqui o index: http://rapidshare.com/files/267813229/index.html

PS: Olha um de LEI na UM! xD

Phear99 · August 16, 2009 at 12:05 AM

Já funciona/Eu consegui 😞

O teu index: index.html

A prova

PS: Olha um de LEI na UM! xD

Com muito orgulho mesmo! Somos mesmo bons 😄

EDIT: esqueci-me de colocar aqui o código, para o interesse da comunidade:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<meta name="author" content="Ricardo Vieira" />

<title>REDiR - The Ultimate Link Protection</title>	

	<script type="text/javascript">

	function highlight(field) {

		field.focus();

		field.select();

	}

</script>

</head>



<body background="http://upimagens.com/imagens/434869bg.gif" style="text-align:center;">

	<div>

		<img src="http://a.imagehost.org/0665/redir.png" align="top" />

	</div>



	<div style='position: absolute; top: 35%; bottom: 65%; width:100%;'>

	<div style="position:relative; margin-left:auto; margin-right:auto; width:460px; height:auto ;border:1px outset #c0c0c0;">

	<form name= theform onsubmit="return go();" action="#">

	<p></p>

	  <input type="text" size="50" maxlength="255" name="textboxurl"/>

	  <input type="button" onclick=javascript:go() value="Gerar URL"/>

	<p></p>

	<textarea name="thelink1" readonly onclick="highlight(this);" nowrap="soft" cols="50" rows="1"></textarea>

	<p></p>

	</form>

	</div>

	</div>





	<div style='position:absolute; bottom: 2%; width:100%;'>

		<div style="position:relative; margin-right:auto; margin-left:auto;">

			<img src="http://upimagens.com/imagens/954449phppowered.png"/>

			<img src="http://upimagens.com/imagens/623053htmlpowered.gif"/>

			<br />

			<font color="#c0c0c0" size="1" face="Verdana" >REDiR - 2009</font>

		</div>

	</div>







	<!-- REDiR LiNK -->



	<script language="javascript" type="text/javascript">

	  function go()

	  {

		x=document.theform.textboxurl.value;

		if (x.length==0){alert('ERRO! Deve introduzir o endereço.'); return 0;}

		y=document.location.search.substring(1,11);

		y='';

		document.theform.thelink1.value='http://redir.pcinove.com/?'+x+''+y;



		return false;

	  }

	</script>



	<!-- END «» REDiR LiNK -->





</body>

</html>

PTDown · August 16, 2009 at 10:46 PM

Já está, muito obrigado. 🙂

Mas surgiu outro problema:

Porque carga de agua é que tem de ter a barra ai? (Com a resolução que tenho no PC isso não devia acontecer (Tb te acontece a ti)).

PS: LTSi ou Eng. Civil FTW! (Vou mudar para LTSi ou Eng. Civil, já frequento o Ensino Superior, mas vou mudar de instituição/curso)

PS2: Alguem sabe de um site onde tenha deste tipo de imagens. (Eu sabia de um site com uma db só deste tipo de imagens mas esqueci. :/

EDIT: Resolvido. Bastou meter os width com 99%.

Cumpz 😉

Sign In

Top/Bottom/Centrar

Recommended Posts

PTDown

Phear99

PTDown

Phear99

PTDown

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information