• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

HolyMurderer

Porque é que dá resultados diferentes?

13 mensagens neste tópico

Boas!

Tou com uma dúvida que não consigo mesmo compreender.

Reparei que se tiver uma parte da página com o seguinte código:

<div align="center">
<img src="layouts/default/top_left.jpg" height="24" width="607" />
<a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image35','','layouts/default/menu_home_rollover.jpg',1)">
<img src="layouts/default/menu_home.jpg" width="61" height="24" border="0" />
</a>
<img src="layouts/default/top_smallbar1.jpg" height="24" width="2" />
<img  src="layouts/default/menu_loja.jpg" height="24" width="62" />
<img src="layouts/default/top_smallbar1.jpg" height="24" width="2" />
<img src="layouts/default/menu_forum.jpg" height="24" width="65" />
<img src="layouts/default/index_r1_c19.jpg"  height="24" width="1" />
</div>

As imagens ficam tortas, com espaços entre elas, etc, mas fica tudo direito quando não coloco o mesmo html tão organizado, assim:

<div align="center"><img src="layouts/default/top_left.jpg" height="24" width="607" /><a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image35','','layouts/default/menu_home_rollover.jpg',1)"><img src="layouts/default/menu_home.jpg" width="61" height="24" border="0" /></a><img src="layouts/default/top_smallbar1.jpg" height="24" width="2" /><img  src="layouts/default/menu_loja.jpg" height="24" width="62" /><img src="layouts/default/top_smallbar1.jpg" height="24" width="2" /><img src="layouts/default/menu_forum.jpg" height="24" width="65" /><img src="layouts/default/index_r1_c19.jpg"  height="24" width="1" /></div>

Ou seja, se coloco o código todo de seguida, sem espaços nem parágrafos entre as tags, etc, tudo funciona bem... Alguém me sabe explicar porquê? Não consigo mesmo entender... O HTML não deveria ignorar o whitespace? Há forma de enganar isto? Se sim, como?

Abraço e obrigado

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<div align="center">
<img src="layouts/default/top_left.jpg" height="24" width="607"></img>
<a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image35','','layouts/default/menu_home_rollover.jpg',1)">
<img src="layouts/default/menu_home.jpg" name="Image35" width="61" height="24" border="0"></img>
</a>
<img style="border:0px; margin: 0px;" name="top_smallbar1" src="layouts/default/top_smallbar1.jpg" alt="" border="0" height="24" width="2"></img>
<img  src="layouts/default/menu_loja.jpg" alt="" border="0" height="24" width="62"></img>
<img src="layouts/default/top_smallbar2.jpg" alt="" border="0" height="24" width="2"></img>
<img src="layouts/default/menu_forum.jpg" alt="" border="0" height="24" width="65"></img>
<img src="layouts/default/index_r1_c19.jpg" alt="" border="0" height="24" width="1"></img>
</div>

Experimenta assim :P

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

LuPereira, obrigado pela resposta, mas faz a mesma coisa, ou seja, deixa um espaço entre cada imagem...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não sei se o problema estará relacionado com isso, mas respondendo à pergunta, o HTML ignora apenas o 2º espaço e seguintes, isto é, se quiseres colocar 2 espaços tens de especificar, mas se quiseres colocar só um não é preciso porque um o HTML aceita.

Não vejo grandes diferenças nos dois códigos, mas ver código no SMF é complicado. A única coisa que reparo é que não estás a fechar a tag <img>, nem na forma HTML 4 nem na forma XHTML.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Isso de fechar a tag já resolvi, costumo fechar na forma XHTML (já corrigi o código acima). Mas não é isso que está a provocar a falha... Só consigo de 2 formas, ou com a utilização de tabelas, ou com o código todo seguido, aí as imagens ficam certas, numa fila direita... O objectivo era não utilizar tabelas, mas se for necessário.......

A diferença entre o 1º pedaço de código e o 2º, é que o 2º está todo numa só linha, tudo seguido... no entanto, o 1º bocado de código coloca espaços entre cada uma das imagens, e o 2º não... é isso que gostaria de perceber...

O meu objectivo é utilizar código organizado, como tenho na 1ª parte, mas que não provoque os espaços em branco entre cada imagem, mas sim todas juntas/coladas, como o 2º bocado de código faz.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

no <div>, adiciona style="display:block;"

Faz o mesmo.

Se quiserem, testem vocês o código e vejam. Irão perceber melhor o que quero dizer...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não te sei explicar porque mas comigo o o ie costuma fazer isso muitas vezes em layouts mais complexos

mas nunca consegui perceber porquê

no <div>, adiciona style="display:block;"

o block é o valor padrão para as divs, por isso não necessitas de o especificar

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

já experimentaste a meter no css das imagens o margin a 0?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

já experimentaste a meter no css das imagens o margin a 0?

Coloquei:

<img style="margin:0;" src="layouts/default/top_left.jpg" height="24" width="607" />

Não tinha tentado, mas tentei agora, e não deu também :P

Já agora, não utilizo o IE, nem Windows. Faço os sites com as regras W3C, testo tudo, só depois é que testo no IE (tenho o ies4linux) e faço os acertos para lá ficar como fica nos browsers decentes. No entanto, este problema está a acontecer em qualquer lado que seja...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

experimenta display:inherit; (no div)

Não deu, mas não tinha muita lógica, pois iria fazer o inherit de onde?

Descobri foi uma coisa. Pus display:table e ficaram quase todas juntas, só ficou espaço na imagem que tem link para algum lado... tou a ver se percebo melhor isto.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Tenta colocar

#nome_da_div img a{
text-decoration: none;
border: 0;
}

Acho que se fizeres isto na imagem com o link é capaz de perder o espaço...

Coloca aí um screenshot para vermos melhor o que está a acontecer.

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora