Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

donato

[Resolvido] Lista aparecendo como tabela

Por , em Desenvolvimento frontend

Recommended Posts

donato    0

donato
Postado

Olá pessoal, estou com uma dificuldade aqui, tenho uma lista de produtos que são exibidos de 4 em 4 produtos em linha, mas não consegui, tentei de várias formas, esse é o código:

 

<div id="produtos">
	<ul>
		<li><p><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></p></li>
		<li><p><img src="imagens/miniaturas/178365_thumb.jpg" alt="" /><br /><span>Celesporin 150mg</span></p></li>
		<li><p><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></p></li>
		<li><p><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></p></li>
		<li><p><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></p></li>
		<li><p><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></p></li>
		<li><p><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></p></li>
		<li><p><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></p></li>
   </ul>
   </div>

CSS

#produtos ul li{
	display: inline;
	border: 1px solid #333333;
	width: 111px;
	
	}

abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mau B. Miranda    0

Mau B. Miranda
Postado

Fala ae Donato, beleza!!!

Cara tbm já tive q fazer várias listagem de produtos assim!!! Não é tão complicado se o espaço q se tem para essa lista for fixo!!!

Veja no css q eu dou um tamanho fixo para a <ul> e para encaixar as <li> é só calcular o tamanho!!!

Ex: a <ul> tem width:600px = 4x150px!!! Ou seja, cada <li> deve ter 150px de largura!!!! Só q desta forma ficaria uma colada na outra!!

Então eu dou uma margem left/right de 10px, 150px - 10px-10px=130px, então este é o espaço disponível para cara <li> ficando 4 em cada linha!!! :)

E o float é para ficar uma <li> ao lado da outra, e o display:inline é para resolver um problema no IE6 q dobra o valor da margem de um elemento q tenha um float!!!

 

 

CODE
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

<!--

#listaProd {

list-style:none;

margin:0;

padding:0;

width:600px;

}

#listaProd li {

float:left;

width:130px;

text-align:center;

margin:0 10px 20px;

display:inline;

}

--></style>

</head>

 

<body>

<ul id="listaProd">

<li><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></li>

<li><img src="imagens/miniaturas/178365_thumb.jpg" alt="" /><br /><span>Celesporin 150mg</span></li>

<li><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></li>

<li><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></li>

<li><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></li>

<li><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></li>

<li><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></li>

<li><img src="imagens/miniaturas/530514_thumb.jpg" alt="" /><br /><span>Azicox-250mg</span></li>

</ul>

 

</body>

</html>

Coloquei o css junto com o html só pra facilitar aqui!!! Mas pode separar!!!!

Agora, se essa lista tiver q ser liquida, dae as configurações devem ser em "%", já quebrei a cabeça pra fazer uma dessas, e consegui!!!

Se for o caso avisa ae!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Talvez alguém tenha alguma outra maneira de fazer, mas sempre faço assim!!

 

Espero ter ajudado!!!

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

Cara, valeu, perfeito, pelo que vi aqui o segredo era o float, tentei de tudo, menos o float. Só ajsutei as medidas e ficou top.

 

Valeu mesmo,

abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito