Table que ajuste no tamanho da tela

Oiver · Março 11, 2009

Boa Trade

Estou criando uma pagina no VS.2005 feita em VB.Net, nela tenho um Table com 3 Rows e queria o seguinte:

O 1° Vai ter Height=160px, Width=1003px

O 3° vai ter Height=50px, Width=1003px

Já o 2° que é o row do meio vai se ajustar no tamanho da tela empurrando o 1° para cima e o 3° para baixo sem que os mesmo saiam da tela e fique ajustado no tamanho do monitor independente de qual seja mas continuando com Widht=1003px

Muito obrigado e fico no aguardo

quintelab · Março 11, 2009

Movido Plataforma .NET http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Plataforma .NET » Web Applications

Oenning · Março 12, 2009

Eu aconselho você a fazer isso em HTML puro primeiro, depois passar para o ASPX. No fundo, ASPX é HTML, então fazendo um você chega rápido no outro. E outra, se essa Table você não vai precisar mudar suas propriedades via C#, ao invés de usar <asp:Table>, use <table>. Acho que o pessoal de CSS/XHTML vai conseguir te ajudar melhor. E provavelmente vão te aconselhar a usar div ao invés de table. Quer que eu mova para o fórum de XHTML/CSS? Ou eu viajei na resposta e não entendi sua pergunta?

Abraço!

Oiver · Março 12, 2009

Eu aconselho você a fazer isso em HTML puro primeiro, depois passar para o ASPX. No fundo, ASPX é HTML, então fazendo um você chega rápido no outro. E outra, se essa Table você não vai precisar mudar suas propriedades via C#, ao invés de usar <asp:Table>, use <table>. Acho que o pessoal de CSS/XHTML vai conseguir te ajudar melhor. E provavelmente vão te aconselhar a usar div ao invés de table. Quer que eu mova para o fórum de XHTML/CSS? Ou eu viajei na resposta e não entendi sua pergunta?

Abraço!

Oenning, muito obrigado pela ajuda. Eu ja tentei usar div mas mesmo assim não estou conseguindo ajustar no tamanho da tela, queria que iso fosse como falei a cima, a div do meio empurrasse a 1ª para cima e a 3ª para baixo no limite da tela e assim aparecesse na divi do meio a barra de scroll.

obrigado e fico no aguardo.

Oenning · Março 12, 2009

Movido Web Applications -> Webstandards: CSS / XML / XHTML / HTML

Acho que aqui o pessoal vai conseguir te ajudar melhor. ^_^

Oiver · Março 12, 2009

Movido Web Applications -> Webstandards: CSS / XML / XHTML / HTML

Acho que aqui o pessoal vai conseguir te ajudar melhor. ^_^

Obrigado, espero que possam ajudar, estou necessitando muito disso...

William Bruno · Março 17, 2009

Dá uma olhada, se é isso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 
<head> 
<head>
<style type="text/css" media="all">
* {
	margin: 0;
	padding: 0;
}
body, html { height: 100%;}
#tudo {
	height: 100%;
	width: 1003px;
	margin: 0 auto; 
	background-color: #0ff;
	overflow: hidden;
	position: relative;
	z-index: 1;
	min-height: 600px;
}
#topo {
	background-color: #f00;
	height: 160px;
	width: 100%;
	position: absolute;
	top: 0;
}
#rodape {
	position: absolute;
	bottom: 0;
	background-color: #ff0;
	width: 1003px;
	height: 50px;
}
#conteudo {
	background-color: #f0f;
	padding: 160px 0 50px 0;
	height: 100%;
}
</style>
</head>

<body>

<div id="tudo">
	<div id="topo">
	
	</div><!-- /topo -->
	<div id="conteudo">
		Escreve aqui o conteudo que for no centro<br />
		Escreve aqui o conteudo que for no centro<br />


	</div><!-- /conteudo -->
	<div id="rodape">
	
	
	</div><!-- /rodape -->
</div><!-- /tudo -->
</body>
</html>

Oiver · Março 17, 2009

Bom dia William Bruno

Me ajudou bastant http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif , não era exatamente oq queria mas adaptei no meu codigo. so queria mais uma coisa, queria que a barra do ie não aparecesse, como faço isso? :huh:

Muito obrigado

William Bruno · Março 17, 2009

Com esse atributo HTML aqui, você consegue tirar a barra de rolagem do IE6(tô sem outros para testar), probleminha, é que ele não valida no w3c.

<body scroll="no">

