Ir para conteúdo
Fórum Script Brasil
  • 0

Como adaptar uma página para todas resoluções?

TiagoGRSS

Perguntado por TiagoGRSS,

 Share

Pergunta

TiagoGRSS

TiagoGRSS

Postado
Postado

Eu estou fazendo um site de teste, e está pronto, mas quando altero minha resolução, os textos ficam desalinhados, ou quando dou zoom (-), e não quero integrar o texto na imagem, quero deixar ela como texto mesmo, estou usando o Dreamweaver CS6

Alguém pode me ajudar? Não encontro a solução em lugar nenhum

Link para o comentário
Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

  • 0
Nosreve

Nosreve

Postado
Postado

é um pouco complicado essa questao, você tem que usar porcento ao invés de pixels,

por exemplo quando você cria um div crie com width:100%, com isso não importa o tamanho da tela, ela sempre vai ter 100% de largura, esse forum mesmo é assim,

mas eu prefiro usar pixels, o aconselhavel é fazer um site com 800 de largura pois as menores resoluções são 800 X 600

Link para o comentário
Compartilhar em outros sites
  • 0
TiagoGRSS

TiagoGRSS

Postado
  • Autor
Postado (editado)

Ah entendi, estou vendo aqui agora, parece que estou conseguindo XD Muito obrigado, não achava a resposta em lugar nenhum, praticamente não sei nada de CSS e HTML, estou indo as cegas XD mas estou conseguindo fazer o que queria

Edit:

Surgiu outro problema :S

Quando ponho em 100%, a caixa de texto (Estou usando o recurso AP Div para o texto) ela fica grande, mas se eu modificar ela, ela não fica mais 100%, mas se deixar grande, o texto não fica no lugar certo

Tem alguma maneira de arrumar isso?

Editado por TiagoGRSS
Link para o comentário
Compartilhar em outros sites
  • 0
TiagoGRSS

TiagoGRSS

Postado
  • Autor
Postado

Ainda não achei a solução, para entender melhor vou colocar a image do que está acontecendo

http://i48.tinypic.com/uubr4.png

http://i50.tinypic.com/2iscdgn.png

(Obs.: Os em branco eu consegui, mas somente alinhando no centro, porém os de baixo (descrição), não te como ficar alinhado em center, teria que ficar em left, mas em left, ele ocorre isso que aparece na imagem)

Link para o comentário
Compartilhar em outros sites
  • 0
TiagoGRSS

TiagoGRSS

Postado
  • Autor
Postado

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="estilo.css" rel="stylesheet" type="text/css" />

<style type="text/css">

#apDiv1 {

position: absolute;

left: -319px;

top: 473px;

width: 100%;

height: 100%;

z-index: 1;

text-align: center;

font-size: 14px;

color: #FFF;

font-weight: bold;

font-family: Arial, Helvetica, sans-serif;

}

#apDiv2 {

position: absolute;

left: -107px;

top: 486px;

width: 100%;

height: 100%;

z-index: 2;

font-weight: bold;

font-family: Arial, Helvetica, sans-serif;

color: #FFF;

font-size: 14px;

}

#apDiv3 {

position: absolute;

left: 104px;

top: 474px;

width: 100%;

height: 100%;

z-index: 3;

text-align: center;

}

#apDiv4 {

position: absolute;

left: 321px;

top: 490px;

width: 100%;

height: 100%;

z-index: 4;

color: #FFF;

font-weight: bold;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

text-align: center;

}

#apDiv5 {

position: absolute;

left: 56px;

top: 881px;

width: 100%;

height: 100%;

z-index: 5;

font-weight: bold;

margin: 0 auto;

}

</style>

</head>

<body bgcolor="#CC6C39">

<div id="apDiv1">

<p>QUITOSANA SPIRULINA 30X30</p>

</div>

<div class="qme" id="apDiv2">QUITOSANA + ESPIRULINA</div>

<div id="apDiv3">

<p>QUITOSANA + SPIRULINA <br />

ACEROLA + BIOTINA</p>

</div>

<div id="apDiv4">QUITOSANA LARANJA</div>

<div id="topo"><img src="img/red topo.png" width="845" height="473" usemap="#Map" border="0" />

<map name="Map" id="Map">

<area shape="rect" coords="455,419,501,465" href="http://www.facebook.com/produtosnaturaisonline" target="_blank" alt="Facebook" />

<area shape="rect" coords="397,414,441,462" href="http://twitter.com/SAUDEINNATURA" target="_blank" alt="Twitter" />

</map>

</div>

<div id="produtos"><img src="img/red prod.png" width="845" height="312" usemap="#Map2" border="0" />

<map name="Map2" id="Map2">

<area shape="rect" coords="7,3,205,311" href="http://www.produtosnaturaisonline.com.br/vitaesbell-quitosana-e-spirulina.html" target="_blank" alt="Vitaesbell" />

<area shape="rect" coords="219,3,418,314" href="http://www.produtosnaturaisonline.com.br/quitosana-e-espirulina-phytomare-120-capsulas-600mg.html" target="_blank" alt="Quitosana + Espirulina" />

</map>

</div>

<div id="vit">

<p><img src="img/red vit mlhr lgs.png" width="845" height="800" /></p>

<div id="dctr"><img src="img/red dctr.png" width="845" height="125" /></div>

<div id="baixo"><img src="img/baixo 2.png" width="845" height="226" /></div>

<p>&nbsp;</p>

</div>

</body>

</html>

Eu não entendo bem de HTML, então paciência XD

Link para o comentário
Compartilhar em outros sites
  • 0
atkins

atkins

Postado
Postado

Então, para você fazer isso, aquele espaço em branco, se ele for uma div, você deve englobar todo o conteudo na div do espaço branco, caso contrario, aconselho que faça ela virar uma div, por que se você fizer isso, o conteudo por mais que mude de posição, não sairá da parte branca...

Agora em questão a deixar perfeitamente posicionado, você deve estudar bastante hehe, é mais complexo, e ficaria muito dificil para eu conseguir te ensinar em posts...

Link para o comentário
Compartilhar em outros sites
  • 0
atkins

atkins

Postado
Postado

Saca aquela faixa em branco no fundo do site, onde voce posiciona os itens, e quando você amplia o zoom, os itens sai daquele espaço branco?? É daquele espaço que estou falando...

Esse negocio de 100% é muito relativo, você tem que ver o posicionamento dela em relaçao ao fundo, e tudo mais, além do que o 100% nem sempre funciona como a gente gostaria, eu aconselho a você a fazer o posicionamento dos itens em relaçao a faixa branca que lhe disse, e esquecer os 100%, você pode usa-lo depois de você conseguir fazer tudo ficar parado, ai sim você pode começar a brincader expandir... É que nem o velho ditado, não tem tente correr sem nem ao menos saber por um pé na frente do outro...

Qualquer coisa manda uma msg aki que respondo, eu demoro um poquin hehe, mas respondo...

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...