browsers quebrando a linha sem <br />

[joaogil 1]

Bom, eu estou querendo fazer um layout tabless, ou no mínimo com poucas tabelas então eu fatiei uma imagem de 779px de largura (mesma largura da página em resolução 800x600) em 3 pedaços (imagens) dispostos horizontalmente, um do lado do outro.

Eu coloquei estas 3 imagens dentro de um <div> com largura 779px também.

Só que se eu colocar as 3 imagens uma do lado da outra no código elas ficam certas, mas se eu colocar uma embaixo da outra (apenas no código, sem dar quebra de linha <br />) as imagens quebram de linha também, como se os browsers lêssem a quebra de linha ASCII do código fonte (\n).

Exemplo:

 

Assim o layout NÃO bagunça porque as imagens estão uma do lado da outra no próprio código

<div style="width:779px;">		<img src="img/topo_02.jpg" alt="" width="253" height="102" /><img src="img/topo_03.jpg" alt="" width="280" height="102" /><img src="img/topo_04.jpg" alt="" /></div>

Assim o layout FICA BAGUNÇADO só porque as imagens estão com quebras de linhas no próprio código

<div style="width:779px;">		<img src="img/topo_02.jpg" alt="" width="253" height="102" />		<img src="img/topo_03.jpg" alt="" width="280" height="102" />		<img src="img/topo_04.jpg" alt="" /></div></div>

ISSO ACONTECE NO IE, FIREFOX E OPERA

Por que será ???

[micox 2]

Não é que ele está interpretando as quebras do ´codigo fonte como <br />Mas sim que a soma da largura das imagens ESTÁ ULTRAPASSANDO a largura da DIV pai.Quando voce emenda as tags img no código fonte, não há como o browser efetuar a quebra, mas quando voce separa elas por um ENTER ou ESPAÇO, o browser manda ela pra próxima linha.Pra resolver seu problema: Arrume a largura da div pai OU limite a largura das imagens.(ou então coloque elas via background-image que é o correto na metodologia webstandards).//PS.: Aliás, você era do fórum htmlstaff não? heheh

[joaogil 1]

Valeu micox !Bom, as soma da largura das 3 imagens dão 779px, ou seja, a mesma largura do div pai.253px280px +246px--------779pxA não ser que precise ser um pixel menor que a div pai !Mas qualquer coisa eu coloco de background!E eu não sou o cara do fórum do outro site, mas já entrei no seu blog, parabéns !

[Luiz Henrique 1]

Bom é provavel que as imagens estejam estourando o layout, mas se você diz que não ta ok, esta usando bordas?declare no htmluma id para sua div e no css#iddiv.img{float:left;}

[micox 2]

Bom, as soma da largura das 3 imagens dão 779px, ou seja, a mesma largura do div pai.

Mesmo que a soma esteja dando exatamente a largura do div pai, imagens ainda possuem : BORDA, MARGEM, ESPAÇAMENTO LATERAL, ETC. (ah, o div tb possue espaçamento interno padrão)

 

A forma de se corrigir isto é:

1) Dar uma folga maior e não ser exatamente a largura do pai.

2) zerando os margins e paddings de todos os elementos através da declaração * { margin:0; padding:0 } (OPÇÃO RECOMENDADA)

3) Tentar outra coisa como o grafitero postou aí.

[joaogil 1]

Valeu pessoal !

Mas a única coisa que funcionou foi colocar o float:left; nas imagens como o Graffiteiro falou !

Não adiantou eu diminuir as imagens porque eu acabei tendo que diminuir 5px de largura de uma das imagem e então elas ficavam alinhadas uma do lado da outra PORÉM ficava um espaço entre elas de uns 8px quebrando assim o layout.

Eu poderia ter colocado a imagem inteira como background-image sem fatiá-la, mas acho que aí ficaria muito pesado pro browser carregar.

Eu tb já estava usando a dica do Micox de zerar todos as margens e espaçamentos de todos os elementos.

 

vejam o código:

<style type="text/css">* { margin:0; padding:0;}#divGeral {	width: 779px;	background-color:#000;}#divTopo {	width:779px;	height:102px;}#divTopo img {	border:none;	float:left;}</style><!-- XHTML ---><div id="divGeral">   <div id="divTopo">	  <img src="img/topo_02.jpg" alt="PAC" width="253" height="102" />	  <img src="img/topo_03.jpg" alt="" width="280" height="102" />	  <img src="img/topo_04.jpg" alt="IESDE" width="246" height="102" />  </div></div><!-- XHTML --->