Se tiver como, posta o treco pertinente ao tópico, sobre as modificações que você fez para o teu código.

Tenho certeza que pode vir à ajudar outras pessoas.

Oiver · Março 17, 2009

Com esse atributo HTML aqui, você consegue tirar a barra de rolagem do IE6(tô sem outros para testar), probleminha, é que ele não valida no w3c.
<body scroll="no">
Se tiver como, posta o treco pertinente ao tópico, sobre as modificações que você fez para o teu código.
Tenho certeza que pode vir à ajudar outras pessoas.

Muito obrigado William deu certinho aqui...

Vou postar meu codigo com as modificações as ele ainda não esta pronto,tem uma parte que tenho que rsolver ainda que vou destacar logo apos o codigo:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<%@ Register Assembly="FlashControl" Namespace="Bewise.Web.UI.WebControls" TagPrefix="Bewise" %>

<!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" >
<head id="Head1" runat="server">
	<title>.:Consórcio Opção:.</title>
</head>
<body scroll="no" style="left: 0px; width: 1003px; top: 0px; height: 100%; background-color: #ffffff; background-image: url(img/fundo.png); background-repeat: repeat-y; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px;">
	<form id="form1" runat="server">
		<table border="0" cellpadding="0" cellspacing="0" style="width: 998px; height: 323px; z-index: 100; left: 0px; top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px;">
			<tr>
				<td style="height: 160px; position:absolute; top:0; width: 1003px; border-right: silver 5px inset; border-top: silver 5px inset; vertical-align: top; border-left: silver 5px inset; border-bottom: silver 5px inset; text-align: center;" colspan="">
					<Bewise:FlashControl ID="FlashControl1" runat="server" Height="160px" Loop="True"
						MovieUrl="~/img/baner.swf" Width="1005px" Align="Left" />
				</td>
			</tr>
			<tr>
				<td style="height: 100%; padding:190px 0 0px 0; vertical-align: top; width: 1003px; text-align: center; position:relative; border-top-width: 5px; border-left-width: 5px; border-left-color: silver; border-bottom-width: 5px; border-bottom-color: silver; border-top-color: silver; border-right-width: 5px; border-right-color: silver;">
		<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
		</asp:contentplaceholder>
				</td>
			</tr>
			<tr>
				<td style="border-right: silver 5px inset; position:absolute; bottom:0;  border-top: silver 5px inset; border-left: silver 5px inset;
					width: 1003px; border-bottom: silver 5px inset; height: 50px; background-color: black;
					text-align: center; vertical-align: top;">
					<table>
						<tr>
							<td style="width: 205px; font-family: Aero, 'Arial Black'; height: 50px">
								<Bewise:FlashControl ID="FlashControl5" runat="server" Height="50px" Loop="True"
									MovieUrl="~/img/relogio.swf" Width="180px" />
							</td>
							<td style="width: 68px; font-family: Aero, 'Arial Black'; height: 50px">
								<Bewise:FlashControl ID="FlashControl4" runat="server" Height="50px" Loop="True"
									MovieUrl="~/img/menu.swf" Width="60px" />
							</td>
							<td style="width: 219px; font-family: Aero, 'Arial Black'; height: 50px">
								<Bewise:FlashControl ID="FlashControl2" runat="server" Height="50px" Loop="True"
									MovieUrl="~/img/rot.swf" Width="200px" />
							</td>
							<td style="width: 50px; font-family: Aero, 'Arial Black'; height: 50px">
								<Bewise:FlashControl ID="FlashControl3" runat="server" Height="50px" Loop="True"
									MovieUrl="~/img/senha.swf" Width="50px" />
							</td>
							<td style="width: 114px; font-family: Aero, 'Arial Black'; height: 50px; vertical-align: middle;">
								<span style="color: #ffffff">Grupo:
									<asp:TextBox ID="TextBox1" runat="server" Width="48px"></asp:TextBox></span></td>
							<td style="width: 101px; font-family: Aero, 'Arial Black'; height: 50px; vertical-align: middle;">
								<span style="color: #ffffff">Cota: </span>
								<asp:TextBox ID="TextBox2" runat="server" Width="48px"></asp:TextBox></td>
							<td style="width: 114px; font-family: Aero, 'Arial Black'; height: 50px; vertical-align: middle;">
								<span style="color: #ffffff">Senha: 
									<asp:TextBox ID="Password" runat="server" TextMode="Password" Width="48px"></asp:TextBox></span></td>
							<td style="vertical-align: middle; width: 50px; font-family: Aero, 'Arial Black';
								height: 50px">
								<asp:ImageButton ID="ImageButton1" runat="server" AlternateText="Entrar" Height="50px"
									ImageUrl="~/img/entrar.jpg" Width="50px" /></td>
							<td style="vertical-align: middle; width: 32px; font-family: Aero, 'Arial Black';
								height: 50px">
								<asp:ImageButton ID="ImageButton2" runat="server" AlternateText="Esqueci a senha"
									Height="50px" ImageUrl="~/img/esqueci.jpg" Width="32px" /></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

Agora essa parte onde contem meu Contentplaceholder eu queria que ele ficasse do tamanho restante da tela entre o banner e o rodape mas não esta dando poderia me ajudar?

<tr>
				<td style="height: 100%; padding:190px 0 0px 0; vertical-align: top; width: 1003px; text-align: center; position:relative; border-top-width: 5px; border-left-width: 5px; border-left-color: silver; border-bottom-width: 5px; border-bottom-color: silver; border-top-color: silver; border-right-width: 5px; border-right-color: silver;">
		<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
		</asp:contentplaceholder>
				</td>
			</tr>

muito obrigado

William Bruno · Março 17, 2009

Eu não tenho interpretador ASP.

Poste o HTML gerado, ou um link para a página.

Oiver · Março 17, 2009

não tenho o link ainda mas o codigo gerado é esse:

<!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" >
<head id="ctl00_Head1"><title>
	.:Consórcio Opção:.
</title>
<script language="javascript" type="text/javascript">
// <!CDATA[

function TABLE1_onclick() {

}

// ]]>
</script>
<link href="/consorcioopcao/WebResource.axd?d=-2jAAK2lGXKD31BFQHPrdIklo88xFe6BQtGTMX7hrNEj4jZ0tmN3XWZ7-vvrNLbPyfM-ZbD6V0sTUiR-D573EA2&t=632789916600000000" rel="stylesheet" type="text/css" /></head>
<body scroll="no" style="left: 0px; width: 1003px; top: 0px; height: 100%; background-color: #ffffff; background-image: url(img/fundo.png); background-repeat: repeat-y; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px;">
	<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTgzMzcyNjE5OWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFEmN0bDAwJ
EltYWdlQnV0dG9uMQUSY3RsMDAkSW1hZ2VCdXR0b24ynfuji7+OTF8BD373IVdblFgTeRo=" />
</div>


		<table border="0" cellpadding="0" cellspacing="0" style="width: 998px; height: 323px; z-index: 100; left: 0px; top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px;" id="TABLE1" onclick="return TABLE1_onclick()">
			<tr>
				<td style="height: 160px; position:absolute; top:0; width: 1003px; border-right: silver 5px inset; border-top: silver 5px inset; vertical-align: top; border-left: silver 5px inset; border-bottom: silver 5px inset; text-align: center;" colspan="">
					<object id="FlashControl1" width="1005px" height="160px" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
<param name="movie" value="img/baner.swf">
<param name="align" value="l">
<param name="quality" value="High">
<param name="play" value="True">
<param name="loop" value="True">
<param name="menu" value="False">
<param name="scale" value="Showall">
</object>
				</td>
			</tr>
			<tr>
				<td style="height: 100%; padding:190px 0 0px 0; vertical-align: top; width: 1003px; text-align: center; position:relative; border-top-width: 5px; border-left-width: 5px; border-left-color: silver; border-bottom-width: 5px; border-bottom-color: silver; border-top-color: silver; border-right-width: 5px; border-right-color: silver;">
		
	<div id="ctl00_ContentPlaceHolder1_Panel1" style="height:100%;width:1005px;overflow-y:scroll;">
	
		<table id="ctl00_ContentPlaceHolder1_Table1" border="0">

	</table>
	
</div>



				</td>
			</tr>
			<tr>
				<td style="border-right: silver 5px inset; position:absolute; bottom:0;  border-top: silver 5px inset; border-left: silver 5px inset;
					width: 1003px; border-bottom: silver 5px inset; height: 50px; background-color: black;
					text-align: center; vertical-align: top;">
					<table>
						<tr>
							<td style="width: 205px; font-family: Aero, 'Arial Black'; height: 50px">
								<object id="FlashControl5" width="180px" height="50px" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
<param name="movie" value="img/relogio.swf">
<param name="quality" value="High">
<param name="play" value="True">
<param name="loop" value="True">
<param name="menu" value="False">
<param name="scale" value="Showall">
</object>
							</td>
							<td style="width: 68px; font-family: Aero, 'Arial Black'; height: 50px">
								<object id="FlashControl4" width="60px" height="50px" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
<param name="movie" value="img/menu.swf">
<param name="quality" value="High">
<param name="play" value="True">
<param name="loop" value="True">
<param name="menu" value="False">
<param name="scale" value="Showall">
</object>
							</td>
							<td style="width: 219px; font-family: Aero, 'Arial Black'; height: 50px">
								<object id="FlashControl2" width="200px" height="50px" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
<param name="movie" value="img/rot.swf">
<param name="quality" value="High">
<param name="play" value="True">
<param name="loop" value="True">
<param name="menu" value="False">
<param name="scale" value="Showall">
</object>
							</td>
							<td style="width: 50px; font-family: Aero, 'Arial Black'; height: 50px">
								<object id="FlashControl3" width="50px" height="50px" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
<param name="movie" value="img/senha.swf">
<param name="quality" value="High">
<param name="play" value="True">
<param name="loop" value="True">
<param name="menu" value="False">
<param name="scale" value="Showall">
</object>
							</td>
							<td style="width: 114px; font-family: Aero, 'Arial Black'; height: 50px; vertical-align: middle;">
								<span style="color: #ffffff">Grupo:
									<input name="ctl00$TextBox1" type="text" id="ctl00_TextBox1" style="width:48px;" /></span></td>
							<td style="width: 101px; font-family: Aero, 'Arial Black'; height: 50px; vertical-align: middle;">
								<span style="color: #ffffff">Cota: </span>
								<input name="ctl00$TextBox2" type="text" id="ctl00_TextBox2" style="width:48px;" /></td>
							<td style="width: 114px; font-family: Aero, 'Arial Black'; height: 50px; vertical-align: middle;">
								<span style="color: #ffffff">Senha: 
									<input name="ctl00$Password" type="password" id="ctl00_Password" style="width:48px;" /></span></td>
							<td style="vertical-align: middle; width: 50px; font-family: Aero, 'Arial Black';
								height: 50px">
								<input type="image" name="ctl00$ImageButton1" id="ctl00_ImageButton1" src="img/entrar.jpg" alt="Entrar" style="height:50px;width:50px;border-width:0px;" /></td>
							<td style="vertical-align: middle; width: 32px; font-family: Aero, 'Arial Black';
								height: 50px">
								<input type="image" name="ctl00$ImageButton2" id="ctl00_ImageButton2" src="img/esqueci.jpg" alt="Esqueci a senha" style="height:50px;width:32px;border-width:0px;" /></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	
<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBgLf4/GIDQK33sGJAQK33rWJAQLVyZaWAwLssvLQAwLssu7QA2xxpOkpr5bwUgvYS7BZmCgwl0Fh" />
</div></form>
</body>
</html>

e a parte que tem que se ajustar no tamanho do centro da tela e se passar aparecer o scroll é essa:

<tr>
				<td style="height: 100%; padding:190px 0 0px 0; vertical-align: top; width: 1003px; text-align: center; position:relative; border-top-width: 5px; border-left-width: 5px; border-left-color: silver; border-bottom-width: 5px; border-bottom-color: silver; border-top-color: silver; border-right-width: 5px; border-right-color: silver;">
		
	<div id="ctl00_ContentPlaceHolder1_Panel1" style="height:100%;width:1005px;overflow-y:scroll;">
	
		<table id="ctl00_ContentPlaceHolder1_Table1" border="0">

	</table>
	
</div>



				</td>
			</tr>

ScornInPC · Março 19, 2009

Bem, fiz um tópico novo, pois não era bem isso a duvida, mas ja que me moveram pra ká ....

bem, esse layout consegui fazer legal, o problema é que a div (tag) do meio, não tem scroll, e quando coloco, o script fica faltando um pedaço, ja que ele tem um pedaço hidden.

Tem como colocar uma (tag) outra div ali no meio com scroll? assim a gente faz só o meio rolar.

tentei colocar uma outra div ali dentro do conteudo, e o deixar o conteudo com [padding-bottom: -(rodape+topo)]. pela lógica, eu faria a nova div não ter o pedaço escondido, mas não funcionou.

Alguma idéia?

Valeu.

Arquivado

Table que ajuste no tamanho da tela

Recommended Posts

Oiver 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

quintelab 91

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oenning 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oiver 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oenning 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oiver 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oiver 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oiver 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oiver 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Fóruns

Tempo Real

Informação importante