[Resolvido] Listando produtos - Desalinhado

[Adriano M. 0]

boa tarde galera, to faz semanas ja tentando arrumar meu problema, nao consigo, por favor me ajudem, la vai

tenho um site de um cliente um exemplo na pagina de busca ele mostra os produtos buscados

 

http://www.bellamanoela.com.br/produtos.asp?p=3&opcao=busca

 

porem tem linha que ele mostra 3 produtos, tem linha que mostra 2 produtos, tem linha que mostra 1 produto... nao consigo arrumar isso, ja tentei usar lista.. agora estou tentando apenas com div

 

verifiquem ai o codigo fonte a div que mostra a parte central com os produtos comeca na linha 115 <div id="principal">

 

meu css

 

#principal {

float:left;

width:67%;

min-width:660px;

background-color:#FFF;

margin-top: 10px;

margin-left:10px;

overflow:hidden;

}

 

#conteudo { margin:0; padding:0; text-align:center; width:100%; min-width:660px; overflow:hidden; }

#lista { float:left; font-size:12px; width:33.33%; max-width:33.33%; min-width:220px; margin:10px 0 0 0; text-align:center; }

#lista img { margin-top:3px; }

#conteudo a { color:#333; }

#conteudo p { margin-top:5px; }

#menuutil {

float:right;

width:15%;

background-color:#FFF;

text-align:center;

}

#menuutil li { margin-bottom:10px }

#categorias {

clear:both;

float:left;

width:16%;

margin-top:5px;

margin-left:1px;

background-color:#FFF;

}

#menucat { background-color:#CEA773; text-align:center; }

#newsletter { margin-top:10px; }

#newsletter p { text-align:center; margin-top: 5px; margin-bottom:5px; }

#news { background-color:#CEA773; text-align:center; }

#menucategoria { border-bottom:1px dashed #CCC; margin-left:1px; padding-bottom:10px; }

#menucategoria a { text-decoration:none; color:#593C1E; }

ul { list-style:none; }

 

segue a parte do codigo usando para listar

<div id="principal">

<p class="borda">PRODUTOS ENCONTRADOS NA BUSCA...</p>

<div id="conteudo">



<div id="lista">

<a href="produto.asp?produto=98" target="_parent">

<img src="mini.asp?path=D:/web/bellamanoela/htdocs/produtos/01(3).jpg" alt="">

<br />Jogo de Banheiro Florata <br /> Bella Manoela

<p class="valor">R$ 25,50</p>

<img src="imagens/detalhes.jpg" alt="Detalhes"></a>

</div>



<div id="lista">

<a href="produto.asp?produto=99" target="_parent">

<img src="mini.asp?path=D:/web/bellamanoela/htdocs/produtos/mosqueteiro.jpg" alt="">

<br />Mosquiteiro de Teto Renda Casal com Elastico <br /> Bella Manoela

<p class="valor">R$ 32,45</p>

<img src="imagens/detalhes.jpg" alt="Detalhes"></a>

</div>

</div>
</div>

[Paulo Mardson 1]

Já tentou colocar um overflow: hidden; na #lista{} e trocar "#" o ID por uma "." CLASS, acho que como as fotos são muito grandes elas devem estar passando da div.. bom não sei apenas dei uma olhada. Mas testa ai e vamos ver no que dá.

[Adriano M. 0]

o overflow ja tentei sim... estou usando agora mais ta mesma coisa.. tem diferenca em usar o # e usar pelo class?

[Fernando Gyn 0]

Defina um height na sua lista o erro esta acontecendo por essas #lista ter tamanhos diferentes.

bom quanto você perguntou se tem diferença entre class e id , existe de especifidade, e class foi feita para ser usado em algo que se repete.

id iguais e desaconselhado devido programação javascript.

aconselho um height:194px;

 

se bem que para mim seria melhor tabela,para mim isso se enquadra como dados tabulares

[Adriano M. 0]

putz, deu certo mesmo, eu acho q eu tinha tentado ja height com 100% mais nada.. ou entao tinha colocado em outro lugar.. bom agora deu certo, perfeito

 

valeu galera