Jump to content

  2. →
  3. →
  4. →

Photo

Como Fazer Com Q A Pagina Se Auto-ajuste Conforme Resolução

Started By Josy, 22/11/2006, 14:21

  • Faça o login para participar
18 replies to this topic

#1 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 22/11/2006, 14:21

Tem alguma maneira d fazer com q a pagina ocupe a tela toda do navegador, mas q nao faça aparecer a barra de rolagem vertical nao importando a resolução do monitor do pc onde a pagina esteja sendo acessada?? No caso q a pagina se auto ajuste em qualquer resolução de monitor..

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#2 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 22/11/2006, 16:27

Layout líquido .... procure no google, tem bastante coisa sobre o assunto, qq coisa volte a postar ... :P
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#3 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 23/11/2006, 14:30

Li algumas páginas sobre o assunto, e pelo q entendi, o layout líquido seria montar a divisão da página em porcentagem %, assim ela se ajusta a medida d cada resolução.. certo??

Minha página é formada por uma tarja preta em cima q fica um pouco espaçada do topo da página e uma borda q tb tem o tamanho width e height ja definidos em porcentagem.. mas mesmo assim, se muda pra resolução de 800x600 aparece a barra de rolagem vertical, mostrando a diferença na resolução..

Qual a solução no meu caso? Se alguem puder me dar uma ajuda..

<style type="text/css">
<!--

body
{
font: normal 13px verdana;
Background: white;
color: gray;
text-align: center;
}

h3 /* POSICIONA TARJA PRETA */
{
border-style: solid;
border-width: 0px;
background: black;
height: 70px;
color: white;
font: bold 15px verdana;
padding-top: 1%;
}

#borda /* POSICIONA BORDA */
{
border-style: ridge;
background: #eee;
width: 100%;
height: 80%;
}

h5 /* POSICIONA $PROB */
{
color: red;
font: normal 13px verdana;
}

h1
{
color: black;
font: italic 20px verdana;
}

p
{
color: yellow;
font: normal 10px verdana;
float: center;
}

#rodape
{
width:100%;
font: normal normal normal 10px Arial, Helvetica, Sans-Serif;
text-align: center;
clear:both;
float: center;
}

-->
</style>

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#4 bdoweb

bdoweb

    Super Veterano

  • Usuários
  • 1641 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 23/11/2006, 15:00

esse artigo é bem completo veja se ele te ajuda ... http://www.imasters.com.br/artigo/3638

ps.: movi para css
Quer ajuda seus amigo e ainda ganhar uma graninha?
Acesse agora mesmo http://yeapiz.com

#5 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 24/11/2006, 13:18

Olha reformulei o CSS da minha página, acho q adiantou alguma coisa, mas depois q fiz a alteração nao consigo deixar um espaço em branco entre o topo e o corpo como na página:

www.abojeris.com.br/extrato/autentica.php

o css agora:

<style type="text/css">
<!--

body
{

font: normal 13px verdana;
Background: white;
color: gray;
text-align: center;
}

#topo /* TARJA PRETA */
{
border-style: solid;
border-width: 0px;
background: black;
height: 14%;
}

p
{
color: yellow;
font: normal 10px verdana;
float: center;
}

h4
{
color: white;
font: bold 15px verdana;
padding-top: 1%;
}

#borda /* POSICIONA BORDA */
{
border-style: ridge;
background: #eee;
height: 85%;
width: 100%; //largura borda
}

h5 /* POSICIONA $PROB */
{
color: red;
font: normal 13px verdana;
}

h1
{
color: black;
font: italic 20px verdana;
}

#rodape
{
font: normal normal normal 10px Arial, Helvetica, Sans-Serif;
text-align: center;
clear:both;
}



-->
</style>

Mas o topo e a borda, onde seria o corpo da página agora ficam grudados, e nao consigo deixar o espaço em branco como na página antiga q esta no link acima.. Qual seria a solução para este código agora pra deixar esse espaço entre o topo e o corpo??

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#6 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 24/11/2006, 13:56

Aqui não está parecendo grudado não, Josy.

Veja na imagem...

Qualquer coisa cola um print screen para vermos.

Attached Files


Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#7 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 24/11/2006, 14:27

Sim, essa página q está no ar, é a página antiga, foi ela q formulei o css q é esse aqui postado, +- com layout líquido, e desse jeito q esta o css aqui, nao fica como ai na pagina separado, fica grudado..

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#8 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 24/11/2006, 14:32

Posta o html tb Josy.

Vai ter que colocar um margin-top na div do conteúdo que vc quer que distancie do topo

Edição feita por: Andreia Regina, 24/11/2006, 14:32.

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#9 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 24/11/2006, 14:51

Aí vai..

<div id="topo">
<h4>Associação dos Oficiais da Justiça do RS (ABOJERIS)</h4>
<p>André Belo, 603 - Menino Deus - Porto Alegre/RS - Cep: 90110-020 - Fone: (51) 3224.1997</p>
</div>

<body onLoad="document.getElementById('matricula').focus()">

<form name="frmAutentica" method="post">
<table align="center" border="0" cellpading="0" cellspacing="0">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td align="center" colspan="2"><h1>Extrato Financeiro ABOJERIS</h1></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="40%" align="right">Matricula:&nbsp;&nbsp;&nbsp;</td>
<td width="40%"><input type="text" name="matricula" size="8" maxlength="8" onKeyUp="pularcampo('matricula','senha','8')"></td>
</tr>
<tr>
<td width="40%" align="right">Senha:&nbsp;&nbsp;&nbsp;</td>
<td width="40%"><input type="password" name="senha" size="8" maxlength="7" onKeyUp="pularcampo('senha','btnLogar','7')"></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2" cellpading="20%" align="center">
<input type=hidden name="recipient" value="0">
<input type=hidden name="ip" id="ip" value="<? echo $_SERVER['REMOTE_ADDR']; ?>">
<input type="submit" name="btnLogar" value="Entrar >>" onclick="mostrar();"></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td align="center" colspan="2"><h5><? echo $prob; ?></h5></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2"><div id="rodape">Resolução Mínima de 800x600 © Copyright 2006. ABOJERIS - <a href="mailto:extrato@abojeris.com.br">extrato@abojeris.com.br</a></div></td>
</tr>
</table>
</form>
</div>
</html>
</body>

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#10 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 27/11/2006, 07:39

Ok, consegui colocando margin-bottom no topo entao ficou afastado .. Mas no corpo embora eu colocasse margin-top nao deu..

Qto ao espaço entre o topo e o corpo td ok, mas dessa forma como esta o codigo agora o rodapé no firefox nao fica no rodapé da página obedecendo o clear:both, qual seria a solução pra coloca-lo abaixo de td e deixa-lo como o IE??

Edição feita por: Josy, 27/11/2006, 07:49.


___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#11 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 27/11/2006, 08:30

Oi Josy!

Tentou deixar a div rodapé fora da tabela?

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#12 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 27/11/2006, 12:26

Tirei essa div d dentro da tabela, e nao adiantou pro firefox nao fica bem embaixo da página como pro IE, tem mais alguma coisa q eu possa fazer?

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#13 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 27/11/2006, 13:24

Tenta assim: Crie uma div e coloque o form todo dentro dela e a div rodapé abaixo dessa div e posta o que acontece.

Insere aqui um printscreen do resultado no firefox.

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#14 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 28/11/2006, 07:44

<div id="topo">
<h4>Associação dos Oficiais da Justiça do RS (ABOJERIS)</h4>
<p>André Belo, 603 - Menino Deus - Porto Alegre/RS - Cep: 90110-020 - Fone: (51) 3224.1997</p>
</div>

<div id="borda">
<form name="frmAutentica" method="post">
<table align="center" border="0" cellpading="0" cellspacing="0">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td align="center" colspan="2"><h1>Extrato Financeiro ABOJERIS</h1></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="40%" align="right">Matricula: </td>
<td width="40%"><input type="text" name="matricula" size="8" maxlength="8" onKeyUp="pularcampo('matricula','senha','8')"></td>
</tr>
<tr>
<td width="40%" align="right">Senha: </td>
<td width="40%"><input type="password" name="senha" size="8" maxlength="7" onKeyUp="pularcampo('senha','btnLogar','7')"></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" cellpading="20%" align="center">
<input type=hidden name="recipient" value="0">
<input type=hidden name="ip" id="ip" value="<? echo $_SERVER['REMOTE_ADDR']; ?>">
<input type="submit" name="btnLogar" value="Entrar >>" onclick="mostrar();"></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td align="center" colspan="2"><h5><? echo $prob; ?></h5></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>

</table>

</form>
</div>

<div id="rodape">Resolução Mínima de 800x600 © Copyright 2006. ABOJERIS - <a href="mailto:extrato@abojeris.com.br">extrato@abojeris.com.br</a></div>


Ficou assim o código, como acima, só q dessa forma o rodapé fica fora da borda, mas deveria ficar dentro..

Attached Files



___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#15 LarPhozyHah

LarPhozyHah

    Super Veterano

  • Usuários
  • 14515 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 23/09/2017, 10:11

Amoxicilina Want To Buy Nitostat Without Rx Apres Clomid J Ai cialis online Canadian Pharmacy On Script Needed Priligy Vendo Inde Emballage Priligy
Voltar para CSS & Semântica (Tableless)


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → CSS & Semântica (Tableless)
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq