[Resolvido] Imagens ficam em lugares errados quando online

cadesbr · Abril 22, 2010

Estou atualizando um site e com isso aprendendo a lidar do html e xhtml, meu site está em xhtml 1.0 e quando coloco ele on line as imagens ficam fora do lugar, o que fazer para corrigir esse problema, preciso de ajuda urgente!

estou disponibilizando o html do site para as contribuições.

<!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>
  <title>grupo de estudos e
pesquisas sobre trabalho e educacao - GEPTE</title>
  <link rel="stylesheet"
 type="text/css" href="default.css" media="screen" />
  <meta http-equiv="Content-Type"
 content="text/html;Western=Windows-1252" />
</head>
<body>
<div>
<div class="top">
<div class="header">
<div class="left">   <img
 style="position: absolute; width: 529px; height: 87px; top: 32px; left: 121px;"
 alt="" src="img/logo01.gif" /> </div>
<div class="right">
<h2><img
 style="position: absolute; width: 149px; height: 95px; top: 25px; left: 692px;"
 alt="" src="img/gepte.jpg" /></h2>
</div>
</div>
</div>
<div class="container">
<div class="navigation">
<div class="navigation"><a
 title="Home" href="linhas">LINHAS DE
PESQUISA</a><a
 title="Downloads" href="propes">PROJETOS
DE
PESQUISA </a><a
 title="Documentation" href="obj">OBJETIVOS
</a><a
 title="FAQs" href="../index.html#">EVENTOS</a></div>
</div>
<div class="main">
<div class="content">
<h3><big>APRESENTAÇÃO</big></h3>
<p class="MsoNormal"
 style="text-indent: 30px; margin-top: 0pt; margin-bottom: 0pt; text-align: justify;"> <font
 style="color: rgb(0, 51, 51);" face="Arial" size="2">O
<b>Grupo de
Estudos e Pesquisas Sobre
Trabalho e Educação - GEPTE, </b>do
Insituto de
Ciêncas da Educação da UFPA, iniciou
suas
atividades no ano de 2001
e tem se ocupado de pesquisas e discussões relativas
à
área de trabalho e educação, tendo
sido mais
presente no Grupo o desenvolvimento de ações de
pesquisa
focadas na educação profissional paraense, nas
políticas educacionais brasileiras e no trabalho escravo
contemporâneo.</font></p>
<p class="MsoNormal"
 style="text-indent: 30px; margin-top: 0pt; margin-bottom: 0pt; color: rgb(0, 51, 51); text-align: justify;"><font
 face="Arial" size="2">O
GEPTE reúne
pesquisadores e estudantes de
pós-graduação e de
graduação de diferentes unidades da UFPA e de
outras
instituições, mas prevalece o vínculo
de seus
integrantes com o Programa de
Pós-Graduação em
Educação e com o Curso de Pedagogia do Instituto
de
Ciências da
Educação da UFPA.</font></p>
<p class="MsoNormal"
 style="text-indent: 30px; margin-top: 0pt; margin-bottom: 0pt; color: rgb(0, 51, 51); text-align: justify;"><font
 face="Arial" size="2">A
integração no Grupo dá-se
por meio do desenvolvimento de projetos de pesquisas ou planos de
trabalho que têm a área de trabalho e
educação como eixo constitutivo de sua
problemática.</font></p>
<p
 style="margin-top: 0pt; margin-bottom: 0pt; color: rgb(0, 51, 51); text-align: justify;"><span
 style="font-family: Arial;"><font
 size="2">   
    O mesmo está cadastrado no
Diretório de Grupos de CNPq como Grupo de Pesquisa Trabalho,
Educação e Educação
Profissional.</font></span></p>
<p
 style="margin-top: 0pt; margin-bottom: 0pt; color: rgb(0, 51, 51); text-align: justify;"><span
 style="font-family: Arial;"><font
 size="2">   
    Atualmente, o GEPTE está
desenvolvendo uma pesquisa sobre as experiências de ensino
médio integrado no Estado do Pará, que tem como
objetivo investigar e sistematizar as estratégias de ensino
integrado desenvolvidas em instituições de
educação profissional sediadas no Estado do
Pará. Na pesquisa será privilegiado o estudo de
experiências de ensino integrado orientadas por uma
perspectiva referenciada na Filosofia da Práxis.</font></span></p>
<div
 style="margin-left: 400px; width: 154px;">   
         
       Leia mais...<br />
<br />
</div>
<h3><big>DESTAQUES
DO SITE</big></h3>
<p><span
 style="color: rgb(0, 51, 51);">
III Simpósio Internacional
Trabalho, Relações de Trabalho,
Educação e
Identidade</span><br
 style="color: rgb(0, 51, 51);" />
<br style="color: rgb(0, 51, 51);" />
<span style="color: rgb(0, 51, 51);">II
SENEPT - Belo Horizonte - MG</span><br
 style="color: rgb(0, 51, 51);" />
<br style="color: rgb(0, 51, 51);" />
<span style="color: rgb(0, 51, 51);">33ª
ANPED - Caxambu - MG</span><br
 style="color: rgb(0, 51, 51);" />
</p>
<span style="color: rgb(0, 51, 51);"> 
         
       
           
       
           
       
           
       
Veja mais detalhes e outros eventos...</span>
<h3><big>LIVROS</big></h3>
A Educação Profissional no Pará<br />
<img style="width: 68px; height: 77px;"
 alt="" src="img/educacao%20profissional.JPG" /><small><span
 style="font-weight: bold; color: rgb(0, 0, 102);"><span
 style="font-family: Arial;" /></span></small>Organizador:
Ronaldo
Marcos de Lima Araújo<br />
          
       
           
       
           
       
           
       
           
     
  Veja mais publicações...
</div>
<div class="sidenav">
<ul style="font-weight: bold;">
  <li><a
 title="Home" href="../index.html#">PROJETOS DE
EXTENSÃO </a></li>
  <li><a
 title="Downloads" href="../index.html#">CATÁLOGO
DE
FICHAMENTOS </a></li>
  <li><a
 title="Documentation" href="../index.html#">ACERVO
BIBLIOGRÁFICO </a></li>
  <li><a
 title="FAQs" href="../index.html#">PUBLICAÇÕES
    </a></li>
  <li><a
 title="Contact Us" href="http://www.peeloutlabels.com/">IMAGENS
    </a></li>
</ul>
<ul style="font-weight: bold;">
  <li><a
 href="http://www.peeloutlabels.com/Printed_Integrated_Labels.html">LINKS
    </a></li>
  <li><a
 href="contato">FALE
CONOSCO </a></li>
</ul>
<p></p>
<!-- INICIO CONTADOR GRATIS -->
<a
 href="http://www.produtosparaemagrecer.com/" target="_blank"><img
 src="http://www.contadordevisitasgratis.com/contadorgratis/getcount.php?cid=19d22267" /></a><br />
<a
 href="http://www.contadordevisitasgratis.com/" target="_blank"><font
 color="#666666" size="1">Visitantes</font></a>
<!-- FIM DO CONTADOR GRATIS -->
<p></p>
<form style="width: 180px;"
 method="get" action="http://www.google.com/search"><input
 name="q" size="29" maxlength="250" value=""
 type="text" /> <input
 name="hl" value="pt-br" type="hidden" />
  <input name="btnG"
 value="Pesquisas Google" type="submit" /></form>
<img
 style="position: absolute; width: 100px; height: 37px; top: 602px; left: 726px;"
 alt="" src="img/anped.gif" /><img
 src="img/iced.JPG" alt=""
 style="position: absolute; width: 69px; height: 68px; top: 656px; left: 740px;" /><img
 style="position: absolute; width: 65px; height: 58px; top: 740px; left: 743px;"
 alt="" src="img/ufpa.JPG" /><img
 style="position: absolute; width: 65px; height: 54px; top: 819px; left: 747px;"
 alt="" src="img/oit1.gif" /><br />
<br />
</div>
<div
 style="text-align: center; margin-left: 40px;" class="clearer"><span /></div>
<div style="margin-top: 0px; height: 45px;"
 class="footer"><span
 style="text-decoration: underline;">UFPA
-
Instituto de Ciências da Educação -
ICED  Sala
229 - Av. Perimetral  da Ciência, S/N -
Guamá/Belém/PA</span><a
 href="http://www.peeloutlabels.co.uk"
 title="Giant Systems Web design">
</a></div>
</div>
</div>
<div
 style="font-size: 0.8em; text-align: center; margin-top: 1em; margin-bottom: 1em;">
<div
 style="font-size: 0.8em; text-align: center; margin-top: 1em; margin-bottom: 1em;"><span
 style="color: rgb(255, 255, 153);">Web
Designer </span><a
 href="mailto:cadesbr@yahoo.com.br"
 style="color: rgb(255, 255, 153);">Carmem
Santos</a><span
 style="color: rgb(255, 255, 153);"> 2010</span>
</div>
</div>
</div>
</body>
</html>

Bruno Augusto · Abril 22, 2010

Primeiro, não use palavras como URGENTE, SOCORRO e etc. nos títulos dos tópicos.

Segundo, coloque um URL acessível deste HTML. Ninguém é obrigado a montar esse HTML na cabeça ou no computador pra ver o problema.

Terceiro, não precisa postar o HTML todo pois, pelo link poderemos ver.

Considerações:

- Você desenvolveu o layout se baseando em qual navegador?

- Localmente funciona?

- Quem testou online (se é que não foi você), refez as mesmas escolhas que você ao testar localmente (resolução, navegador...)?

Aprendiz CSS · Abril 22, 2010

Faço as palavras do Imaggens as minhas :D

Thiago Retondar · Abril 22, 2010

Título alterado:

Preciso de ajuda urgente! / Quando coloco meu site on line, as imagens ficam fora do lugar, http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Imagens ficam em lugares errados quando online

Esse código CSS está sendo gerado, né? Está tudo inline... :(

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

cadesbr · Abril 23, 2010

Primeiro, não use palavras como URGENTE, SOCORRO e etc. nos títulos dos tópicos.

Segundo, coloque um URL acessível deste HTML. Ninguém é obrigado a montar esse HTML na cabeça ou no computador pra ver o problema.

Terceiro, não precisa postar o HTML todo pois, pelo link poderemos ver.

Considerações:

- Você desenvolveu o layout se baseando em qual navegador?

- Localmente funciona?

- Quem testou online (se é que não foi você), refez as mesmas escolhas que você ao testar localmente (resolução, navegador...)?

Não deseonvolvi o lay out baseado em nenhum navegador, como eu faço isso? Preciso que me ajudem, o site não está on line por causa desse problema. Uso Nvu pra editar o site, coloquei o html porque o site não está no ar, preciso corrigir esse problema pro site ficar on line, se puder ajudar, agradeço muito.

Bruno Augusto · Abril 23, 2010

Por ser uma página HTML simples, acredito que o GooglePages ajude com os testes online.

Se não der pra fazer upload, procure qualquer host gratuito mesmo. Você PRECISA de um servidor de testes para essas eventualidades.

Desenvolver um site baseado em um navegador seria desenvolver o layout do site inteiro usando um único navegador. Depois testá-lo nos outros navegadores populares e ir apenas acrescentando algumas correções.

Você pode desenvolver no Firefox ou no Chrome e depois corrigir para o Internet Explorer, Opera e Safari.

cadesbr · Abril 23, 2010

Por ser uma página HTML simples, acredito que o GooglePages ajude com os testes online.

Se não der pra fazer upload, procure qualquer host gratuito mesmo. Você PRECISA de um servidor de testes para essas eventualidades.

Desenvolver um site baseado em um navegador seria desenvolver o layout do site inteiro usando um único navegador. Depois testá-lo nos outros navegadores populares e ir apenas acrescentando algumas correções.

Você pode desenvolver no Firefox ou no Chrome e depois corrigir para o Internet Explorer, Opera e Safari.

Obrigada pela dica. No Nvu sempre visualizo no crome, mas as imagens ficam nos lugares corretos no Nvu, quando visualizo no crome e no firefox, ficam fora do lugar, como posso fazer essas correções??

você poderia sugerir um servidor de testes que posso usar?

GabrielFerrari · Abril 23, 2010

www.ueuo.com

é grátis e fácil de se cadastrar :)

cadesbr · Abril 23, 2010

www.ueuo.com

é grátis e fácil de se cadastrar :)

Ok!! O site está on line num servidor.

esta é a url

http://www.cadesbr.xpg.com.br/

observe que as imagens estão foram do lugar, como faço pra que as imagens fiquem nos lugares corretos??

Aprendiz CSS · Abril 23, 2010

http://aprendacss.wordpress.com/2008/07/08/position-absolute/

leia isso

cadesbr · Abril 23, 2010

www.ueuo.com

é grátis e fácil de se cadastrar :)

Ok!! O site está on line num servidor.

esta é a url

http://www.cadesbr.xpg.com.br/

observe que as imagens estão foram do lugar, como faço pra que as imagens fiquem nos lugares corretos??

Estou testando no firefox, explorer e crome, as imagens embaixo consegui ajustar, mas as imagens do layout ainda permanecem fora do lugar, observe:

http://www.cadesbr.xpg.com.br/

o que devo fazer pra resolver esse problema??

http://aprendacss.wordpress.com/2008/07/08/position-absolute/

leia isso

Obrigada pelo post. O que pude verificar é que estou colocando uma imagem encima do posicion absolute. Como faço pra imagem ficar em posição abosoluta também?? Penso que dessa forma o problema será solucionado

Aprendiz CSS · Abril 23, 2010

O seu problema é o position absolute

Se leu meu post, usá-lo traz mais problemas do que beneficios quando mal usado como é o seu caso

procure usar float: left

Abraço

cadesbr · Abril 23, 2010

O seu problema é o position absolute

Se leu meu post, usá-lo traz mais problemas do que beneficios quando mal usado como é o seu caso

procure usar float: left

Abraço

Onde eu devo colocar o float:left no hmtl??

<div style=""><a

name="log"><img

style="position: absolute; z-index: 1; width: 529px; height: 87px; top: 32px; left: 259px;"

alt="" src="img/logo01.gif" /> </a></div>

</div>

Ele vai substituir o posicion absolute??

Aprendiz CSS · Abril 23, 2010

no blog que eu te passei tem um artigo sobre float.

Sugiro que leia e entenda o que ele faz.

Remova todos os positions absolute e reestruture o seu site!

Aqui no forum, nós ajudamos as pessoas e não fazemos para elas.

Se quiser que façamos, basta mandar mensagem privada para alguem que eles te passam um valor.

Peço que não interprete mal, mas pelo que dá para entender, você quer que façamos o seu trabalho ;)

Abraço

cadesbr · Abril 23, 2010

no blog que eu te passei tem um artigo sobre float.

Sugiro que leia e entenda o que ele faz.

Remova todos os positions absolute e reestruture o seu site!

Aqui no forum, nós ajudamos as pessoas e não fazemos para elas.

Se quiser que façamos, basta mandar mensagem privada para alguem que eles te passam um valor.

Peço que não interprete mal, mas pelo que dá para entender, você quer que façamos o seu trabalho ;)

Abraço

Amigo obrigada pela franqueza, quero e preciso aprender, sou muito grata pelas indicações.

Thiago Retondar · Abril 23, 2010

Somente aquelas 4 imagens da coluna direita estão erradas aqui.

Tire os estilos inline dela e aplique, se necessário, margin para fazer o espaçamento.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

cadesbr · Abril 23, 2010

Ok!! Consegui alinhar as imagens, as dicas foram excelentes. Agora preciso resolver mais um problema como faço pra tirar essa barra ai no log na imagem gepte do site?

http://www.cadesbr.xpg.com.br/

Thiago Retondar · Abril 23, 2010

Tire o overflow e aumente o height do topo.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

cadesbr · Abril 23, 2010

Não tem esse overflow aqui...eu consegui tirar, mas quando mexo na imagem, a barra aparece novamente...

João Prado · Abril 23, 2010

Aumente o height da div header

o que acontece é que a imagem é maior do que a div portanto ele cria a barra de rolagem

a imagem tem 130px de altura enquanto a div 105px.

Arquivado

[Resolvido] Imagens ficam em lugares errados quando online

Recommended Posts

cadesbr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

cadesbr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

cadesbr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

cadesbr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

cadesbr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

cadesbr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

cadesbr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

cadesbr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

cadesbr 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64